mirrors
/
AdGuardHome
mirror of https://github.com/AdguardTeam/AdGuardHome.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add DNS cache setting UI

This commit is contained in:
ArtemBaskal 2020-07-03 16:53:53 +03:00
parent a5c0381c46
commit 2d5287fcf3
7 changed files with 187 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
client/src/__locales/en.json
View File

@ -206,6 +206,8 @@
"anonymize_client_ip": "Anonymize client IP",
"anonymize_client_ip_desc": "Don't save the full IP address of the client in logs and statistics",
"dns_config": "DNS server configuration",
"dns_cache_config": "DNS cache configuration",
"dns_cache_config_desc": "Here you can configure DNS cache",
"blocking_mode": "Blocking mode",
"default": "Default",
"nxdomain": "NXDOMAIN",
@ -491,5 +493,16 @@
"list_updated": "{{count}} list updated",
"list_updated_plural": "{{count}} lists updated",
"dnssec_enable": "Enable DNSSEC",
"dnssec_enable_desc": "Set DNSSEC flag in the outcoming DNS queries and check the result (DNSSEC-enabled resolver is required)"
"dnssec_enable_desc": "Set DNSSEC flag in the outcoming DNS queries and check the result (DNSSEC-enabled resolver is required)",
"cache_size": "Cache size",
"cache_size_desc": "DNS cache size (in bytes)",
"cache_ttl_min_override": "Override minimum TTL",
"cache_ttl_max_override": "Override maximum TTL",
"enter_cache_size": "Enter cache size",
"enter_cache_ttl_min_override": "Enter minimum TTL",
"enter_cache_ttl_max_override": "Enter maximum TTL",
"cache_ttl_min_override_desc": "Override TTL value (minimum) received from upstream server. This value can't larger than 3600 (1 hour)",
"cache_ttl_max_override_desc": "Override TTL value (maximum) received from upstream server",
"min_exceeds_max_value": "Minimum value exceeds maximum value",
"value_not_larger_than": "Value can't be larger than {{maximum}}"
}

100
client/src/components/Settings/Dns/Cache/Form.js Normal file
View File

@ -0,0 +1,100 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Field, reduxForm } from 'redux-form';
import { Trans, useTranslation } from 'react-i18next';
import { shallowEqual, useSelector } from 'react-redux';
import {
biggerOrEqualZero,
maxValue,
renderInputField,
required,
toNumber,
} from '../../../../helpers/form';
import { FORM_NAME } from '../../../../helpers/constants';
const maxValue3600 = maxValue(3600);
const getInputFields = ({ required, maxValue3600 }) => [{
name: 'cache_size',
title: 'cache_size',
description: 'cache_size_desc',
placeholder: 'enter_cache_size',
validate: required,
},
{
name: 'cache_ttl_min',
title: 'cache_ttl_min_override',
description: 'cache_ttl_min_override_desc',
placeholder: 'enter_cache_ttl_min_override',
max: 3600,
validate: maxValue3600,
},
{
name: 'cache_ttl_max',
title: 'cache_ttl_max_override',
description: 'cache_ttl_max_override_desc',
placeholder: 'enter_cache_ttl_max_override',
}];
const Form = ({
handleSubmit, submitting, invalid,
}) => {
const { t } = useTranslation();
const { processingSetConfig } = useSelector((state) => state.dnsConfig, shallowEqual);
const {
cache_ttl_max, cache_ttl_min,
} = useSelector((state) => state.form[FORM_NAME.CACHE].values, shallowEqual);
const minExceedsMax = cache_ttl_min > cache_ttl_max;
const INPUTS_FIELDS = getInputFields({
required,
maxValue3600,
});
return <form onSubmit={handleSubmit}>
<div className="row">
{INPUTS_FIELDS.map(({
name, title, description, placeholder, validate, max,
}) => <div className="col-12" key={name}>
<div className="col-7 p-0">
<div className="form__group form__group--settings">
<label htmlFor={name}
className="form__label form__label--with-desc">{t(title)}</label>
<div className="form__desc form__desc--top">{t(description)}</div>
<Field
name={name}
type="number"
component={renderInputField}
placeholder={t(placeholder)}
disabled={processingSetConfig}
normalize={toNumber}
className="form-control"
validate={[biggerOrEqualZero].concat(validate || [])}
min={0}
max={max}
/>
</div>
</div>
</div>)}
{minExceedsMax
&& <span className="text-danger pl-3 pb-3">{t('min_exceeds_max_value')}</span>}
</div>
<button
type="submit"
className="btn btn-success btn-standard btn-large"
disabled={submitting || invalid || processingSetConfig || minExceedsMax}
>
<Trans>save_btn</Trans>
</button>
</form>;
};
Form.propTypes = {
handleSubmit: PropTypes.func.isRequired,
submitting: PropTypes.bool.isRequired,
invalid: PropTypes.bool.isRequired,
};
export default reduxForm({ form: FORM_NAME.CACHE })(Form);

