From ef1d4f5e9fdacff5e4ee01a84dce0ed8403c67b4 Mon Sep 17 00:00:00 2001 From: Ildar Kamalov Date: Thu, 26 Sep 2019 13:16:05 +0300 Subject: [PATCH] + client: submit retention form after confirm --- client/src/__locales/en.json | 4 +- .../components/Settings/LogsConfig/Form.js | 65 ++++++++++--------- .../components/Settings/LogsConfig/index.js | 34 +++++----- .../components/Settings/StatsConfig/Form.js | 49 ++++++++------ .../components/Settings/StatsConfig/index.js | 32 ++++----- client/src/components/Settings/index.js | 18 ++--- 6 files changed, 107 insertions(+), 95 deletions(-) diff --git a/client/src/__locales/en.json b/client/src/__locales/en.json index d3700869..41d97778 100644 --- a/client/src/__locales/en.json +++ b/client/src/__locales/en.json @@ -174,7 +174,7 @@ "rule_added_to_custom_filtering_toast": "Rule added to the custom filtering rules", "query_log_response_status": "Status: {{value}}", "query_log_filtered": "Filtered by {{filter}}", - "query_log_confirm_clear": "Are you sure you want to clear the entire query log? This will also clear statistics on the dashboard.", + "query_log_confirm_clear": "Are you sure you want to clear the entire query log?", "query_log_cleared": "The query log has been successfully cleared", "query_log_clear": "Clear query logs", "query_log_retention": "Query logs retention", @@ -182,6 +182,7 @@ "query_log_configuration": "Logs configuration", "query_log_disabled": "The query log is disabled and can be configured in the <0>settings", "query_log_strict_search": "Use double quotes for strict search", + "query_log_retention_confirm": "Are you sure you want to change query log retention? If you decrease the interval value, some data will be lost", "source_label": "Source", "found_in_known_domain_db": "Found in the known domains database.", "category_label": "Category", @@ -378,6 +379,7 @@ "statistics_retention_desc": "If you decrease the interval value, some data will be lost", "statistics_clear": " 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_cleared": "Statistics successfully cleared", "interval_hours": "{{count}} hour", "interval_hours_plural": "{{count}} hours", diff --git a/client/src/components/Settings/LogsConfig/Form.js b/client/src/components/Settings/LogsConfig/Form.js index e90c6487..3daf2b8d 100644 --- a/client/src/components/Settings/LogsConfig/Form.js +++ b/client/src/components/Settings/LogsConfig/Form.js @@ -7,7 +7,7 @@ import flow from 'lodash/flow'; import { renderSelectField, renderRadioField, toNumber } from '../../../helpers/form'; import { QUERY_LOG_INTERVALS_DAYS } from '../../../helpers/constants'; -const getIntervalFields = (processing, t, handleChange, toNumber) => +const getIntervalFields = (processing, t, toNumber) => QUERY_LOG_INTERVALS_DAYS.map((interval) => { const title = interval === 1 ? t('interval_24_hour') : t('interval_days', { count: interval }); @@ -20,7 +20,6 @@ const getIntervalFields = (processing, t, handleChange, toNumber) => component={renderRadioField} value={interval} placeholder={title} - onChange={handleChange} normalize={toNumber} disabled={processing} /> @@ -29,48 +28,56 @@ const getIntervalFields = (processing, t, handleChange, toNumber) => const Form = (props) => { const { - handleSubmit, handleChange, processing, t, + handleSubmit, submitting, invalid, processing, processingClear, handleClear, t, } = props; return (
-
-
-
- -
-
-
- -
-
-
-
- {getIntervalFields(processing, t, handleChange, toNumber)} -
-
+
+ +
+ +
+
+ {getIntervalFields(processing, t, toNumber)}
+
+ + +
); }; Form.propTypes = { handleSubmit: PropTypes.func.isRequired, - handleChange: PropTypes.func, - change: PropTypes.func.isRequired, + handleClear: PropTypes.func.isRequired, submitting: PropTypes.bool.isRequired, invalid: PropTypes.bool.isRequired, processing: PropTypes.bool.isRequired, + processingClear: PropTypes.bool.isRequired, t: PropTypes.func.isRequired, }; diff --git a/client/src/components/Settings/LogsConfig/index.js b/client/src/components/Settings/LogsConfig/index.js index 8b519827..e45b785c 100644 --- a/client/src/components/Settings/LogsConfig/index.js +++ b/client/src/components/Settings/LogsConfig/index.js @@ -1,16 +1,24 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { withNamespaces, Trans } from 'react-i18next'; -import debounce from 'lodash/debounce'; +import { withNamespaces } from 'react-i18next'; -import { DEBOUNCE_TIMEOUT } from '../../../helpers/constants'; import Card from '../../ui/Card'; import Form from './Form'; class LogsConfig extends Component { - handleFormChange = debounce((values) => { - this.props.setLogsConfig(values); - }, DEBOUNCE_TIMEOUT); + handleFormSubmit = (values) => { + const { t, interval: prevInterval } = this.props; + const { interval } = values; + + if (interval !== prevInterval) { + // eslint-disable-next-line no-alert + if (window.confirm(t('query_log_retention_confirm'))) { + this.props.setLogsConfig(values); + } + } else { + this.props.setLogsConfig(values); + } + }; handleClear = () => { const { t, clearLogs } = this.props; @@ -37,19 +45,11 @@ class LogsConfig extends Component { enabled, interval, }} - onSubmit={this.handleFormChange} - onChange={this.handleFormChange} + onSubmit={this.handleFormSubmit} processing={processing} + processingClear={processingClear} + handleClear={this.handleClear} /> - -
); diff --git a/client/src/components/Settings/StatsConfig/Form.js b/client/src/components/Settings/StatsConfig/Form.js index 7da5286f..5762ba69 100644 --- a/client/src/components/Settings/StatsConfig/Form.js +++ b/client/src/components/Settings/StatsConfig/Form.js @@ -7,7 +7,7 @@ import flow from 'lodash/flow'; import { renderRadioField, toNumber } from '../../../helpers/form'; import { STATS_INTERVALS_DAYS } from '../../../helpers/constants'; -const getIntervalFields = (processing, t, handleChange, toNumber) => +const getIntervalFields = (processing, t, toNumber) => STATS_INTERVALS_DAYS.map((interval) => { const title = interval === 1 ? t('interval_24_hour') : t('interval_days', { count: interval }); @@ -20,7 +20,6 @@ const getIntervalFields = (processing, t, handleChange, toNumber) => component={renderRadioField} value={interval} placeholder={title} - onChange={handleChange} normalize={toNumber} disabled={processing} /> @@ -29,39 +28,51 @@ const getIntervalFields = (processing, t, handleChange, toNumber) => const Form = (props) => { const { - handleSubmit, handleChange, processing, t, + handleSubmit, processing, submitting, invalid, handleReset, processingReset, t, } = props; return (
-
-
- -
- statistics_retention_desc -
-
-
-
-
- {getIntervalFields(processing, t, handleChange, toNumber)} -
-
+ +
+ statistics_retention_desc +
+
+
+ {getIntervalFields(processing, t, toNumber)}
+
+ + +
); }; Form.propTypes = { handleSubmit: PropTypes.func.isRequired, - handleChange: PropTypes.func, + handleReset: PropTypes.func.isRequired, change: PropTypes.func.isRequired, submitting: PropTypes.bool.isRequired, invalid: PropTypes.bool.isRequired, processing: PropTypes.bool.isRequired, + processingReset: PropTypes.bool.isRequired, t: PropTypes.func.isRequired, }; diff --git a/client/src/components/Settings/StatsConfig/index.js b/client/src/components/Settings/StatsConfig/index.js index 86c23b38..79c3cdda 100644 --- a/client/src/components/Settings/StatsConfig/index.js +++ b/client/src/components/Settings/StatsConfig/index.js @@ -1,16 +1,18 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { withNamespaces, Trans } from 'react-i18next'; -import debounce from 'lodash/debounce'; +import { withNamespaces } from 'react-i18next'; -import { DEBOUNCE_TIMEOUT } from '../../../helpers/constants'; import Card from '../../ui/Card'; import Form from './Form'; class StatsConfig extends Component { - handleFormChange = debounce((values) => { - this.props.setStatsConfig(values); - }, DEBOUNCE_TIMEOUT); + handleFormSubmit = (values) => { + const { t } = this.props; + // eslint-disable-next-line no-alert + if (window.confirm(t('statistics_retention_confirm'))) { + this.props.setStatsConfig(values); + } + }; handleReset = () => { const { t, resetStats } = this.props; @@ -29,22 +31,12 @@ class StatsConfig extends Component {
- -
); diff --git a/client/src/components/Settings/index.js b/client/src/components/Settings/index.js index 936e05c9..9c05f680 100644 --- a/client/src/components/Settings/index.js +++ b/client/src/components/Settings/index.js @@ -101,15 +101,6 @@ class Settings extends Component {
-
- -
+
+ +