+ client: Display upstreams list loaded from a file

Squashed commit of the following:

commit b5abc9115806f345c8d0dd5ea00b8552d27813f9
Merge: 92708411 c1c8abdd
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Mon Sep 7 14:38:06 2020 +0300

    Merge branch '1680-upstreams-file' into feature/1680

commit 92708411f07638c037e049ee8012d15bdeda77e4
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Fri Sep 4 13:54:24 2020 +0300

    + client: Display upstreams list loaded from a file
This commit is contained in:
Artem Baskal 2020-09-08 14:06:19 +03:00
parent c1c8abdd0f
commit b04e12e189
5 changed files with 74 additions and 48 deletions

View File

@ -574,5 +574,7 @@
"original_response": "Original response", "original_response": "Original response",
"click_to_view_queries": "Click to view queries", "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." "adg_will_drop_dns_queries": "AdGuard Home will be dropping all DNS queries from this client.",
"configured_in": "Configured in {{path}}",
"please_read_wiki": "Please read the wiki"
} }

View File

@ -5,51 +5,61 @@ import { Field, reduxForm } from 'redux-form';
import { Trans, useTranslation } from 'react-i18next'; import { Trans, useTranslation } from 'react-i18next';
import classnames from 'classnames'; import classnames from 'classnames';
import i18next from 'i18next';
import Examples from './Examples'; import Examples from './Examples';
import { renderRadioField, renderTextareaField } from '../../../../helpers/form'; import { renderRadioField, renderTextareaField } from '../../../../helpers/form';
import { DNS_REQUEST_OPTIONS, FORM_NAME } from '../../../../helpers/constants'; import { DNS_REQUEST_OPTIONS, FORM_NAME, UPSTREAM_CONFIGURATION_WIKI_LINK } from '../../../../helpers/constants';
import { testUpstream } from '../../../../actions'; import { testUpstream } from '../../../../actions';
import { removeEmptyLines } from '../../../../helpers/helpers'; import { removeEmptyLines } from '../../../../helpers/helpers';
const getInputFields = () => [{ const Title = () => <label className="form__label" htmlFor="upstream_dns">
// eslint-disable-next-line react/display-name {i18next.t('upstream_dns')}
getTitle: () => <label className="form__label" htmlFor="upstream_dns"> <div>
<Trans>upstream_dns</Trans> <a href={UPSTREAM_CONFIGURATION_WIKI_LINK} target="_blank"
</label>, rel="noopener noreferrer">{i18next.t('please_read_wiki')}</a>
name: 'upstream_dns', </div>
type: 'text', </label>;
component: renderTextareaField,
className: 'form-control form-control--textarea font-monospace', const getInputFields = (upstream_dns_file) => [
placeholder: 'upstream_dns', {
normalizeOnBlur: removeEmptyLines, getTitle: Title,
}, name: 'upstream_dns',
{ type: 'text',
name: 'upstream_mode', value: 'test',
type: 'radio', component: renderTextareaField,
value: DNS_REQUEST_OPTIONS.LOAD_BALANCING, className: 'form-control form-control--textarea font-monospace',
component: renderRadioField, placeholder: 'upstream_dns',
subtitle: 'load_balancing_desc', normalizeOnBlur: removeEmptyLines,
placeholder: 'load_balancing', disabled: !!upstream_dns_file,
}, },
{ {
name: 'upstream_mode', name: 'upstream_mode',
type: 'radio', type: 'radio',
value: DNS_REQUEST_OPTIONS.PARALLEL, value: DNS_REQUEST_OPTIONS.LOAD_BALANCING,
component: renderRadioField, component: renderRadioField,
subtitle: 'upstream_parallel', subtitle: 'load_balancing_desc',
placeholder: 'parallel_requests', placeholder: 'load_balancing',
}, },
{ {
name: 'upstream_mode', name: 'upstream_mode',
type: 'radio', type: 'radio',
value: DNS_REQUEST_OPTIONS.FASTEST_ADDR, value: DNS_REQUEST_OPTIONS.PARALLEL,
component: renderRadioField, component: renderRadioField,
subtitle: 'fastest_addr_desc', subtitle: 'upstream_parallel',
placeholder: 'fastest_addr', placeholder: 'parallel_requests',
}]; },
{
name: 'upstream_mode',
type: 'radio',
value: DNS_REQUEST_OPTIONS.FASTEST_ADDR,
component: renderRadioField,
subtitle: 'fastest_addr_desc',
placeholder: 'fastest_addr',
},
];
const Form = ({ const Form = ({
submitting, invalid, processingSetConfig, processingTestUpstream, handleSubmit, submitting, invalid, handleSubmit,
}) => { }) => {
const dispatch = useDispatch(); const dispatch = useDispatch();
const { t } = useTranslation(); const { t } = useTranslation();
@ -57,6 +67,9 @@ const Form = ({
const bootstrap_dns = useSelector( const bootstrap_dns = useSelector(
(store) => store.form[FORM_NAME.UPSTREAM].values.bootstrap_dns, (store) => store.form[FORM_NAME.UPSTREAM].values.bootstrap_dns,
); );
const upstream_dns_file = useSelector((state) => state.dnsConfig.upstream_dns_file);
const processingTestUpstream = useSelector((state) => state.settings.processingTestUpstream);
const processingSetConfig = useSelector((state) => state.dnsConfig.processingSetConfig);
const handleUpstreamTest = () => dispatch(testUpstream({ const handleUpstreamTest = () => dispatch(testUpstream({
upstream_dns, upstream_dns,
@ -67,7 +80,7 @@ const Form = ({
'btn-loading': processingTestUpstream, 'btn-loading': processingTestUpstream,
}); });
const INPUT_FIELDS = getInputFields(); const INPUT_FIELDS = getInputFields(upstream_dns_file);
return <form onSubmit={handleSubmit}> return <form onSubmit={handleSubmit}>
<div className="row"> <div className="row">
@ -146,8 +159,6 @@ Form.propTypes = {
initialValues: PropTypes.object, initialValues: PropTypes.object,
upstream_dns: PropTypes.string, upstream_dns: PropTypes.string,
bootstrap_dns: PropTypes.string, bootstrap_dns: PropTypes.string,
processingTestUpstream: PropTypes.bool,
processingSetConfig: PropTypes.bool,
}; };
export default reduxForm({ form: FORM_NAME.UPSTREAM })(Form); export default reduxForm({ form: FORM_NAME.UPSTREAM })(Form);

View File

@ -12,15 +12,28 @@ const Upstream = () => {
upstream_dns, upstream_dns,
bootstrap_dns, bootstrap_dns,
upstream_mode, upstream_mode,
processingSetConfig,
} = useSelector((state) => state.dnsConfig, shallowEqual); } = useSelector((state) => state.dnsConfig, shallowEqual);
const { processingTestUpstream } = useSelector((state) => state.settings, shallowEqual); const upstream_dns_file = useSelector((state) => state.dnsConfig.upstream_dns_file);
const handleSubmit = (values) => { const handleSubmit = (values) => {
dispatch(setDnsConfig(values)); const {
bootstrap_dns,
upstream_dns,
upstream_mode,
} = values;
const dnsConfig = {
bootstrap_dns,
upstream_mode,
...(upstream_dns_file ? null : { upstream_dns }),
};
dispatch(setDnsConfig(dnsConfig));
}; };
const upstreamDns = upstream_dns_file ? t('configured_in', { path: upstream_dns_file }) : upstream_dns;
return <Card return <Card
title={t('upstream_dns')} title={t('upstream_dns')}
subtitle={t('upstream_dns_hint')} subtitle={t('upstream_dns_hint')}
@ -30,13 +43,11 @@ const Upstream = () => {
<div className="col"> <div className="col">
<Form <Form
initialValues={{ initialValues={{
upstream_dns, upstream_dns: upstreamDns,
bootstrap_dns, bootstrap_dns,
upstream_mode, upstream_mode,
}} }}
onSubmit={handleSubmit} onSubmit={handleSubmit}
processingTestUpstream={processingTestUpstream}
processingSetConfig={processingSetConfig}
/> />
</div> </div>
</div> </div>

View File

@ -52,6 +52,7 @@ export const REPOSITORY = {
export const PRIVACY_POLICY_LINK = 'https://adguard.com/privacy/home.html'; 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 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 ADDRESS_IN_USE_TEXT = 'address already in use'; export const ADDRESS_IN_USE_TEXT = 'address already in use';

View File

@ -48,6 +48,7 @@ const dnsConfig = handleActions(
edns_cs_enabled: false, edns_cs_enabled: false,
disable_ipv6: false, disable_ipv6: false,
dnssec_enabled: false, dnssec_enabled: false,
upstream_dns_file: '',
}, },
); );