mirror of
https://github.com/AdguardTeam/AdGuardHome.git
synced 2024-09-11 10:45:42 +03:00
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:
parent
77821ec816
commit
e5c73877c8
@ -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",
|
||||
|
@ -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">
|
||||
|
@ -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}
|
||||
|
@ -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];
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user