client: add form fields

client/src/__locales/en.json

@@ -734,5 +734,7 @@
     "wednesday_short": "Wed",
     "thursday_short": "Thu",
     "friday_short": "Fri",
-    "saturday_short": "Sat"
+    "saturday_short": "Sat",
+    "upstream_dns_cache_configuration": "Upstream DNS cache configuration",
+    "enable_upstream_dns_cache": "Enable upstream DNS cache"
 }

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

@@ -79,6 +79,10 @@ const ClientsTable = ({
             } else {
                 config.tags = [];
             }
+
+            if (typeof values.upstreams_cache_size === 'string') {
+                config.upstreams_cache_size = 0;
+            }
         }
 
         if (modalType === MODAL_TYPE.EDIT_FILTERS) {

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

@@ -12,8 +12,13 @@ import i18n from '../../../i18n';
 import Tabs from '../../ui/Tabs';
 import Examples from '../Dns/Upstream/Examples';
 import { ScheduleForm } from '../../Filters/Services/ScheduleForm';
-import { toggleAllServices, trimLinesAndRemoveEmpty, captitalizeWords } from '../../../helpers/helpers';
 import {
+    toggleAllServices,
+    trimLinesAndRemoveEmpty,
+    captitalizeWords,
+} from '../../../helpers/helpers';
+import {
+    toNumber,
     renderInputField,
     renderGroupField,
     CheckboxField,
@@ -21,7 +26,7 @@ import {
     renderTextareaField,
 } from '../../../helpers/form';
 import { validateClientId, validateRequiredValue } from '../../../helpers/validators';
-import { CLIENT_ID_LINK, FORM_NAME } from '../../../helpers/constants';
+import { CLIENT_ID_LINK, FORM_NAME, UINT32_RANGE } from '../../../helpers/constants';
 import './Service.css';
 
 const settingsCheckboxes = [
@@ -217,6 +222,35 @@ let Form = (props) => {
                         />
                     </div>
                 ))}
+                <div className="form__label--bold form__label--top form__label--bot">
+                    {t('upstream_dns_cache_configuration')}
+                </div>
+                <div className="form__group mb-2">
+                    <Field
+                        name="upstreams_cache_enabled"
+                        type="checkbox"
+                        component={CheckboxField}
+                        placeholder={t('enable_upstream_dns_cache')}
+                    />
+                </div>
+                <div className="form__group form__group--settings">
+                    <label
+                        htmlFor="upstreams_cache_size"
+                        className="form__label"
+                    >
+                        {t('cache_size')}
+                    </label>
+                    <Field
+                        name="upstreams_cache_size"
+                        type="number"
+                        component={renderInputField}
+                        placeholder={t('enter_cache_size')}
+                        className="form-control"
+                        normalize={toNumber}
+                        min={0}
+                        max={UINT32_RANGE.MAX}
+                    />
+                </div>
             </div>,
         },
         block_services: {