Pull request: 3403 use checkbox to disable statistics

Closes #3403

Squashed commit of the following:

commit 25eaa0a70cb5ac7de51c456d2f611522f334846c
Author: Ildar Kamalov <ik@adguard.com>
Date:   Fri Aug 27 15:42:29 2021 +0300

    fix enabling stats

commit 1e2897651a84cf32ae01a79b8a61aeb5aa9f6405
Author: Ildar Kamalov <ik@adguard.com>
Date:   Mon Aug 16 18:46:21 2021 +0300

    client: use checkbox to disable statistics

client/src/__locales/en.json

@@ -503,6 +503,7 @@
     "statistics_clear_confirm": "Are you sure you want to clear statistics?",
     "statistics_retention_confirm": "Are you sure you want to change statistics retention? If you decrease the interval value, some data will be lost",
     "statistics_cleared": "Statistics successfully cleared",
+    "statistics_enable": "Enable statistics",
     "interval_hours": "{{count}} hour",
     "interval_hours_plural": "{{count}} hours",
     "filters_configuration": "Filters configuration",

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

@@ -4,14 +4,12 @@ import { Field, reduxForm } from 'redux-form';
 import { Trans, withTranslation } from 'react-i18next';
 import flow from 'lodash/flow';
 
-import { renderRadioField, toNumber } from '../../../helpers/form';
-import { FORM_NAME, STATS_INTERVALS_DAYS } from '../../../helpers/constants';
+import { renderRadioField, toNumber, CheckboxField } from '../../../helpers/form';
+import { FORM_NAME, STATS_INTERVALS_DAYS, DISABLED_STATS_INTERVAL } from '../../../helpers/constants';
 import '../FormButton.css';
 
 const getIntervalTitle = (interval, t) => {
     switch (interval) {
-        case 0:
-            return t('disabled');
         case 1:
             return t('interval_24_hour');
         default:
@@ -19,24 +17,36 @@ const getIntervalTitle = (interval, t) => {
     }
 };
 
-const getIntervalFields = (processing, t, toNumber) => STATS_INTERVALS_DAYS.map((interval) => <Field
-    key={interval}
-    name="interval"
-    type="radio"
-    component={renderRadioField}
-    value={interval}
-    placeholder={getIntervalTitle(interval, t)}
-    normalize={toNumber}
-    disabled={processing}
-/>);
-
 const Form = (props) => {
     const {
-        handleSubmit, processing, submitting, invalid, handleReset, processingReset, t,
+        handleSubmit,
+        change,
+        processing,
+        submitting,
+        invalid,
+        handleReset,
+        processingReset,
+        t,
     } = props;
 
     return (
         <form onSubmit={handleSubmit}>
+            <div className="form__group form__group--settings">
+                <Field
+                    name="enabled"
+                    type="checkbox"
+                    component={CheckboxField}
+                    placeholder={t('statistics_enable')}
+                    disabled={processing}
+                    onChange={(event) => {
+                        if (event.target.checked) {
+                            change('interval', STATS_INTERVALS_DAYS[0]);
+                        } else {
+                            change('interval', DISABLED_STATS_INTERVAL);
+                        }
+                    }}
+                />
+            </div>
             <label className="form__label form__label--with-desc">
                 <Trans>statistics_retention</Trans>
             </label>
@@ -45,7 +55,23 @@ const Form = (props) => {
             </div>
             <div className="form__group form__group--settings mt-2">
                 <div className="custom-controls-stacked">
-                    {getIntervalFields(processing, t, toNumber)}
+                    {STATS_INTERVALS_DAYS.map((interval) => (
+                        <Field
+                            key={interval}
+                            name="interval"
+                            type="radio"
+                            component={renderRadioField}
+                            value={interval}
+                            placeholder={getIntervalTitle(interval, t)}
+                            normalize={toNumber}
+                            disabled={processing}
+                            onChange={(event) => {
+                                if (event.target.checked) {
+                                    change('enabled', true);
+                                }
+                            }}
+                        />
+                    ))}
                 </div>
             </div>
             <div className="mt-5">

client/src/components/Settings/StatsConfig/index.js

@@ -8,13 +8,14 @@ import Form from './Form';
 class StatsConfig extends Component {
     handleFormSubmit = (values) => {
         const { t, interval: prevInterval } = this.props;
+        const config = { interval: values.interval };
 
-        if (values.interval < prevInterval) {
+        if (config.interval < prevInterval) {
             if (window.confirm(t('statistics_retention_confirm'))) {
-                this.props.setStatsConfig(values);
+                this.props.setStatsConfig(config);
             }
         } else {
-            this.props.setStatsConfig(values);
+            this.props.setStatsConfig(config);
         }
     };
 
@@ -39,7 +40,10 @@ class StatsConfig extends Component {
             >
                 <div className="form">
                     <Form
-                        initialValues={{ interval }}
+                        initialValues={{
+                            interval,
+                            enabled: !!interval,
+                        }}
                         onSubmit={this.handleFormSubmit}
                         processing={processing}
                         processingReset={processingReset}

client/src/helpers/constants.js

@@ -355,7 +355,8 @@ export const ENCRYPTION_SOURCE = {
 export const FILTERED = 'Filtered';
 export const NOT_FILTERED = 'NotFiltered';
 
-export const STATS_INTERVALS_DAYS = [0, 1, 7, 30, 90];
+export const DISABLED_STATS_INTERVAL = 0;
+export const STATS_INTERVALS_DAYS = [1, 7, 30, 90];
 
 export const QUERY_LOG_INTERVALS_DAYS = [0.25, 1, 7, 30, 90];