- client: Add default mode in the DNS settings: Merge pull request #650 in DNS/adguard-home from fix/1770 to master

Close #1770

Squashed commit of the following:

commit c1f75ea643623af78de020bd1bc49aa5b66e25c4
Merge: a5df78ad a869ec4c
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Wed Jun 10 18:56:24 2020 +0300

    Merge branch 'master' into fix/1770

commit a5df78ad303305efcafcfa2a170ff567a3a06db5
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Wed Jun 10 12:50:50 2020 +0300

    Revert "Update locales"

    This reverts commit 4b2b4499dea12949c53bce4ceeed595c17df84c6.

commit 4b2b4499dea12949c53bce4ceeed595c17df84c6
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Tue Jun 9 19:56:34 2020 +0300

    Update locales

commit 790cff0db84b5905362d2e2702b2cbca5c3c90b0
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Fri Jun 5 17:56:01 2020 +0300

    Update Upstream component with new api, extract reduxForm HOC names in constant

commit 72de3d5a92cc33d5b234c837879fc6990291e07b
Merge: 92a4a6ae 501a4e06
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Fri Jun 5 15:55:39 2020 +0300

    Merge remote-tracking branch 'origin/update-dnsproxy' into fix/1770

commit 501a4e06ab350e46ff78656141d925de9f2e4996
Author: Simon Zolin <s.zolin@adguard.com>
Date:   Fri Jun 5 12:47:13 2020 +0300

    openapi

commit 3930bd196572924f164ed011629356a0ac0ec631
Author: Simon Zolin <s.zolin@adguard.com>
Date:   Fri Jun 5 12:21:32 2020 +0300

    * DNS API: new setting "upstream_mode"; remove "fastest_addr", "parallel_requests"

    * use dnsproxy v0.29.0

commit 92a4a6ae24793a2a9ca05ad3ef2078573fd4d059
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Thu Jun 4 18:53:42 2020 +0300

    - 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/Filters/Check/index.js

@@ -7,6 +7,7 @@ import Card from '../../ui/Card';
 
 import { renderInputField } from '../../../helpers/form';
 import Info from './Info';
