client: handle optimistic cache

AdguardTeam · Jul 14, 2021 · 98bd3b8 · 98bd3b8
1 parent 0b469b7
commit 98bd3b8
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 17 deletions.
diff --git a/client/src/__locales/en.json b/client/src/__locales/en.json
@@ -595,6 +595,8 @@
     "cache_ttl_min_override_desc": "Extend short time-to-live values (seconds) received from the upstream server when caching DNS responses",
     "cache_ttl_max_override_desc": "Set a maximum time-to-live value (seconds) for entries in the DNS cache",
     "ttl_cache_validation": "Minimum cache TTL value must be less than or equal to the maximum value",
+    "cache_optimistic": "Optimistic",
+    "cache_optimistic_desc": "Make AdGuard Home respond from the cache even when the entries are expired and also try to refresh them.",
     "filter_category_general": "General",
     "filter_category_security": "Security",
     "filter_category_regional": "Regional",

diff --git a/client/src/components/Settings/Dns/Cache/Form.js b/client/src/components/Settings/Dns/Cache/Form.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Field, reduxForm } from 'redux-form';
 import { Trans, useTranslation } from 'react-i18next';
 import { shallowEqual, useSelector } from 'react-redux';
-import { renderInputField, toNumber } from '../../../../helpers/form';
+import { renderInputField, toNumber, CheckboxField } from '../../../../helpers/form';
 import { CACHE_CONFIG_FIELDS, FORM_NAME, UINT32_RANGE } from '../../../../helpers/constants';
 import { replaceZeroWithEmptyString } from '../../../../helpers/helpers';
 
@@ -47,27 +47,48 @@ const Form = ({
             }) => <div className="col-12" key={name}>
                     <div className="col-12 col-md-7 p-0">
                         <div className="form__group form__group--settings">
-                            <label htmlFor={name}
-                                   className="form__label form__label--with-desc">{t(title)}</label>
+                            <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}
-                                    className="form-control"
-                                    validate={validate}
-                                    normalizeOnBlur={replaceZeroWithEmptyString}
-                                    normalize={toNumber}
-                                    min={min}
-                                    max={max}
+                                name={name}
+                                type="number"
+                                component={renderInputField}
+                                placeholder={t(placeholder)}
+                                disabled={processingSetConfig}
+                                className="form-control"
+                                validate={validate}
+                                normalizeOnBlur={replaceZeroWithEmptyString}
+                                normalize={toNumber}
+                                min={min}
+                                max={max}
                             />
                         </div>
                     </div>
                 </div>)}
-            {minExceedsMax
-            && <span className="text-danger pl-3 pb-3">{t('ttl_cache_validation')}</span>}
+            {minExceedsMax && (
+                <span className="text-danger pl-3 pb-3">
+                    {t('ttl_cache_validation')}
+                </span>
+            )}
+        </div>
+        <div className="row">
+            <div className="col-12 col-md-7">
+                <div className="form__group form__group--settings">
+                    <Field
+                        name="cache_optimistic"
+                        type="checkbox"
+                        component={CheckboxField}
+                        placeholder={t('cache_optimistic')}
+                        disabled={processingSetConfig}
+                        subtitle={t('cache_optimistic_desc')}
+                    />
+                </div>
+            </div>
         </div>
         <button
             type="submit"

diff --git a/client/src/components/Settings/Dns/Cache/index.js b/client/src/components/Settings/Dns/Cache/index.js
@@ -10,7 +10,7 @@ const CacheConfig = () => {
     const { t } = useTranslation();
     const dispatch = useDispatch();
     const {
-        cache_size, cache_ttl_max, cache_ttl_min,
+        cache_size, cache_ttl_max, cache_ttl_min, cache_optimistic,
     } = useSelector((state) => state.dnsConfig, shallowEqual);
 
     const handleFormSubmit = (values) => {
@@ -31,6 +31,7 @@ const CacheConfig = () => {
                         cache_size: replaceZeroWithEmptyString(cache_size),
                         cache_ttl_max: replaceZeroWithEmptyString(cache_ttl_max),
                         cache_ttl_min: replaceZeroWithEmptyString(cache_ttl_min),
+                        cache_optimistic,
                     }}
                     onSubmit={handleFormSubmit}
                 />