daxi20/AdGuardHome
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

stats config form

Browse Source
This commit is contained in:
Ildar Kamalov
2025-01-14 15:17:00 +03:00
parent d0dc0c600d
commit 8b40fe97a6
5 changed files with 181 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
client/src/components/Settings/LogsConfig/Form.tsx
View File

@@ -10,6 +10,7 @@ import {
DAY,
RETENTION_CUSTOM,
RETENTION_RANGE,
CUSTOM_INTERVAL,
} from '../../../helpers/constants';
import '../FormButton.css';
@@ -26,7 +27,7 @@ const getIntervalTitle = (interval: number) => {
}
};
type FormValues = {
export type FormValues = {
enabled: boolean;
anonymize_client_ip: boolean;
interval: number;
@@ -36,18 +37,18 @@ type FormValues = {
type Props = {
initialValues: Partial<FormValues>;
onSubmit: (values: FormValues) => void;
handleClear: () => void;
processing: boolean;
processingClear: boolean;
processingReset: boolean;
onSubmit: (values: FormValues) => void;
onReset: () => void;
}
export const LogsConfigForm = ({
export const Form = ({
initialValues,
onSubmit,
processing,
processingClear,
handleClear,
processingReset,
onSubmit,
onReset,
}: Props) => {
const {
register,
@@ -62,7 +63,7 @@ export const LogsConfigForm = ({
anonymize_client_ip: initialValues.anonymize_client_ip || false,
interval: initialValues.interval || DAY,
customInterval: initialValues.customInterval || null,
ignored: initialValues.ignored ?? '',
ignored: initialValues.ignored || '',
},
});
@@ -89,8 +90,6 @@ export const LogsConfigForm = ({
processing ||
(intervalValue === RETENTION_CUSTOM && !customIntervalValue);
console.log(intervalValue, RETENTION_CUSTOM, customIntervalValue);
return (
<form onSubmit={handleSubmit(onSubmitForm)}>
<div className="form__group form__group--settings">
@@ -132,9 +131,9 @@ export const LogsConfigForm = ({
</label>
</div>
<label className="form__label">
<div className="form__label">
<Trans>query_log_retention</Trans>
</label>
</div>
<div className="form__group form__group--settings">
<div className="custom-controls-stacked">
@@ -143,8 +142,8 @@ export const LogsConfigForm = ({
type="radio"
className="custom-control-input"
disabled={processing}
value={RETENTION_CUSTOM}
checked={!QUERY_LOG_INTERVALS_DAYS.includes(intervalValue)}
value={RETENTION_CUSTOM}
onChange={(e) => {
setValue('interval', parseInt(e.target.value, 10));
}}
@@ -160,6 +159,7 @@ export const LogsConfigForm = ({
<input
type="number"
className="form-control"
name={CUSTOM_INTERVAL}
min={RETENTION_RANGE.MIN}
max={RETENTION_RANGE.MAX}
disabled={processing}
@@ -220,8 +220,8 @@ export const LogsConfigForm = ({
<button
type="button"
className="btn btn-outline-secondary btn-standard form__button"
onClick={handleClear}
disabled={processingClear}
onClick={onReset}
disabled={processingReset}
>
<Trans>query_log_clear</Trans>
</button>

12
client/src/components/Settings/LogsConfig/index.tsx
View File

@@ -3,7 +3,7 @@ import { withTranslation } from 'react-i18next';
import Card from '../../ui/Card';
import { LogsConfigForm } from './Form';
import { Form, FormValues } from './Form';
import { HOUR } from '../../../helpers/constants';
interface LogsConfigProps {
@@ -20,7 +20,7 @@ interface LogsConfigProps {
}
class LogsConfig extends Component<LogsConfigProps> {
handleFormSubmit = (values: any) => {
handleFormSubmit = (values: FormValues) => {
const { t, interval: prevInterval } = this.props;
const { interval, customInterval, ...rest } = values;
@@ -65,7 +65,7 @@ class LogsConfig extends Component<LogsConfigProps> {
return (
<Card title={t('query_log_configuration')} bodyType="card-body box-body--settings" id="logs-config">
<div className="form">
<LogsConfigForm
<Form
initialValues={{
enabled,
interval,
@@ -73,10 +73,10 @@ class LogsConfig extends Component<LogsConfigProps> {
anonymize_client_ip,
ignored: ignored?.join('\n'),
}}
onSubmit={this.handleFormSubmit}
processing={processing}
processingClear={processingClear}
handleClear={this.handleClear}
processingReset={processingClear}
onSubmit={this.handleFormSubmit}
onReset={this.handleClear}
/>
</div>
</Card>

4
client/src/components/Settings/Settings.css
View File

@@ -98,6 +98,10 @@
margin: 0 0 8px;
}
.form__label {
margin-bottom: 8px;
}
.form__label--bold {
font-weight: 700;
}

253
client/src/components/Settings/StatsConfig/Form.tsx
View File

@@ -1,23 +1,12 @@
import React, { useEffect } from 'react';
import { change, Field, formValueSelector, reduxForm } from 'redux-form';
import { Trans, withTranslation } from 'react-i18next';
import flow from 'lodash/flow';
import { connect } from 'react-redux';
import { Trans } from 'react-i18next';
import i18next from 'i18next';
import { useForm } from 'react-hook-form';
import {
renderRadioField,
toNumber,
CheckboxField,
renderTextareaField,
toFloatNumber,
renderInputField,
} from '../../../helpers/form';
import {
FORM_NAME,
STATS_INTERVALS_DAYS,
DAY,
RETENTION_CUSTOM,
RETENTION_CUSTOM_INPUT,
CUSTOM_INTERVAL,
RETENTION_RANGE,
} from '../../../helpers/constants';
@@ -25,66 +14,102 @@ import {
import { trimLinesAndRemoveEmpty } from '../../../helpers/helpers';
import '../FormButton.css';
const getIntervalTitle = (intervalMs: any, t: any) => {
switch (intervalMs) {
const getIntervalTitle = (interval: any) => {
switch (interval) {
case RETENTION_CUSTOM:
return t('settings_custom');
return i18next.t('settings_custom');
case DAY:
return t('interval_24_hour');
return i18next.t('interval_24_hour');
default:
return t('interval_days', { count: intervalMs / DAY });
return i18next.t('interval_days', { count: interval / DAY });
}
};
interface FormProps {
handleSubmit: (...args: unknown[]) => string;
handleReset: (...args: unknown[]) => string;
change: (...args: unknown[]) => unknown;
submitting: boolean;
invalid: boolean;
processing: boolean;
processingReset: boolean;
t: (...args: unknown[]) => string;
interval?: number;
customInterval?: number;
dispatch: (...args: unknown[]) => unknown;
export type FormValues = {
enabled: boolean;
interval: number;
customInterval?: number | null;
ignored: string;
}
let Form = (props: FormProps) => {
type Props = {
initialValues: Partial<FormValues>;
processing: boolean;
processingReset: boolean;
onSubmit: (values: FormValues) => void;
onReset: () => void;
}
export const Form = ({
initialValues,
processing,
processingReset,
onSubmit,
onReset,
}: Props) => {
const {
register,
handleSubmit,
processing,
submitting,
invalid,
handleReset,
processingReset,
t,
interval,
customInterval,
dispatch,
} = props;
watch,
setValue,
formState: { isSubmitting },
} = useForm<FormValues>({
mode: 'onChange',
defaultValues: {
enabled: initialValues.enabled || false,
interval: initialValues.interval || DAY,
customInterval: initialValues.customInterval || null,
ignored: initialValues.ignored || '',
},
});
const intervalValue = watch('interval');
const customIntervalValue = watch('customInterval');
useEffect(() => {
if (STATS_INTERVALS_DAYS.includes(interval)) {
dispatch(change(FORM_NAME.STATS_CONFIG, CUSTOM_INTERVAL, null));
if (STATS_INTERVALS_DAYS.includes(intervalValue)) {
setValue('customInterval', null);
}
}, [interval]);
}, [intervalValue]);
const onSubmitForm = (data: FormValues) => {
onSubmit(data);
};
const handleIgnoredBlur = (e: React.FocusEvent<HTMLTextAreaElement>) => {
const trimmed = trimLinesAndRemoveEmpty(e.target.value);
setValue('ignored', trimmed);
};
const disableSubmit =
isSubmitting ||
processing ||
(intervalValue === RETENTION_CUSTOM && !customIntervalValue);
return (
<form onSubmit={handleSubmit}>
<form onSubmit={handleSubmit(onSubmitForm)}>
<div className="form__group form__group--settings">
<Field
name="enabled"
type="checkbox"
component={CheckboxField}
placeholder={t('statistics_enable')}
disabled={processing}
/>
<label className="checkbox">
<span className="checkbox__marker" />
<input
type="checkbox"
className="checkbox__input"
{...register('enabled')}
disabled={processing}
/>
<span className="checkbox__label">
<span className="checkbox__label-text checkbox__label-text--long">
<span className="checkbox__label-title">{i18next.t('statistics_enable')}</span>
</span>
</span>
</label>
</div>
<label className="form__label form__label--with-desc">
<div className="form__label form__label--with-desc">
<Trans>statistics_retention</Trans>
</label>
</div>
<div className="form__desc form__desc--top">
<Trans>statistics_retention_desc</Trans>
@@ -92,21 +117,28 @@ let Form = (props: FormProps) => {
<div className="form__group form__group--settings mt-2">
<div className="custom-controls-stacked">
<Field
key={RETENTION_CUSTOM}
name="interval"
type="radio"
component={renderRadioField}
value={STATS_INTERVALS_DAYS.includes(interval) ? RETENTION_CUSTOM : interval}
placeholder={getIntervalTitle(RETENTION_CUSTOM, t)}
normalize={toFloatNumber}
disabled={processing}
/>
{!STATS_INTERVALS_DAYS.includes(interval) && (
<div className="form__group--input">
<div className="form__desc form__desc--top">{t('custom_retention_input')}</div>
<label className="custom-control custom-radio">
<input
type="radio"
className="custom-control-input"
disabled={processing}
checked={!STATS_INTERVALS_DAYS.includes(intervalValue)}
value={RETENTION_CUSTOM}
onChange={(e) => {
setValue('interval', parseInt(e.target.value, 10));
}}
/>
<Field
<span className="custom-control-label">{getIntervalTitle(RETENTION_CUSTOM)}</span>
</label>
{!STATS_INTERVALS_DAYS.includes(intervalValue) && (
<div className="form__group--input">
<div className="form__desc form__desc--top">
{i18next.t('custom_retention_input')}
</div>
{/* <Field
key={RETENTION_CUSTOM_INPUT}
name={CUSTOM_INTERVAL}
type="number"
@@ -116,34 +148,61 @@ let Form = (props: FormProps) => {
normalize={toFloatNumber}
min={RETENTION_RANGE.MIN}
max={RETENTION_RANGE.MAX}
/> */}
<input
name={CUSTOM_INTERVAL}
type="number"
className="form-control"
min={RETENTION_RANGE.MIN}
max={RETENTION_RANGE.MAX}
disabled={processing}
{...register('customInterval')}
onChange={(e) => {
setValue('customInterval', parseInt(e.target.value, 10));
}}
/>
</div>
)}
{STATS_INTERVALS_DAYS.map((interval) => (
<Field
key={interval}
name="interval"
type="radio"
component={renderRadioField}
value={interval}
placeholder={getIntervalTitle(interval, t)}
normalize={toNumber}
disabled={processing}
/>
// <Field
// key={interval}
// name="interval"
// type="radio"
// component={renderRadioField}
// value={interval}
// placeholder={getIntervalTitle(interval, t)}
// normalize={toNumber}
// disabled={processing}
// />
<label key={interval} className="custom-control custom-radio">
<input
type="radio"
className="custom-control-input"
disabled={processing}
value={interval}
checked={intervalValue === interval}
onChange={(e) => {
setValue("interval", parseInt(e.target.value, 10));
}}
/>
<span className="custom-control-label">{getIntervalTitle(interval)}</span>
</label>
))}
</div>
</div>
<label className="form__label form__label--with-desc">
<div className="form__label form__label--with-desc">
<Trans>ignore_domains_title</Trans>
</label>
</div>
<div className="form__desc form__desc--top">
<Trans>ignore_domains_desc_stats</Trans>
</div>
<div className="form__group form__group--settings">
<Field
{/* <Field
name="ignored"
type="textarea"
className="form-control form-control--textarea font-monospace text-input"
@@ -151,6 +210,13 @@ let Form = (props: FormProps) => {
placeholder={t('ignore_domains')}
disabled={processing}
normalizeOnBlur={trimLinesAndRemoveEmpty}
/> */}
<textarea
className="form-control form-control--textarea font-monospace text-input"
placeholder={i18next.t('ignore_domains')}
disabled={processing}
{...register('ignored')}
onBlur={handleIgnoredBlur}
/>
</div>
@@ -158,19 +224,15 @@ let Form = (props: FormProps) => {
<button
type="submit"
className="btn btn-success btn-standard btn-large"
disabled={
submitting ||
invalid ||
processing ||
(!STATS_INTERVALS_DAYS.includes(interval) && !customInterval)
}>
disabled={disableSubmit}
>
<Trans>save_btn</Trans>
</button>
<button
type="button"
className="btn btn-outline-secondary btn-standard form__button"
onClick={() => handleReset()}
onClick={onReset}
disabled={processingReset}>
<Trans>statistics_clear</Trans>
</button>
@@ -178,16 +240,3 @@ let Form = (props: FormProps) => {
</form>
);
};
const selector = formValueSelector(FORM_NAME.STATS_CONFIG);
Form = connect((state) => {
const interval = selector(state, 'interval');
const customInterval = selector(state, CUSTOM_INTERVAL);
return {
interval,
customInterval,
};
})(Form);
export default flow([withTranslation(), reduxForm({ form: FORM_NAME.STATS_CONFIG })])(Form);

14
client/src/components/Settings/StatsConfig/index.tsx
View File

@@ -3,7 +3,7 @@ import { withTranslation } from 'react-i18next';
import Card from '../../ui/Card';
import Form from './Form';
import { Form, FormValues } from './Form';
import { HOUR } from '../../../helpers/constants';
interface StatsConfigProps {
@@ -19,7 +19,7 @@ interface StatsConfigProps {
}
class StatsConfig extends Component<StatsConfigProps> {
handleFormSubmit = ({ enabled, interval, ignored, customInterval }: any) => {
handleFormSubmit = ({ enabled, interval, ignored, customInterval }: FormValues) => {
const { t, interval: prevInterval } = this.props;
const newInterval = customInterval ? customInterval * HOUR : interval;
@@ -49,17 +49,11 @@ class StatsConfig extends Component<StatsConfigProps> {
render() {
const {
t,
interval,
customInterval,
processing,
processingReset,
ignored,
enabled,
} = this.props;
@@ -73,10 +67,10 @@ class StatsConfig extends Component<StatsConfigProps> {
enabled,
ignored: ignored.join('\n'),
}}
onSubmit={this.handleFormSubmit}
processing={processing}
processingReset={processingReset}
handleReset={this.handleReset}
onSubmit={this.handleFormSubmit}
onReset={this.handleReset}
/>
</div>
</Card>