From e5c73877c84828fff179b8921c9c6d9f8273954e Mon Sep 17 00:00:00 2001
From: Ildar Kamalov <ik@adguard.com>
Date: Fri, 27 Aug 2021 16:08:29 +0300
Subject: [PATCH] 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 | 1 +
.../components/Settings/StatsConfig/Form.js | 60 +++++++++++++------
.../components/Settings/StatsConfig/index.js | 12 ++--
client/src/helpers/constants.js | 3 +-
4 files changed, 54 insertions(+), 22 deletions(-)
diff --git a/client/src/__locales/en.json b/client/src/__locales/en.json
index 050bb69b..2df2d93b 100644
--- a/client/src/__locales/en.json
+++ b/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",
diff --git a/client/src/components/Settings/StatsConfig/Form.js b/client/src/components/Settings/StatsConfig/Form.js
index 60a5ae86..cf8da0ac 100644
--- a/client/src/components/Settings/StatsConfig/Form.js
+++ b/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">
diff --git a/client/src/components/Settings/StatsConfig/index.js b/client/src/components/Settings/StatsConfig/index.js
index c413d2a7..06f0179a 100644
--- a/client/src/components/Settings/StatsConfig/index.js
+++ b/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}
diff --git a/client/src/helpers/constants.js b/client/src/helpers/constants.js
index 0e9682f7..799b6d01 100644
--- a/client/src/helpers/constants.js
+++ b/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];