+ client: handle logs configuration

client/src/components/Settings/LogsConfig/Form.js

@@ -0,0 +1,82 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Field, reduxForm } from 'redux-form';
+import { Trans, withNamespaces } from 'react-i18next';
+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) =>
+    QUERY_LOG_INTERVALS_DAYS.map((interval) => {
+        const title =
+            interval === 1 ? t('interval_24_hour') : t('interval_days', { count: interval });
+
+        return (
+            <Field
+                key={interval}
+                name="interval"
+                type="radio"
+                component={renderRadioField}
+                value={interval}
+                placeholder={title}
+                onChange={handleChange}
+                normalize={toNumber}
+                disabled={processing}
+            />
+        );
+    });
+
+const Form = (props) => {
+    const {
+        handleSubmit, handleChange, processing, t,
+    } = props;
+
+    return (
+        <form onSubmit={handleSubmit}>
+            <div className="row">
+                <div className="col-12">
+                    <div className="form__group form__group--settings">
+                        <Field
+                            name="enabled"
+                            type="checkbox"
+                            component={renderSelectField}
+                            placeholder={t('query_log_enable')}
+                            onChange={handleChange}
+                            disabled={processing}
+                        />
+                    </div>
+                </div>
+                <div className="col-12">
+                    <label className="form__label">
+                        <Trans>query_log_retention</Trans>
+                    </label>
+                </div>
+                <div className="col-12">
+                    <div className="form__group form__group--settings">
+                        <div className="custom-controls-stacked">
+                            {getIntervalFields(processing, t, handleChange, toNumber)}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </form>
+    );
+};
+
+Form.propTypes = {
+    handleSubmit: PropTypes.func.isRequired,
+    handleChange: PropTypes.func,
+    change: PropTypes.func.isRequired,
+    submitting: PropTypes.bool.isRequired,
+    invalid: PropTypes.bool.isRequired,
+    processing: PropTypes.bool.isRequired,
+    t: PropTypes.func.isRequired,
+};
+
+export default flow([
+    withNamespaces(),
+    reduxForm({
+        form: 'logConfigForm',
+    }),
+])(Form);

client/src/components/Settings/LogsConfig/index.js

@@ -0,0 +1,69 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { withNamespaces, Trans } from 'react-i18next';
+import debounce from 'lodash/debounce';
+
+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);
+
+    handleLogsClear = () => {
+        const { t, clearLogs } = this.props;
+        // eslint-disable-next-line no-alert
+        if (window.confirm(t('query_log_confirm_clear'))) {
+            clearLogs();
+        }
+    };
+
+    render() {
+        const {
+            t, enabled, interval, processing, processingClear,
+        } = this.props;
+
+        return (
+            <Card
+                title={t('query_log_configuration')}
+                bodyType="card-body box-body--settings"
+                id="logs_config"
+            >
+                <div className="form">
+                    <Form
+                        initialValues={{
+                            enabled,
+                            interval,
+                        }}
+                        onSubmit={this.handleFormChange}
+                        onChange={this.handleFormChange}
+                        processing={processing}
+                    />
+
+                    <button
+                        type="button"
+                        className="btn btn-outline-secondary btn-sm"
+                        onClick={this.handleLogsClear}
+                        disabled={processingClear}
+                    >
+                        <Trans>query_log_clear</Trans>
+                    </button>
+                </div>
+            </Card>
+        );
+    }
+}
+
+LogsConfig.propTypes = {
+    interval: PropTypes.number.isRequired,
+    enabled: PropTypes.bool.isRequired,
+    processing: PropTypes.bool.isRequired,
+    processingClear: PropTypes.bool.isRequired,
+    setLogsConfig: PropTypes.func.isRequired,
+    clearLogs: PropTypes.func.isRequired,
+    t: PropTypes.func.isRequired,
+};
+
+export default withNamespaces()(LogsConfig);

client/src/components/Settings/StatsConfig/Form.js

