logs config form
This commit is contained in:
Ildar Kamalov
@@ -1,111 +1,135 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import { change, Field, formValueSelector, reduxForm } from 'redux-form';
|
||||
import { connect } from 'react-redux';
|
||||
import { Trans, withTranslation } from 'react-i18next';
|
||||
import flow from 'lodash/flow';
|
||||
|
||||
import {
|
||||
CheckboxField,
|
||||
toFloatNumber,
|
||||
renderTextareaField,
|
||||
renderInputField,
|
||||
renderRadioField,
|
||||
} from '../../../helpers/form';
|
||||
import { Trans } from 'react-i18next';
|
||||
import i18next from 'i18next';
|
||||
import { useForm } from 'react-hook-form';
|
||||
|
||||
import { trimLinesAndRemoveEmpty } from '../../../helpers/helpers';
|
||||
import {
|
||||
FORM_NAME,
|
||||
QUERY_LOG_INTERVALS_DAYS,
|
||||
HOUR,
|
||||
DAY,
|
||||
RETENTION_CUSTOM,
|
||||
RETENTION_CUSTOM_INPUT,
|
||||
RETENTION_RANGE,
|
||||
CUSTOM_INTERVAL,
|
||||
} from '../../../helpers/constants';
|
||||
import '../FormButton.css';
|
||||
|
||||
const getIntervalTitle = (interval: any, t: any) => {
|
||||
const getIntervalTitle = (interval: number) => {
|
||||
switch (interval) {
|
||||
case RETENTION_CUSTOM:
|
||||
return t('settings_custom');
|
||||
return i18next.t('settings_custom');
|
||||
case 6 * HOUR:
|
||||
return t('interval_6_hour');
|
||||
return i18next.t('interval_6_hour');
|
||||
case DAY:
|
||||
return t('interval_24_hour');
|
||||
return i18next.t('interval_24_hour');
|
||||
default:
|
||||
return t('interval_days', { count: interval / DAY });
|
||||
return i18next.t('interval_days', { count: interval / DAY });
|
||||
}
|
||||
};
|
||||
|
||||
const getIntervalFields = (processing: any, t: any, toNumber: any) =>
|
||||
QUERY_LOG_INTERVALS_DAYS.map((interval) => (
|
||||
<Field
|
||||
key={interval}
|
||||
name="interval"
|
||||
type="radio"
|
||||
component={renderRadioField}
|
||||
value={interval}
|
||||
placeholder={getIntervalTitle(interval, t)}
|
||||
normalize={toNumber}
|
||||
disabled={processing}
|
||||
/>
|
||||
));
|
||||
|
||||
interface FormProps {
|
||||
handleSubmit: (...args: unknown[]) => string;
|
||||
handleClear: (...args: unknown[]) => unknown;
|
||||
submitting: boolean;
|
||||
invalid: boolean;
|
||||
processing: boolean;
|
||||
processingClear: boolean;
|
||||
t: (...args: unknown[]) => string;
|
||||
interval?: number;
|
||||
customInterval?: number;
|
||||
dispatch: (...args: unknown[]) => unknown;
|
||||
type FormValues = {
|
||||
enabled: boolean;
|
||||
anonymize_client_ip: boolean;
|
||||
interval: number;
|
||||
customInterval?: number | null;
|
||||
ignored: string;
|
||||
}
|
||||
|
||||
let Form = (props: FormProps) => {
|
||||
type Props = {
|
||||
initialValues: Partial<FormValues>;
|
||||
onSubmit: (values: FormValues) => void;
|
||||
handleClear: () => void;
|
||||
processing: boolean;
|
||||
processingClear: boolean;
|
||||
}
|
||||
|
||||
export const LogsConfigForm = ({
|
||||
initialValues,
|
||||
onSubmit,
|
||||
processing,
|
||||
processingClear,
|
||||
handleClear,
|
||||
}: Props) => {
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
submitting,
|
||||
invalid,
|
||||
processing,
|
||||
processingClear,
|
||||
handleClear,
|
||||
t,
|
||||
interval,
|
||||
customInterval,
|
||||
dispatch,
|
||||
} = props;
|
||||
watch,
|
||||
setValue,
|
||||
formState: { isSubmitting },
|
||||
} = useForm<FormValues>({
|
||||
mode: 'onChange',
|
||||
defaultValues: {
|
||||
enabled: initialValues.enabled || false,
|
||||
anonymize_client_ip: initialValues.anonymize_client_ip || false,
|
||||
interval: initialValues.interval || DAY,
|
||||
customInterval: initialValues.customInterval || null,
|
||||
ignored: initialValues.ignored ?? '',
|
||||
},
|
||||
});
|
||||
|
||||
const intervalValue = watch('interval');
|
||||
const customIntervalValue = watch('customInterval');
|
||||
|
||||
useEffect(() => {
|
||||
if (QUERY_LOG_INTERVALS_DAYS.includes(interval)) {
|
||||
dispatch(change(FORM_NAME.LOG_CONFIG, CUSTOM_INTERVAL, null));
|
||||
if (QUERY_LOG_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);
|
||||
|
||||
console.log(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('query_log_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('query_log_enable')}</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="form__group form__group--settings">
|
||||
<Field
|
||||
name="anonymize_client_ip"
|
||||
type="checkbox"
|
||||
component={CheckboxField}
|
||||
placeholder={t('anonymize_client_ip')}
|
||||
subtitle={t('anonymize_client_ip_desc')}
|
||||
disabled={processing}
|
||||
/>
|
||||
<label className="checkbox">
|
||||
<span className="checkbox__marker" />
|
||||
|
||||
<input
|
||||
type="checkbox"
|
||||
className="checkbox__input"
|
||||
{...register('anonymize_client_ip')}
|
||||
disabled={processing}
|
||||
/>
|
||||
|
||||
<span className="checkbox__label">
|
||||
<span className="checkbox__label-text checkbox__label-text--long">
|
||||
<span className="checkbox__label-title">{i18next.t('anonymize_client_ip')}</span>
|
||||
<span className="checkbox__label-subtitle">{i18next.t('anonymize_client_ip_desc')}</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<label className="form__label">
|
||||
@@ -114,34 +138,55 @@ let Form = (props: FormProps) => {
|
||||
|
||||
<div className="form__group form__group--settings">
|
||||
<div className="custom-controls-stacked">
|
||||
<Field
|
||||
key={RETENTION_CUSTOM}
|
||||
name="interval"
|
||||
type="radio"
|
||||
component={renderRadioField}
|
||||
value={QUERY_LOG_INTERVALS_DAYS.includes(interval) ? RETENTION_CUSTOM : interval}
|
||||
placeholder={getIntervalTitle(RETENTION_CUSTOM, t)}
|
||||
normalize={toFloatNumber}
|
||||
disabled={processing}
|
||||
/>
|
||||
{!QUERY_LOG_INTERVALS_DAYS.includes(interval) && (
|
||||
<div className="form__group--input">
|
||||
<div className="form__desc form__desc--top">{t('custom_rotation_input')}</div>
|
||||
<label className="custom-control custom-radio">
|
||||
<input
|
||||
type="radio"
|
||||
className="custom-control-input"
|
||||
disabled={processing}
|
||||
value={RETENTION_CUSTOM}
|
||||
checked={!QUERY_LOG_INTERVALS_DAYS.includes(intervalValue)}
|
||||
onChange={(e) => {
|
||||
setValue('interval', parseInt(e.target.value, 10));
|
||||
}}
|
||||
/>
|
||||
|
||||
<Field
|
||||
key={RETENTION_CUSTOM_INPUT}
|
||||
name={CUSTOM_INTERVAL}
|
||||
<span className="custom-control-label">{getIntervalTitle(RETENTION_CUSTOM)}</span>
|
||||
</label>
|
||||
|
||||
{!QUERY_LOG_INTERVALS_DAYS.includes(intervalValue) && (
|
||||
<div className="form__group--input">
|
||||
<div className="form__desc form__desc--top">{i18next.t('custom_rotation_input')}</div>
|
||||
|
||||
<input
|
||||
type="number"
|
||||
className="form-control"
|
||||
component={renderInputField}
|
||||
disabled={processing}
|
||||
normalize={toFloatNumber}
|
||||
min={RETENTION_RANGE.MIN}
|
||||
max={RETENTION_RANGE.MAX}
|
||||
disabled={processing}
|
||||
{...register('customInterval')}
|
||||
onChange={(e) => {
|
||||
setValue('customInterval', parseInt(e.target.value, 10));
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{getIntervalFields(processing, t, toFloatNumber)}
|
||||
|
||||
{QUERY_LOG_INTERVALS_DAYS.map((interval) => (
|
||||
<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>
|
||||
|
||||
@@ -154,14 +199,12 @@ let Form = (props: FormProps) => {
|
||||
</div>
|
||||
|
||||
<div className="form__group form__group--settings">
|
||||
<Field
|
||||
name="ignored"
|
||||
type="textarea"
|
||||
<textarea
|
||||
className="form-control form-control--textarea font-monospace text-input"
|
||||
component={renderTextareaField}
|
||||
placeholder={t('ignore_domains')}
|
||||
placeholder={i18next.t('ignore_domains')}
|
||||
disabled={processing}
|
||||
normalizeOnBlur={trimLinesAndRemoveEmpty}
|
||||
{...register('ignored')}
|
||||
onBlur={handleIgnoredBlur}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -169,36 +212,20 @@ let Form = (props: FormProps) => {
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-success btn-standard btn-large"
|
||||
disabled={
|
||||
submitting ||
|
||||
invalid ||
|
||||
processing ||
|
||||
(!QUERY_LOG_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={() => handleClear()}
|
||||
disabled={processingClear}>
|
||||
onClick={handleClear}
|
||||
disabled={processingClear}
|
||||
>
|
||||
<Trans>query_log_clear</Trans>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
const selector = formValueSelector(FORM_NAME.LOG_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.LOG_CONFIG })])(Form);
|
||||
|
||||
@@ -3,7 +3,7 @@ import { withTranslation } from 'react-i18next';
|
||||
|
||||
import Card from '../../ui/Card';
|
||||
|
||||
import Form from './Form';
|
||||
import { LogsConfigForm } from './Form';
|
||||
import { HOUR } from '../../../helpers/constants';
|
||||
|
||||
interface LogsConfigProps {
|
||||
@@ -53,26 +53,19 @@ class LogsConfig extends Component<LogsConfigProps> {
|
||||
render() {
|
||||
const {
|
||||
t,
|
||||
|
||||
enabled,
|
||||
|
||||
interval,
|
||||
|
||||
processing,
|
||||
|
||||
processingClear,
|
||||
|
||||
anonymize_client_ip,
|
||||
|
||||
ignored,
|
||||
|
||||
customInterval,
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<Card title={t('query_log_configuration')} bodyType="card-body box-body--settings" id="logs-config">
|
||||
<div className="form">
|
||||
<Form
|
||||
<LogsConfigForm
|
||||
initialValues={{
|
||||
enabled,
|
||||
interval,
|
||||
|
||||
Reference in New Issue
Block a user