42
client/src/components/Settings/Dns/Cache/index.js Normal file
View File

@ -0,0 +1,42 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
import Card from '../../../ui/Card';
import Form from './Form';
import { setDnsConfig } from '../../../../actions/dnsConfig';
import { selectCompletedFields } from '../../../../helpers/helpers';
const CacheConfig = () => {
const { t } = useTranslation();
const dispatch = useDispatch();
const {
cache_size, cache_ttl_max, cache_ttl_min,
} = useSelector((state) => state.dnsConfig, shallowEqual);
const handleFormSubmit = (values) => {
const completedFields = selectCompletedFields(values);
dispatch(setDnsConfig(completedFields));
};
return (
<Card
title={t('dns_cache_config')}
subtitle={t('dns_cache_config_desc')}
bodyType="card-body box-body--settings"
id="dns-config"
>
<div className="form">
<Form
initialValues={{
cache_size,
cache_ttl_max,
cache_ttl_min,
}}
onSubmit={handleFormSubmit}
/>
</div>
</Card>
);
};
export default CacheConfig;

7
client/src/components/Settings/Dns/index.js
View File

@ -7,9 +7,10 @@ import Access from './Access';
import Config from './Config';
import PageTitle from '../../ui/PageTitle';
import Loading from '../../ui/Loading';
import CacheConfig from './Cache';
const Dns = (props) => {
const [t] = useTranslation();
const { t } = useTranslation();
useEffect(() => {
props.getAccessList();
@ -40,6 +41,10 @@ const Dns = (props) => {
dnsConfig={dnsConfig}
setDnsConfig={setDnsConfig}
/>
<CacheConfig
dnsConfig={dnsConfig}
setDnsConfig={setDnsConfig}
/>
<Access access={access} setAccessList={setAccessList} />
</>}
</>

1
client/src/helpers/constants.js
View File

@ -406,4 +406,5 @@ export const FORM_NAME = {
STATS_CONFIG: 'statsConfig',
INSTALL: 'install',
LOGIN: 'login',
CACHE: 'cache',
};

15
client/src/helpers/form.js
View File

@ -1,6 +1,7 @@
import React, { Fragment } from 'react';
import { Trans } from 'react-i18next';
import PropTypes from 'prop-types';
import i18next from 'i18next';
import {
R_IPV4, R_MAC, R_HOST, R_IPV6, R_CIDR, R_CIDR_IPV6,
UNSAFE_PORTS, R_URL_REQUIRES_PROTOCOL, R_WIN_ABSOLUTE_PATH, R_UNIX_ABSOLUTE_PATH,
@ -10,7 +11,7 @@ import { createOnBlurHandler } from './helpers';
export const renderField = (props, elementType) => {
const {
input, id, className, placeholder, type, disabled, normalizeOnBlur,
autoComplete, meta: { touched, error },
autoComplete, meta: { touched, error }, min, max, step,
} = props;
const onBlur = (event) => createOnBlurHandler(event, input, normalizeOnBlur);
@ -23,14 +24,17 @@ export const renderField = (props, elementType) => {
autoComplete,
disabled,
type,
min,
max,
step,
onBlur,
});
return (
<Fragment>
<>
{element}
{!disabled && touched && error
&& <span className="form__message form__message--error">{error}</span>}
</Fragment>
</>
);
};
@ -43,6 +47,9 @@ renderField.propTypes = {
disabled: PropTypes.bool,
autoComplete: PropTypes.bool,
normalizeOnBlur: PropTypes.func,
min: PropTypes.number,
max: PropTypes.number,
step: PropTypes.number,
meta: PropTypes.shape({
touched: PropTypes.bool,
error: PropTypes.object,
@ -238,6 +245,8 @@ export const required = (value) => {
return <Trans>form_error_required</Trans>;
};
export const maxValue = (maximum) => (value) => (value && value > maximum ? i18next.t('value_not_larger_than', { maximum }) : undefined);
export const ipv4 = (value) => {
if (value && !R_IPV4.test(value)) {
return <Trans>form_error_ip4_format</Trans>;

12
client/src/helpers/helpers.js
View File

@ -562,3 +562,15 @@ export const getIpMatchListStatus = (ip, list) => {
return IP_MATCH_LIST_STATUS.NOT_FOUND;
}
};
/**
* @param values {object}
* @returns {object}
*/
export const selectCompletedFields = (values) => Object.entries(values)
.reduce((acc, [key, value]) => {
if (value || value === 0) {
acc[key] = value;
}
return acc;
}, {});