@@ -9,9 +9,8 @@ import { STATS_INTERVALS_DAYS } from '../../../helpers/constants';
 
 const getIntervalFields = (processing, t, handleChange, toNumber) =>
     STATS_INTERVALS_DAYS.map((interval) => {
-        const title = interval === 1
-            ? t('interval_24_hour')
-            : t('interval_days', { count: interval });
+        const title =
+            interval === 1 ? t('interval_24_hour') : t('interval_days', { count: interval });
 
         return (
             <Field
@@ -37,7 +36,7 @@ const Form = (props) => {
         <form onSubmit={handleSubmit}>
             <div className="row">
                 <div className="col-12">
-                    <label className="form__label form__label--with-desc" htmlFor="server_name">
+                    <label className="form__label form__label--with-desc">
                         <Trans>statistics_retention</Trans>
                     </label>
                     <div className="form__desc form__desc--top">
@@ -45,7 +44,7 @@ const Form = (props) => {
                     </div>
                 </div>
                 <div className="col-12">
-                    <div className="form__group mt-2">
+                    <div className="form__group form__group--settings mt-2">
                         <div className="custom-controls-stacked">
                             {getIntervalFields(processing, t, handleChange, toNumber)}
                         </div>
@@ -69,6 +68,6 @@ Form.propTypes = {
 export default flow([
     withNamespaces(),
     reduxForm({
-        form: 'logConfigForm',
+        form: 'statsConfigForm',
     }),
 ])(Form);

client/src/components/Settings/StatsConfig/index.js

@@ -4,15 +4,15 @@ import { withNamespaces, Trans } from 'react-i18next';
 import debounce from 'lodash/debounce';
 
 import { DEBOUNCE_TIMEOUT } from '../../../helpers/constants';
-import Form from './Form';
 import Card from '../../ui/Card';
+import Form from './Form';
 
 class StatsConfig extends Component {
     handleFormChange = debounce((values) => {
         this.props.setStatsConfig(values);
     }, DEBOUNCE_TIMEOUT);
 
-    handleReset = () => {
+    handleStatsReset = () => {
         const { t, resetStats } = this.props;
         // eslint-disable-next-line no-alert
         if (window.confirm(t('statistics_clear_confirm'))) {
@@ -26,7 +26,7 @@ class StatsConfig extends Component {
         } = this.props;
 
         return (
-            <Card title={t('statistics_logs')} bodyType="card-body box-body--settings">
+            <Card title={t('statistics_configuration')} bodyType="card-body box-body--settings">
                 <div className="form">
                     <Form
                         initialValues={{
@@ -39,8 +39,8 @@ class StatsConfig extends Component {
 
                     <button
                         type="button"
-                        className="btn btn-outline-secondary btn-sm mt-3"
-                        onClick={this.handleReset}
+                        className="btn btn-outline-secondary btn-sm"
+                        onClick={this.handleStatsReset}
                         disabled={processingReset}
                     >
                         <Trans>statistics_clear</Trans>

client/src/components/Settings/index.js

@@ -1,9 +1,10 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { withNamespaces, Trans } from 'react-i18next';
+import { withNamespaces } from 'react-i18next';
 
 import Services from './Services';
 import StatsConfig from './StatsConfig';
+import LogsConfig from './LogsConfig';
 import Checkbox from '../ui/Checkbox';
 import Loading from '../ui/Loading';
 import PageTitle from '../ui/PageTitle';
@@ -39,6 +40,7 @@ class Settings extends Component {
         this.props.initSettings(this.settings);
         this.props.getBlockedServices();
         this.props.getStatsConfig();
+        this.props.getLogsConfig();
     }
 
     renderSettings = (settings) => {
@@ -55,11 +57,7 @@ class Settings extends Component {
                 );
             });
         }
-        return (
-            <div>
-                <Trans>no_settings</Trans>
-            </div>
-        );
+        return '';
     };
 
     render() {
@@ -70,13 +68,23 @@ class Settings extends Component {
             setStatsConfig,
             resetStats,
             stats,
+            queryLogs,
+            setLogsConfig,
+            clearLogs,
             t,
         } = this.props;
+
+        const isDataReady =
+            !settings.processing &&
+            !services.processing &&
+            !stats.processingGetConfig &&
+            !queryLogs.processingGetConfig;
+
         return (
             <Fragment>
                 <PageTitle title={t('general_settings')} />
-                {settings.processing && <Loading />}
-                {!settings.processing && (
+                {!isDataReady && <Loading />}
+                {isDataReady && (
                     <div className="content">
                         <div className="row">
                             <div className="col-md-12">
@@ -95,6 +103,16 @@ class Settings extends Component {
                                     resetStats={resetStats}
                                 />
                             </div>
+                            <div className="col-md-12">
+                                <LogsConfig
+                                    enabled={queryLogs.enabled}
+                                    interval={queryLogs.interval}
+                                    processing={queryLogs.processingSetConfig}
+                                    processingClear={queryLogs.processingClear}
+                                    setLogsConfig={setLogsConfig}
+                                    clearLogs={clearLogs}
+                                />
+                            </div>
                             <div className="col-md-12">
                                 <Services
                                     services={services}