+import { FORM_NAME } from '../../../helpers/constants';
 
 const Check = (props) => {
     const {
@@ -60,7 +61,7 @@ const Check = (props) => {
                         </div>
                         {check.hostname && (
                             <Fragment>
-                                <hr/>
+                                <hr />
                                 <Info
                                     filters={filters}
                                     whitelistFilters={whitelistFilters}
@@ -94,5 +95,5 @@ Check.propTypes = {
 
 export default flow([
     withTranslation(),
-    reduxForm({ form: 'domainCheckForm' }),
+    reduxForm({ form: FORM_NAME.DOMAIN_CHECK }),
 ])(Check);

client/src/components/Filters/Form.js

@@ -5,6 +5,7 @@ import { Trans, withTranslation } from 'react-i18next';
 import flow from 'lodash/flow';
 
 import { renderInputField, required, isValidPath } from '../../helpers/form';
+import { FORM_NAME } from '../../helpers/constants';
 
 const Form = (props) => {
     const {
@@ -19,18 +20,18 @@ const Form = (props) => {
     return (
         <form onSubmit={handleSubmit}>
             <div className="modal-body">
-            <div className="form__group">
+                <div className="form__group">
-                <Field
+                    <Field
-                    id="name"
+                        id="name"
-                    name="name"
+                        name="name"
-                    type="text"
+                        type="text"
-                    component={renderInputField}
+                        component={renderInputField}
-                    className="form-control"
+                        className="form-control"
-                    placeholder={t('enter_name_hint')}
+                        placeholder={t('enter_name_hint')}
-                    validate={[required]}
+                        validate={[required]}
-                    normalizeOnBlur={(data) => data.trim()}
+                        normalizeOnBlur={(data) => data.trim()}
-                />
+                    />
-            </div>
+                </div>
                 <div className="form__group">
                     <Field
                         id="url"
@@ -79,7 +80,5 @@ Form.propTypes = {
 
 export default flow([
     withTranslation(),
-    reduxForm({
+    reduxForm({ form: FORM_NAME.FILTER }),
-        form: 'filterForm',
-    }),
 ])(Form);

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

@@ -7,6 +7,7 @@ import flow from 'lodash/flow';
 import {
     renderInputField, required, domain, answer,
 } from '../../../helpers/form';
+import { FORM_NAME } from '../../../helpers/constants';
 
 const Form = (props) => {
     const {
@@ -104,7 +105,7 @@ Form.propTypes = {
 export default flow([
     withTranslation(),
     reduxForm({
-        form: 'rewritesForm',
+        form: FORM_NAME.REWRITES,
         enableReinitialize: true,
     }),
 ])(Form);

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

@@ -6,7 +6,7 @@ import flow from 'lodash/flow';
 
 import { toggleAllServices } from '../../../helpers/helpers';
 import { renderServiceField } from '../../../helpers/form';
-import { SERVICES } from '../../../helpers/constants';
+import { FORM_NAME, SERVICES } from '../../../helpers/constants';
 
 const Form = (props) => {
     const {
@@ -84,7 +84,7 @@ Form.propTypes = {
 export default flow([
     withTranslation(),
     reduxForm({
-        form: 'servicesForm',
+        form: FORM_NAME.SERVICES,
         enableReinitialize: true,
     }),
 ])(Form);

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

@@ -5,7 +5,7 @@ import { withTranslation } from 'react-i18next';
 import flow from 'lodash/flow';
 
 import { renderInputField } from '../../../helpers/form';
-import { RESPONSE_FILTER } from '../../../helpers/constants';
+import { FORM_NAME, RESPONSE_FILTER } from '../../../helpers/constants';
 import Tooltip from '../../ui/Tooltip';
 
 const renderFilterField = ({
@@ -124,6 +124,6 @@ Form.propTypes = {
 export default flow([
     withTranslation(),
     reduxForm({
-        form: 'logsFilterForm',
+        form: FORM_NAME.LOGS_FILTER,
     }),
 ])(Form);

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

@@ -20,7 +20,7 @@ import {
     renderSelectField,
     renderServiceField,
 } from '../../../helpers/form';
-import { SERVICES } from '../../../helpers/constants';
+import { FORM_NAME, SERVICES } from '../../../helpers/constants';
 import './Service.css';
 
 const settingsCheckboxes = [
@@ -338,7 +338,7 @@ Form.propTypes = {
     tagsOptions: PropTypes.array.isRequired,
 };
 
-const selector = formValueSelector('clientForm');
+const selector = formValueSelector(FORM_NAME.CLIENT);
 
 Form = connect((state) => {
     const useGlobalSettings = selector(state, 'use_global_settings');
@@ -352,7 +352,7 @@ Form = connect((state) => {
 export default flow([
     withTranslation(),
     reduxForm({
-        form: 'clientForm',
+        form: FORM_NAME.CLIENT,
         enableReinitialize: true,
         validate,
     }),

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

@@ -8,6 +8,7 @@ import flow from 'lodash/flow';
 import {
     renderInputField, required, ipv4, isPositive, toNumber,
 } from '../../../helpers/form';
+import { FORM_NAME } from '../../../helpers/constants';
 
 const renderInterfaces = ((interfaces) => (
     Object.keys(interfaces).map((item) => {
@@ -221,7 +222,7 @@ Form.propTypes = {
     change: PropTypes.func.isRequired,
 };
 
-const selector = formValueSelector('dhcpForm');
+const selector = formValueSelector(FORM_NAME.DHCP);
 
 Form = connect((state) => {
     const interfaceValue = selector(state, 'interface_name');
@@ -232,5 +233,5 @@ Form = connect((state) => {
 
 export default flow([
     withTranslation(),
-    reduxForm({ form: 'dhcpForm' }),
+    reduxForm({ form: FORM_NAME.DHCP }),
 ])(Form);

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

@@ -7,6 +7,7 @@ import flow from 'lodash/flow';
 import {
     renderInputField, ipv4, mac, required,
 } from '../../../../helpers/form';
+import { FORM_NAME } from '../../../../helpers/constants';
 
 const Form = (props) => {
     const {
@@ -94,5 +95,5 @@ Form.propTypes = {
 
 export default flow([
     withTranslation(),
-    reduxForm({ form: 'leaseForm' }),
+    reduxForm({ form: FORM_NAME.LEASE }),
 ])(Form);

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

@@ -5,6 +5,7 @@ import { Trans, withTranslation } from 'react-i18next';
 import flow from 'lodash/flow';
 import { renderTextareaField } from '../../../../helpers/form';
 import { normalizeMultiline } from '../../../../helpers/helpers';
+import { FORM_NAME } from '../../../../helpers/constants';
 
 const fields = [
     {
@@ -84,4 +85,4 @@ Form.propTypes = {
     textarea: PropTypes.bool,
 };
 
-export default flow([withTranslation(), reduxForm({ form: 'accessForm' })])(Form);
+export default flow([withTranslation(), reduxForm({ form: FORM_NAME.ACCESS })])(Form);

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

@@ -15,7 +15,7 @@ import {
     biggerOrEqualZero,
     toNumber,
 } from '../../../../helpers/form';
-import { BLOCKING_MODES } from '../../../../helpers/constants';
+import { BLOCKING_MODES, FORM_NAME } from '../../../../helpers/constants';
 
 const checkboxes = [{
     name: 'edns_cs_enabled',
@@ -60,91 +60,91 @@ const getFields = (processing, t) => Object.values(BLOCKING_MODES)
 let Form = ({
     handleSubmit, submitting, invalid, processing, blockingMode, t,
 }) => <form onSubmit={handleSubmit}>
-        <div className="row">
+    <div className="row">
-            <div className="col-12 col-sm-6">
+        <div className="col-12 col-sm-6">
-                <div className="form__group form__group--settings">
+            <div className="form__group form__group--settings">
-                    <label htmlFor="ratelimit"
+                <label htmlFor="ratelimit"
-                           className="form__label form__label--with-desc">
+                       className="form__label form__label--with-desc">
-                        <Trans>rate_limit</Trans>
+                    <Trans>rate_limit</Trans>
-                    </label>
+                </label>
-                    <div className="form__desc form__desc--top">
+                <div className="form__desc form__desc--top">
-                        <Trans>rate_limit_desc</Trans>
+                    <Trans>rate_limit_desc</Trans>
-                    </div>
+                </div>
-                    <Field
+                <Field
-                        name="ratelimit"
+                    name="ratelimit"
-                        type="number"
+                    type="number"
-                        component={renderInputField}
+                    component={renderInputField}
-                        className="form-control"
+                    className="form-control"
-                        placeholder={t('form_enter_rate_limit')}
+                    placeholder={t('form_enter_rate_limit')}
-                        normalize={toNumber}
+                    normalize={toNumber}
-                        validate={[required, biggerOrEqualZero]}
+                    validate={[required, biggerOrEqualZero]}
-                    />
+                />
+            </div>
+        </div>
+        {checkboxes.map(({ name, placeholder, subtitle }) => <div className="col-12" key={name}>
+            <div className="form__group form__group--settings">
+                <Field
+                    name={name}
+                    type="checkbox"
+                    component={renderSelectField}
+                    placeholder={t(placeholder)}
+                    disabled={processing}
+                    subtitle={t(subtitle)}
+                />
+            </div>
+        </div>)}
+        <div className="col-12">
+            <div className="form__group form__group--settings mb-4">
+                <label className="form__label form__label--with-desc">
+                    <Trans>blocking_mode</Trans>
+                </label>
+                <div className="form__desc form__desc--top">
+                    {Object.values(BLOCKING_MODES)
+                        .map((mode) => (
+                            <li key={mode}>
+                                <Trans>{`blocking_mode_${mode}`}</Trans>
+                            </li>
+                        ))}
+                </div>
+                <div className="custom-controls-stacked">
+                    {getFields(processing, t)}
                 </div>
             </div>
-            {checkboxes.map(({ name, placeholder, subtitle }) => <div className="col-12" key={name}>
+        </div>
+        {blockingMode === BLOCKING_MODES.custom_ip && (
+            <Fragment>
+                {customIps.map(({
+                    description,
+                    name,
+                    validateIp,
+                }) => <div className="col-12 col-sm-6" key={name}>
                     <div className="form__group form__group--settings">
+                        <label className="form__label form__label--with-desc"
+                               htmlFor={name}><Trans>{name}</Trans>
+                        </label>
+                        <div className="form__desc form__desc--top">
+                            <Trans>{description}</Trans>
+                        </div>
                         <Field
                             name={name}
-                            type="checkbox"
+                            component={renderInputField}
-                            component={renderSelectField}
+                            className="form-control"
-                            placeholder={t(placeholder)}
+                            placeholder={t('form_enter_ip')}
-                            disabled={processing}
+                            validate={[validateIp, required]}
-                            subtitle={t(subtitle)}
                         />
                     </div>
                 </div>)}
-            <div className="col-12">
+            </Fragment>
-                <div className="form__group form__group--settings mb-4">
+        )}
-                    <label className="form__label form__label--with-desc">
+    </div>
-                        <Trans>blocking_mode</Trans>
+    <button
-                    </label>
+        type="submit"
-                    <div className="form__desc form__desc--top">
+        className="btn btn-success btn-standard btn-large"
-                        {Object.values(BLOCKING_MODES)
+        disabled={submitting || invalid || processing}
-                            .map((mode) => (
+    >
-                                <li key={mode}>
+        <Trans>save_btn</Trans>
-                                    <Trans>{`blocking_mode_${mode}`}</Trans>
+    </button>
-                                </li>
+</form>;
-                            ))}
-                    </div>
-                    <div className="custom-controls-stacked">
-                        {getFields(processing, t)}
-                    </div>
-                </div>
-            </div>
-            {blockingMode === BLOCKING_MODES.custom_ip && (
-                <Fragment>
-                    {customIps.map(({
-                        description,
-                        name,
-                        validateIp,
-                    }) => <div className="col-12 col-sm-6" key={name}>
-                        <div className="form__group form__group--settings">
-                            <label className="form__label form__label--with-desc"
-                                   htmlFor={name}><Trans>{name}</Trans>
-                            </label>
-                            <div className="form__desc form__desc--top">
-                                <Trans>{description}</Trans>
-                            </div>
-                            <Field
-                                name={name}
-                                component={renderInputField}
-                                className="form-control"
-                                placeholder={t('form_enter_ip')}
-                                validate={[validateIp, required]}
-                            />
-                        </div>
-                    </div>)}
-                </Fragment>
-            )}
-        </div>
-        <button
-            type="submit"
-            className="btn btn-success btn-standard btn-large"
-            disabled={submitting || invalid || processing}
-        >
-            <Trans>save_btn</Trans>
-        </button>
-    </form>;
 
 Form.propTypes = {
     blockingMode: PropTypes.string.isRequired,
@@ -155,7 +155,7 @@ Form.propTypes = {
     t: PropTypes.func.isRequired,
 };
 
-const selector = formValueSelector('blockingModeForm');
+const selector = formValueSelector(FORM_NAME.BLOCKING_MODE);
 
 Form = connect((state) => {
     const blockingMode = selector(state, 'blocking_mode');
@@ -166,7 +166,5 @@ Form = connect((state) => {
 
 export default flow([
     withTranslation(),
-    reduxForm({
+    reduxForm({ form: FORM_NAME.BLOCKING_MODE }),
-        form: 'blockingModeForm',
-    }),
 ])(Form);

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

@@ -1,14 +1,14 @@
 import React from 'react';
-import { connect } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
-import { Field, reduxForm, formValueSelector } from 'redux-form';
+import { Field, reduxForm } from 'redux-form';
-import { Trans, withTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
-import flow from 'lodash/flow';
 import classnames from 'classnames';
 
 import Examples from './Examples';
 import { renderRadioField } from '../../../../helpers/form';
-import { DNS_REQUEST_OPTIONS } from '../../../../helpers/constants';
+import { DNS_REQUEST_OPTIONS, FORM_NAME } from '../../../../helpers/constants';
+import { testUpstream } from '../../../../actions';
 
 const getInputFields = () => [{
     // eslint-disable-next-line react/display-name
@@ -22,15 +22,23 @@ const getInputFields = () => [{
     placeholder: 'upstream_dns',
 },
 {
-    name: 'dnsRequestOption',
+    name: 'upstream_mode',
     type: 'radio',
-    value: DNS_REQUEST_OPTIONS.PARALLEL_REQUESTS,
+    value: DNS_REQUEST_OPTIONS.LOAD_BALANCING,
+    component: renderRadioField,
+    subtitle: 'load_balancing_desc',
+    placeholder: 'load_balancing',
+},
+{
+    name: 'upstream_mode',
+    type: 'radio',
+    value: DNS_REQUEST_OPTIONS.PARALLEL,
     component: renderRadioField,
     subtitle: 'upstream_parallel',
     placeholder: 'parallel_requests',
 },
 {
-    name: 'dnsRequestOption',
+    name: 'upstream_mode',
     type: 'radio',
     value: DNS_REQUEST_OPTIONS.FASTEST_ADDR,
     component: renderRadioField,
@@ -38,22 +46,22 @@ const getInputFields = () => [{
     placeholder: 'fastest_addr',
 }];
 
-let Form = (props) => {
+const Form = ({
-    const {
+    submitting, invalid, processingSetConfig, processingTestUpstream, handleSubmit,
-        t,
+}) => {
-        handleSubmit,
+    const dispatch = useDispatch();
-        testUpstream,
+    const [t] = useTranslation();
-        submitting,
+    const upstream_dns = useSelector((store) => store.form[FORM_NAME.UPSTREAM].values.upstream_dns);
-        invalid,
+    const bootstrap_dns = useSelector((store) => store.form[FORM_NAME.UPSTREAM]
-        processingSetConfig,
+        .values.bootstrap_dns);
-        processingTestUpstream,
+
+    const handleUpstreamTest = () => dispatch(testUpstream({
         upstream_dns,
         bootstrap_dns,
-    } = props;
+    }));
 
-    const testButtonClass = classnames({
+    const testButtonClass = classnames('btn btn-primary btn-standard mr-2', {
-        'btn btn-primary btn-standard mr-2': true,
+        'btn-loading': processingTestUpstream,
-        'btn btn-primary btn-standard mr-2 btn-loading': processingTestUpstream,
     });
 
     const INPUT_FIELDS = getInputFields();
@@ -106,11 +114,7 @@ let Form = (props) => {
                 <button
                     type="button"
                     className={testButtonClass}
-                    onClick={() => testUpstream({
+                    onClick={handleUpstreamTest}
-                        upstream_dns,
-                        bootstrap_dns,
-                    })
-                    }
                     disabled={!upstream_dns || processingTestUpstream}
                 >
                     <Trans>test_upstream_btn</Trans>
@@ -131,7 +135,6 @@ let Form = (props) => {
 
 Form.propTypes = {
     handleSubmit: PropTypes.func,
-    testUpstream: PropTypes.func,
     submitting: PropTypes.bool,
     invalid: PropTypes.bool,
     initialValues: PropTypes.object,
@@ -139,24 +142,6 @@ Form.propTypes = {
     bootstrap_dns: PropTypes.string,
     processingTestUpstream: PropTypes.bool,
     processingSetConfig: PropTypes.bool,
-    t: PropTypes.func,
 };
 
-const selector = formValueSelector('upstreamForm');
+export default reduxForm({ form: FORM_NAME.UPSTREAM })(Form);
-
-Form = connect((state) => {
-    const upstream_dns = selector(state, 'upstream_dns');
-    const bootstrap_dns = selector(state, 'bootstrap_dns');
-
-    return {
-        upstream_dns,
-        bootstrap_dns,
-    };
-})(Form);
-
-export default flow([
-    withTranslation(),
-    reduxForm({
-        form: 'upstreamForm',
-    }),
-])(Form);

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

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

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

@@ -1,6 +1,6 @@
-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';
@@ -8,58 +8,52 @@ import Config from './Config';
 import PageTitle from '../../ui/PageTitle';
 import Loading from '../../ui/Loading';
 
-class Dns extends Component {
+const Dns = (props) => {
-    componentDidMount() {
+    const [t] = useTranslation();
-        this.props.getAccessList();
-        this.props.getDnsConfig();
-    }
 
-    render() {
+    useEffect(() => {
-        const {
+        props.getAccessList();
-            t,
+        props.getDnsConfig();
-            settings,
+    }, []);
-            access,
-            setAccessList,
-            testUpstream,
-            dnsConfig,
-            setDnsConfig,
-        } = this.props;
 
-        const isDataLoading = access.processing || dnsConfig.processingGetConfig;
+    const {
+        settings,
+        access,
+        setAccessList,
+        dnsConfig,
+        setDnsConfig,
+    } = props;
 
-        return (
+    const isDataLoading = access.processing || dnsConfig.processingGetConfig;
-            <Fragment>
+
-                <PageTitle title={t('dns_settings')} />
+    return (
-                {isDataLoading
+        <>
-                    ? <Loading />
+            <PageTitle title={t('dns_settings')} />
-                    : <Fragment>
+            {isDataLoading
-                        <Upstream
+                ? <Loading />
-                            processingTestUpstream={settings.processingTestUpstream}
+                : <>
-                            testUpstream={testUpstream}
+                    <Upstream
-                            dnsConfig={dnsConfig}
+                        processingTestUpstream={settings.processingTestUpstream}
-                            setDnsConfig={setDnsConfig}
+                        dnsConfig={dnsConfig}
-                        />
+                    />
-                        <Config
+                    <Config
-                            dnsConfig={dnsConfig}
+                        dnsConfig={dnsConfig}
-                            setDnsConfig={setDnsConfig}
+                        setDnsConfig={setDnsConfig}
-                        />
+                    />
-                        <Access access={access} setAccessList={setAccessList} />
+                    <Access access={access} setAccessList={setAccessList} />
-                    </Fragment>}
+                </>}
-            </Fragment>
+        </>
-        );
+    );
-    }
+};
-}
 
 Dns.propTypes = {
     settings: PropTypes.object.isRequired,
-    testUpstream: PropTypes.func.isRequired,
     getAccessList: PropTypes.func.isRequired,
     setAccessList: PropTypes.func.isRequired,
     access: PropTypes.object.isRequired,
     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/components/Settings/Encryption/Form.js

@@ -17,6 +17,7 @@ import {
 import i18n from '../../../i18n';
 import KeyStatus from './KeyStatus';
 import CertificateStatus from './CertificateStatus';
+import { FORM_NAME } from '../../../helpers/constants';
 
 const validate = (values) => {
     const errors = {};
@@ -394,7 +395,7 @@ Form.propTypes = {
     privateKeySource: PropTypes.string,
 };
 
-const selector = formValueSelector('encryptionForm');
+const selector = formValueSelector(FORM_NAME.ENCRYPTION);
 
 Form = connect((state) => {
     const isEnabled = selector(state, 'enabled');
@@ -418,7 +419,7 @@ Form = connect((state) => {
 export default flow([
     withTranslation(),
     reduxForm({
-        form: 'encryptionForm',
+        form: FORM_NAME.ENCRYPTION,
         validate,
     }),
 ])(Form);

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

@@ -5,12 +5,13 @@ import { Trans, withTranslation } from 'react-i18next';
 import flow from 'lodash/flow';
 
 import { renderSelectField, toNumber } from '../../../helpers/form';
-import { FILTERS_INTERVALS_HOURS } from '../../../helpers/constants';
+import { FILTERS_INTERVALS_HOURS, FORM_NAME } from '../../../helpers/constants';
 
 const getTitleForInterval = (interval, t) => {
     if (interval === 0) {
         return t('disabled');
-    } if (interval === 72 || interval === 168) {
+    }
+    if (interval === 72 || interval === 168) {
         return t('interval_days', { count: interval / 24 });
     }
 
@@ -81,7 +82,5 @@ Form.propTypes = {
 
 export default flow([
     withTranslation(),
-    reduxForm({
+    reduxForm({ form: FORM_NAME.FILTER_CONFIG }),
-        form: 'filterConfigForm',
-    }),
 ])(Form);

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

@@ -5,22 +5,22 @@ import { Trans, withTranslation } from 'react-i18next';
 import flow from 'lodash/flow';
 
 import { renderSelectField, renderRadioField, toNumber } from '../../../helpers/form';
-import { QUERY_LOG_INTERVALS_DAYS } from '../../../helpers/constants';
+import { FORM_NAME, QUERY_LOG_INTERVALS_DAYS } from '../../../helpers/constants';
 
 const getIntervalFields = (processing, t, toNumber) => QUERY_LOG_INTERVALS_DAYS.map((interval) => {
     const title = interval === 1 ? t('interval_24_hour') : t('interval_days', { count: interval });
 
     return (
-            <Field
+        <Field
-                key={interval}
+            key={interval}
-                name="interval"
+            name="interval"
-                type="radio"
+            type="radio"
-                component={renderRadioField}
+            component={renderRadioField}
-                value={interval}
+            value={interval}
-                placeholder={title}
+            placeholder={title}
-                normalize={toNumber}
+            normalize={toNumber}
-                disabled={processing}
+            disabled={processing}
-            />
+        />
     );
 });
 
@@ -91,7 +91,5 @@ Form.propTypes = {
 
 export default flow([
     withTranslation(),
-    reduxForm({
+    reduxForm({ form: FORM_NAME.LOG_CONFIG }),
-        form: 'logConfigForm',
-    }),
 ])(Form);

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

@@ -5,22 +5,22 @@ import { Trans, withTranslation } from 'react-i18next';
 import flow from 'lodash/flow';
 
 import { renderRadioField, toNumber } from '../../../helpers/form';
-import { STATS_INTERVALS_DAYS } from '../../../helpers/constants';
+import { FORM_NAME, STATS_INTERVALS_DAYS } from '../../../helpers/constants';
 
 const getIntervalFields = (processing, t, toNumber) => STATS_INTERVALS_DAYS.map((interval) => {
     const title = interval === 1 ? t('interval_24_hour') : t('interval_days', { count: interval });
 
     return (
-            <Field
+        <Field
-                key={interval}
+            key={interval}
-                name="interval"
+            name="interval"
-                type="radio"
+            type="radio"
-                component={renderRadioField}
+            component={renderRadioField}
-                value={interval}
+            value={interval}
-                placeholder={title}
+            placeholder={title}
-                normalize={toNumber}
+            normalize={toNumber}
-                disabled={processing}
+            disabled={processing}
-            />
+        />
     );
 });
 
@@ -76,7 +76,5 @@ Form.propTypes = {
 
 export default flow([
     withTranslation(),
-    reduxForm({
+    reduxForm({ form: FORM_NAME.STATS_CONFIG }),
-        form: 'statsConfigForm',
-    }),
 ])(Form);

client/src/containers/Dns.js

@@ -1,5 +1,4 @@
 import { connect } from 'react-redux';
-import { testUpstream } from '../actions';
 import { getAccessList, setAccessList } from '../actions/access';
 import {
     getRewritesList,
@@ -25,7 +24,6 @@ const mapStateToProps = (state) => {
 };
 
 const mapDispatchToProps = {
-    testUpstream,
     getAccessList,
     setAccessList,
     getRewritesList,

client/src/helpers/constants.js

@@ -377,12 +377,33 @@ export const ACTION = {
 };
 
 export const DNS_REQUEST_OPTIONS = {
-    PARALLEL_REQUESTS: 'parallel_requests',
+    PARALLEL: 'parallel',
     FASTEST_ADDR: 'fastest_addr',
+    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
 };
+
+export const FORM_NAME = {
+    UPSTREAM: 'upstream',
+    DOMAIN_CHECK: 'domainCheck',
+    FILTER: 'filter',
+    REWRITES: 'rewrites',
+    LOGS_FILTER: 'logsFilter',
+    CLIENT: 'client',
+    DHCP: 'dhcp',
+    LEASE: 'lease',
+    ACCESS: 'access',
+    BLOCKING_MODE: 'blockingMode',
+    ENCRYPTION: 'encryption',
+    FILTER_CONFIG: 'filterConfig',
+    LOG_CONFIG: 'logConfig',
+    SERVICES: 'services',
+    STATS_CONFIG: 'statsConfig',
+    INSTALL: 'install',
+    LOGIN: 'login',
+};

client/src/install/Setup/Auth.js

@@ -7,6 +7,7 @@ import flow from 'lodash/flow';
 import i18n from '../../i18n';
 import Controls from './Controls';
 import { renderInputField } from '../../helpers/form';
+import { FORM_NAME } from '../../helpers/constants';
 
 const required = (value) => {
     if (value || value === 0) {
@@ -100,7 +101,7 @@ Auth.propTypes = {
 export default flow([
     withTranslation(),
     reduxForm({
-        form: 'install',
+        form: FORM_NAME.INSTALL,
         destroyOnUnmount: false,
         forceUnregisterOnUnmount: true,
         validate,

client/src/install/Setup/Devices.js

@@ -8,6 +8,7 @@ import flow from 'lodash/flow';
 import Guide from '../../components/ui/Guide';
 import Controls from './Controls';
 import AddressList from './AddressList';
+import { FORM_NAME } from '../../helpers/constants';
 
 let Devices = (props) => (
     <div className="setup__step">
@@ -56,7 +57,7 @@ Devices = connect((state) => {
 export default flow([
     withTranslation(),
     reduxForm({
-        form: 'install',
+        form: FORM_NAME.INSTALL,
         destroyOnUnmount: false,
         forceUnregisterOnUnmount: true,
     }),

client/src/install/Setup/Settings.js

@@ -9,7 +9,7 @@ import Controls from './Controls';
 import AddressList from './AddressList';
 
 import { getInterfaceIp } from '../../helpers/helpers';
-import { ALL_INTERFACES_IP } from '../../helpers/constants';
+import { ALL_INTERFACES_IP, FORM_NAME } from '../../helpers/constants';
 import {
     renderInputField, required, validInstallPort, toNumber,
 } from '../../helpers/form';
@@ -373,7 +373,7 @@ Settings.propTypes = {
     t: PropTypes.func.isRequired,
 };
 
-const selector = formValueSelector('install');
+const selector = formValueSelector(FORM_NAME.INSTALL);
 
 const SettingsForm = connect((state) => {
     const webIp = selector(state, 'web.ip');
@@ -392,7 +392,7 @@ const SettingsForm = connect((state) => {
 export default flow([
     withTranslation(),
     reduxForm({
-        form: 'install',
+        form: FORM_NAME.INSTALL,
         destroyOnUnmount: false,
         forceUnregisterOnUnmount: true,
     }),

client/src/install/Setup/Submit.js

@@ -6,6 +6,7 @@ import { Trans, withTranslation } from 'react-i18next';
 import flow from 'lodash/flow';
 
 import Controls from './Controls';
+import { FORM_NAME } from '../../helpers/constants';
 
 let Submit = (props) => (
     <div className="setup__step">
@@ -50,7 +51,7 @@ Submit = connect((state) => {
 export default flow([
     withTranslation(),
     reduxForm({
-        form: 'install',
+        form: FORM_NAME.INSTALL,
         destroyOnUnmount: false,
         forceUnregisterOnUnmount: true,
     }),

client/src/login/Login/Form.js

@@ -5,6 +5,7 @@ import { Trans, withTranslation } from 'react-i18next';
 import flow from 'lodash/flow';
 
 import { renderInputField, required } from '../../helpers/form';
+import { FORM_NAME } from '../../helpers/constants';
 
 const Form = (props) => {
     const {
@@ -70,7 +71,5 @@ Form.propTypes = {
 
 export default flow([
     withTranslation(),
-    reduxForm({
+    reduxForm({ form: FORM_NAME.LOGIN }),
-        form: 'loginForm',
-    }),
 ])(Form);