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
This commit is contained in:
Ildar Kamalov 2021-08-27 16:08:29 +03:00
parent 77821ec816
commit e5c73877c8
4 changed files with 54 additions and 22 deletions

View File

@ -503,6 +503,7 @@
"statistics_clear_confirm": "Are you sure you want to clear statistics?", "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_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_cleared": "Statistics successfully cleared",
"statistics_enable": "Enable statistics",
"interval_hours": "{{count}} hour", "interval_hours": "{{count}} hour",
"interval_hours_plural": "{{count}} hours", "interval_hours_plural": "{{count}} hours",
"filters_configuration": "Filters configuration", "filters_configuration": "Filters configuration",

View File

@ -4,14 +4,12 @@ import { Field, reduxForm } from 'redux-form';
import { Trans, withTranslation } from 'react-i18next'; import { Trans, withTranslation } from 'react-i18next';
import flow from 'lodash/flow'; import flow from 'lodash/flow';
import { renderRadioField, toNumber } from '../../../helpers/form'; import { renderRadioField, toNumber, CheckboxField } from '../../../helpers/form';
import { FORM_NAME, STATS_INTERVALS_DAYS } from '../../../helpers/constants'; import { FORM_NAME, STATS_INTERVALS_DAYS, DISABLED_STATS_INTERVAL } from '../../../helpers/constants';
import '../FormButton.css'; import '../FormButton.css';
const getIntervalTitle = (interval, t) => { const getIntervalTitle = (interval, t) => {
switch (interval) { switch (interval) {
case 0:
return t('disabled');
case 1: case 1:
return t('interval_24_hour'); return t('interval_24_hour');
default: 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 Form = (props) => {
const { const {
handleSubmit, processing, submitting, invalid, handleReset, processingReset, t, handleSubmit,
change,
processing,
submitting,
invalid,
handleReset,
processingReset,
t,
} = props; } = props;
return ( return (
<form onSubmit={handleSubmit}> <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"> <label className="form__label form__label--with-desc">
<Trans>statistics_retention</Trans> <Trans>statistics_retention</Trans>
</label> </label>
@ -45,7 +55,23 @@ const Form = (props) => {
</div> </div>
<div className="form__group form__group--settings mt-2"> <div className="form__group form__group--settings mt-2">
<div className="custom-controls-stacked"> <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> </div>
<div className="mt-5"> <div className="mt-5">

View File

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

View File

@ -355,7 +355,8 @@ export const ENCRYPTION_SOURCE = {
export const FILTERED = 'Filtered'; export const FILTERED = 'Filtered';
export const NOT_FILTERED = 'NotFiltered'; 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]; export const QUERY_LOG_INTERVALS_DAYS = [0.25, 1, 7, 30, 90];