- 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
This commit is contained in:
Artem Baskal
2020-06-10 19:04:19 +03:00
parent a869ec4cbb
commit a79dda5566
25 changed files with 293 additions and 320 deletions

View File

@@ -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 { Trans, withTranslation } from 'react-i18next';
import flow from 'lodash/flow';
import { Field, reduxForm } from 'redux-form';
import { Trans, useTranslation } from 'react-i18next';
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 {
t,
handleSubmit,
testUpstream,
submitting,
invalid,
processingSetConfig,
processingTestUpstream,
const Form = ({
submitting, invalid, processingSetConfig, processingTestUpstream, handleSubmit,
}) => {
const dispatch = useDispatch();
const [t] = useTranslation();
const upstream_dns = useSelector((store) => store.form[FORM_NAME.UPSTREAM].values.upstream_dns);
const bootstrap_dns = useSelector((store) => store.form[FORM_NAME.UPSTREAM]
.values.bootstrap_dns);
const handleUpstreamTest = () => dispatch(testUpstream({
upstream_dns,
bootstrap_dns,
} = props;
}));
const testButtonClass = classnames({
'btn btn-primary btn-standard mr-2': true,
'btn btn-primary btn-standard mr-2 btn-loading': processingTestUpstream,
const testButtonClass = classnames('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({
upstream_dns,
bootstrap_dns,
})
}
onClick={handleUpstreamTest}
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');
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);
export default reduxForm({ form: FORM_NAME.UPSTREAM })(Form);

View File

@@ -1,83 +1,56 @@
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 { 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 {
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 = (values) => {
dispatch(setDnsConfig(values));
};
const formattedValues = {
bootstrap_dns,
const {
processingTestUpstream,
dnsConfig: {
upstream_dns,
[dnsRequestOption]: true,
[disabledOption]: false,
};
bootstrap_dns,
processingSetConfig,
upstream_mode,
},
} = props;
this.props.setDnsConfig(formattedValues);
};
handleTest = (values) => {
this.props.testUpstream(values);
};
render() {
const {
t,
processingTestUpstream,
dnsConfig: {
upstream_dns,
bootstrap_dns,
fastest_addr,
parallel_requests,
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>
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,
upstream_mode,
}}
onSubmit={handleSubmit}
processingTestUpstream={processingTestUpstream}
processingSetConfig={processingSetConfig}
/>
</div>
</Card>
);
}
}
Upstream.propTypes = {
testUpstream: PropTypes.func.isRequired,
processingTestUpstream: PropTypes.bool.isRequired,
t: PropTypes.func.isRequired,
dnsConfig: PropTypes.object.isRequired,
setDnsConfig: PropTypes.func.isRequired,
</div>
</Card>
);
};
export default withTranslation()(Upstream);
Upstream.propTypes = {
processingTestUpstream: PropTypes.bool.isRequired,
dnsConfig: PropTypes.object.isRequired,
};
export default Upstream;