+ client: handle logs configuration

2019-09-04 17:39:35 +03:00 · 2019-09-04 17:39:35 +03:00 · a753ae86cc
parent 27f895cf46
commit a753ae86cc
19 changed files with 401 additions and 229 deletions
--- a/client/package-lock.json
+++ b/client/package-lock.json
@ -5027,11 +5027,6 @@
        }
      }
    },
-    "file-saver": {
-      "version": "1.3.8",
-      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-1.3.8.tgz",
-      "integrity": "sha512-spKHSBQIxxS81N/O21WmuXA2F6wppUCsutpzenOeZzOCCJ5gEfcbqJP983IrpLXzYmXnMUa6J03SubcNPdKrlg=="
-    },
    "fill-range": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
--- a/client/package.json
+++ b/client/package.json
@ -13,7 +13,6 @@
    "axios": "^0.19.0",
    "classnames": "^2.2.6",
    "date-fns": "^1.29.0",
-    "file-saver": "^1.3.8",
    "i18next": "^12.0.0",
    "i18next-browser-languagedetector": "^2.2.3",
    "lodash": "^4.17.15",
--- a/client/src/__locales/en.json
+++ b/client/src/__locales/en.json
@ -98,7 +98,6 @@
    "enforce_safe_search": "Enforce safe search",
    "enforce_save_search_hint": "AdGuard Home can enforce safe search in the following search engines: Google, Youtube, Bing, DuckDuckGo and Yandex.",
    "no_servers_specified": "No servers specified",
-    "no_settings": "No settings",
    "general_settings": "General settings",
    "dns_settings": "DNS settings",
    "encryption_settings": "Encryption settings",
@ -163,10 +162,7 @@
    "show_all_filter_type": "Show all",
    "show_filtered_type": "Show filtered",
    "no_logs_found": "No logs found",
-    "disabled_log_btn": "Disable log",
-    "download_log_file_btn": "Download log file",
    "refresh_btn": "Refresh",
-    "enabled_log_btn": "Enable log",
    "last_dns_queries": "Last 5000 DNS queries",
    "previous_btn": "Previous",
    "next_btn": "Next",
@ -177,10 +173,15 @@
    "updated_custom_filtering_toast": "Updated the custom filtering rules",
    "rule_removed_from_custom_filtering_toast": "Rule removed from the custom filtering rules",
    "rule_added_to_custom_filtering_toast": "Rule added to the custom filtering rules",
-    "query_log_disabled_toast": "Query log disabled",
-    "query_log_enabled_toast": "Query log enabled",
    "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_cleared": "The query log has been successfully cleared",
+    "query_log_clear": "Clear query logs",
+    "query_log_retention": "Query logs retention",
+    "query_log_enable": "Enable log",
+    "query_log_configuration": "Logs configuration",
+    "query_log_disabled": "The query log is disabled and can be configured in the <0>settings</0>",
    "source_label": "Source",
    "found_in_known_domain_db": "Found in the known domains database.",
    "category_label": "Category",
@ -372,7 +373,7 @@
    "domain": "Domain",
    "answer": "Answer",
    "filter_added_successfully": "The filter has been successfully added",
-    "statistics_logs": "Statistics and logs",
+    "statistics_configuration": "Statistics configuration",
    "statistics_retention": "Statistics retention",
    "statistics_retention_desc": "If you decrease the interval value, some data will be lost",
    "statistics_clear": " Clear statistics",
--- a/client/src/actions/index.js
+++ b/client/src/actions/index.js
@ -4,7 +4,7 @@ import { showLoading, hideLoading } from 'react-redux-loading-bar';
 import axios from 'axios';

 import versionCompare from '../helpers/versionCompare';
-import { normalizeFilteringStatus, normalizeLogs, normalizeTextarea, sortClients } from '../helpers/helpers';
+import { normalizeFilteringStatus, normalizeTextarea, sortClients } from '../helpers/helpers';
 import { SETTINGS_NAMES, CHECK_TIMEOUT } from '../helpers/constants';
 import { getTlsStatus } from './encryption';
 import Api from '../api/Api';
@ -292,52 +292,6 @@ export const disableDns = () => async (dispatch) => {
    }
 };

-export const getLogsRequest = createAction('GET_LOGS_REQUEST');
-export const getLogsFailure = createAction('GET_LOGS_FAILURE');
-export const getLogsSuccess = createAction('GET_LOGS_SUCCESS');
-
-export const getLogs = () => async (dispatch, getState) => {
-    dispatch(getLogsRequest());
-    const timer = setInterval(async () => {
-        const state = getState();
-        if (state.dashboard.isCoreRunning) {
-            clearInterval(timer);
-            try {
-                const logs = normalizeLogs(await apiClient.getQueryLog());
-                dispatch(getLogsSuccess(logs));
-            } catch (error) {
-                dispatch(addErrorToast({ error }));
-                dispatch(getLogsFailure(error));
-            }
-        }
-    }, 100);
-};
-
-export const toggleLogStatusRequest = createAction('TOGGLE_LOGS_REQUEST');
-export const toggleLogStatusFailure = createAction('TOGGLE_LOGS_FAILURE');
-export const toggleLogStatusSuccess = createAction('TOGGLE_LOGS_SUCCESS');
-
-export const toggleLogStatus = queryLogEnabled => async (dispatch) => {
-    dispatch(toggleLogStatusRequest());
-    let toggleMethod;
-    let successMessage;
-    if (queryLogEnabled) {
-        toggleMethod = apiClient.disableQueryLog.bind(apiClient);
-        successMessage = 'query_log_disabled_toast';
-    } else {
-        toggleMethod = apiClient.enableQueryLog.bind(apiClient);
-        successMessage = 'query_log_enabled_toast';
-    }
-    try {
-        await toggleMethod();
-        dispatch(addSuccessToast(successMessage));
-        dispatch(toggleLogStatusSuccess());
-    } catch (error) {
-        dispatch(addErrorToast({ error }));
-        dispatch(toggleLogStatusFailure());
-    }
-};
-
 export const setRulesRequest = createAction('SET_RULES_REQUEST');
 export const setRulesFailure = createAction('SET_RULES_FAILURE');
 export const setRulesSuccess = createAction('SET_RULES_SUCCESS');
@ -465,23 +419,6 @@ export const removeFilter = url => async (dispatch) => {

 export const toggleFilteringModal = createAction('FILTERING_MODAL_TOGGLE');

-export const downloadQueryLogRequest = createAction('DOWNLOAD_QUERY_LOG_REQUEST');
-export const downloadQueryLogFailure = createAction('DOWNLOAD_QUERY_LOG_FAILURE');
-export const downloadQueryLogSuccess = createAction('DOWNLOAD_QUERY_LOG_SUCCESS');
-
-export const downloadQueryLog = () => async (dispatch) => {
-    let data;
-    dispatch(downloadQueryLogRequest());
-    try {
-        data = await apiClient.downloadQueryLog();
-        dispatch(downloadQueryLogSuccess());
-    } catch (error) {
-        dispatch(addErrorToast({ error }));
-        dispatch(downloadQueryLogFailure());
-    }
-    return data;
-};
-
 export const handleUpstreamChange = createAction('HANDLE_UPSTREAM_CHANGE');
 export const setUpstreamRequest = createAction('SET_UPSTREAM_REQUEST');
 export const setUpstreamFailure = createAction('SET_UPSTREAM_FAILURE');
--- a/client/src/actions/queryLogs.js
+++ b/client/src/actions/queryLogs.js
@ -0,0 +1,69 @@
+import { createAction } from 'redux-actions';
+
+import Api from '../api/Api';
+import { addErrorToast, addSuccessToast } from './index';
+import { normalizeLogs } from '../helpers/helpers';
+
+const apiClient = new Api();
+
+export const getLogsRequest = createAction('GET_LOGS_REQUEST');
+export const getLogsFailure = createAction('GET_LOGS_FAILURE');
+export const getLogsSuccess = createAction('GET_LOGS_SUCCESS');
+
+export const getLogs = () => async (dispatch) => {
+    dispatch(getLogsRequest());
+    try {
+        const logs = normalizeLogs(await apiClient.getQueryLog());
+        dispatch(getLogsSuccess(logs));
+    } catch (error) {
+        dispatch(addErrorToast({ error }));
+        dispatch(getLogsFailure(error));
+    }
+};
+
+export const clearLogsRequest = createAction('CLEAR_LOGS_REQUEST');
+export const clearLogsFailure = createAction('CLEAR_LOGS_FAILURE');
+export const clearLogsSuccess = createAction('CLEAR_LOGS_SUCCESS');
+
+export const clearLogs = () => async (dispatch) => {
+    dispatch(clearLogsRequest());
+    try {
+        await apiClient.clearQueryLog();
+        dispatch(clearLogsSuccess());
+        dispatch(addSuccessToast('query_log_cleared'));
+    } catch (error) {
+        dispatch(addErrorToast({ error }));
+        dispatch(clearLogsFailure(error));
+    }
+};
+
+export const getLogsConfigRequest = createAction('GET_LOGS_CONFIG_REQUEST');
+export const getLogsConfigFailure = createAction('GET_LOGS_CONFIG_FAILURE');
+export const getLogsConfigSuccess = createAction('GET_LOGS_CONFIG_SUCCESS');
+
+export const getLogsConfig = () => async (dispatch) => {
+    dispatch(getLogsConfigRequest());
+    try {
+        const data = await apiClient.getQueryLogInfo();
+        dispatch(getLogsConfigSuccess(data));
+    } catch (error) {
+        dispatch(addErrorToast({ error }));
+        dispatch(getLogsConfigFailure());
+    }
+};
+
+export const setLogsConfigRequest = createAction('SET_LOGS_CONFIG_REQUEST');
+export const setLogsConfigFailure = createAction('SET_LOGS_CONFIG_FAILURE');
+export const setLogsConfigSuccess = createAction('SET_LOGS_CONFIG_SUCCESS');
+
+export const setLogsConfig = config => async (dispatch) => {
+    dispatch(setLogsConfigRequest());
+    try {
+        await apiClient.setQueryLogConfig(config);
+        dispatch(addSuccessToast('config_successfully_saved'));
+        dispatch(setLogsConfigSuccess(config));
+    } catch (error) {
+        dispatch(addErrorToast({ error }));
+        dispatch(setLogsConfigFailure());
+    }
+};
--- a/client/src/actions/stats.js
+++ b/client/src/actions/stats.js
@ -6,9 +6,9 @@ import { normalizeTopStats, secondsToMilliseconds } from '../helpers/helpers';

 const apiClient = new Api();

-export const getStatsConfigRequest = createAction('GET_LOGS_CONFIG_REQUEST');
-export const getStatsConfigFailure = createAction('GET_LOGS_CONFIG_FAILURE');
-export const getStatsConfigSuccess = createAction('GET_LOGS_CONFIG_SUCCESS');
+export const getStatsConfigRequest = createAction('GET_STATS_CONFIG_REQUEST');
+export const getStatsConfigFailure = createAction('GET_STATS_CONFIG_FAILURE');
+export const getStatsConfigSuccess = createAction('GET_STATS_CONFIG_SUCCESS');

 export const getStatsConfig = () => async (dispatch) => {
    dispatch(getStatsConfigRequest());
--- a/client/src/api/Api.js
+++ b/client/src/api/Api.js
@ -25,9 +25,6 @@ export default class Api {
    GLOBAL_START = { path: 'start', method: 'POST' };
    GLOBAL_STATUS = { path: 'status', method: 'GET' };
    GLOBAL_STOP = { path: 'stop', method: 'POST' };
-    GLOBAL_QUERY_LOG = { path: 'querylog', method: 'GET' };
-    GLOBAL_QUERY_LOG_ENABLE = { path: 'querylog_enable', method: 'POST' };
-    GLOBAL_QUERY_LOG_DISABLE = { path: 'querylog_disable', method: 'POST' };
    GLOBAL_SET_UPSTREAM_DNS = { path: 'set_upstreams_config', method: 'POST' };
    GLOBAL_TEST_UPSTREAM_DNS = { path: 'test_upstream_dns', method: 'POST' };
    GLOBAL_VERSION = { path: 'version.json', method: 'POST' };
@ -50,27 +47,6 @@ export default class Api {
        return this.makeRequest(path, method);
    }

-    getQueryLog() {
-        const { path, method } = this.GLOBAL_QUERY_LOG;
-        return this.makeRequest(path, method);
-    }
-
-    downloadQueryLog() {
-        const { path, method } = this.GLOBAL_QUERY_LOG;
-        const queryString = '?download=1';
-        return this.makeRequest(path + queryString, method);
-    }
-
-    enableQueryLog() {
-        const { path, method } = this.GLOBAL_QUERY_LOG_ENABLE;
-        return this.makeRequest(path, method);
-    }
-
-    disableQueryLog() {
-        const { path, method } = this.GLOBAL_QUERY_LOG_DISABLE;
-        return this.makeRequest(path, method);
-    }
-
    setUpstream(url) {
        const { path, method } = this.GLOBAL_SET_UPSTREAM_DNS;
        const config = {
@ -521,4 +497,34 @@ export default class Api {
        const { path, method } = this.STATS_RESET;
        return this.makeRequest(path, method);
    }
+
+    // Query log
+    GET_QUERY_LOG = { path: 'querylog', method: 'GET' };
+    QUERY_LOG_CONFIG = { path: 'querylog_config', method: 'POST' };
+    QUERY_LOG_INFO = { path: 'querylog_info', method: 'GET' };
+    QUERY_LOG_CLEAR = { path: 'querylog_clear', method: 'POST' };
+
+    getQueryLog() {
+        const { path, method } = this.GET_QUERY_LOG;
+        return this.makeRequest(path, method);
+    }
+
+    getQueryLogInfo() {
+        const { path, method } = this.QUERY_LOG_INFO;
+        return this.makeRequest(path, method);
+    }
+
+    setQueryLogConfig(data) {
+        const { path, method } = this.QUERY_LOG_CONFIG;
+        const config = {
+            data,
+            headers: { 'Content-Type': 'application/json' },
+        };
+        return this.makeRequest(path, method, config);
+    }
+
+    clearQueryLog() {
+        const { path, method } = this.QUERY_LOG_CLEAR;
+        return this.makeRequest(path, method);
+    }
 }
--- a/client/src/components/Logs/index.js
+++ b/client/src/components/Logs/index.js
@ -1,7 +1,6 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import ReactTable from 'react-table';
-import { saveAs } from 'file-saver/FileSaver';
 import escapeRegExp from 'lodash/escapeRegExp';
 import endsWith from 'lodash/endsWith';
 import { Trans, withNamespaces } from 'react-i18next';
@ -17,7 +16,6 @@ import PopoverFiltered from '../ui/PopoverFilter';
 import Popover from '../ui/Popover';
 import './Logs.css';

-const DOWNLOAD_LOG_FILENAME = 'dns-logs.txt';
 const FILTERED_REASON = 'Filtered';
 const RESPONSE_FILTER = {
    ALL: 'all',
@ -29,18 +27,19 @@ class Logs extends Component {
        this.getLogs();
        this.props.getFilteringStatus();
        this.props.getClients();
+        this.props.getLogsConfig();
    }

    componentDidUpdate(prevProps) {
        // get logs when queryLog becomes enabled
-        if (this.props.dashboard.queryLogEnabled && !prevProps.dashboard.queryLogEnabled) {
+        if (this.props.queryLogs.enabled && !prevProps.queryLogs.enabled) {
            this.props.getLogs();
        }
    }

    getLogs = () => {
        // get logs on initialization if queryLogIsEnabled
-        if (this.props.dashboard.queryLogEnabled) {
+        if (this.props.queryLogs.enabled) {
            this.props.getLogs();
        }
    };
@ -155,10 +154,7 @@ class Logs extends Component {
        } else {
            const filterItem = Object.keys(filters).filter(key => filters[key].id === filterId)[0];

-            if (
-                typeof filterItem !== 'undefined' &&
-                typeof filters[filterItem] !== 'undefined'
-            ) {
+            if (typeof filterItem !== 'undefined' && typeof filters[filterItem] !== 'undefined') {
                filterName = filters[filterItem].name;
            }

@ -255,10 +251,7 @@ class Logs extends Component {
                    if (filter.value === RESPONSE_FILTER.FILTERED) {
                        // eslint-disable-next-line no-underscore-dangle
                        const { reason } = row._original;
-                        return (
-                            this.checkFiltered(reason) ||
-                            this.checkWhiteList(reason)
-                        );
+                        return this.checkFiltered(reason) || this.checkWhiteList(reason);
                    }
                    return true;
                },
@ -347,74 +340,44 @@ class Logs extends Component {
        return null;
    }

-    handleDownloadButton = async (e) => {
-        e.preventDefault();
-        const data = await this.props.downloadQueryLog();
-        const jsonStr = JSON.stringify(data);
-        const dataBlob = new Blob([jsonStr], { type: 'text/plain;charset=utf-8' });
-        saveAs(dataBlob, DOWNLOAD_LOG_FILENAME);
-    };
-
-    renderButtons(queryLogEnabled, logStatusProcessing) {
-        if (queryLogEnabled) {
-            return (
-                <Fragment>
-                    <button
-                        className="btn btn-gray btn-sm mr-2"
-                        type="submit"
-                        onClick={() => this.props.toggleLogStatus(queryLogEnabled)}
-                        disabled={logStatusProcessing}
-                    >
-                        <Trans>disabled_log_btn</Trans>
-                    </button>
-                    <button
-                        className="btn btn-primary btn-sm mr-2"
-                        type="submit"
-                        onClick={this.handleDownloadButton}
-                    >
-                        <Trans>download_log_file_btn</Trans>
-                    </button>
-                    <button
-                        className="btn btn-outline-primary btn-sm"
-                        type="submit"
-                        onClick={this.getLogs}
-                    >
-                        <Trans>refresh_btn</Trans>
-                    </button>
-                </Fragment>
-            );
-        }
-
-        return (
-            <button
-                className="btn btn-success btn-sm mr-2"
-                type="submit"
-                onClick={() => this.props.toggleLogStatus(queryLogEnabled)}
-                disabled={logStatusProcessing}
-            >
-                <Trans>enabled_log_btn</Trans>
-            </button>
-        );
-    }
-
    render() {
        const { queryLogs, dashboard, t } = this.props;
-        const { queryLogEnabled } = dashboard;
+        const { enabled, processingGetLogs, processingGetConfig } = queryLogs;
+        const { processingClients } = dashboard;
+        const isDataReady =
+            !processingGetLogs && !processingGetConfig && !dashboard.processingClients;
+
+        const refreshButton = enabled ? (
+            <button
+                className="btn btn-icon btn-outline-primary btn-sm ml-3"
+                type="submit"
+                onClick={this.getLogs}
+            >
+                <svg className="icons">
+                    <use xlinkHref="#refresh" />
+                </svg>
+            </button>
+        ) : (
+            ''
+        );
+
        return (
            <Fragment>
                <PageTitle title={t('query_log')} subtitle={t('last_dns_queries')}>
-                    <div className="page-title__actions">
-                        {this.renderButtons(queryLogEnabled, dashboard.logStatusProcessing)}
-                    </div>
+                    {refreshButton}
                </PageTitle>
                <Card>
-                    {queryLogEnabled &&
-                        queryLogs.getLogsProcessing &&
-                        dashboard.processingClients && <Loading />}
-                    {queryLogEnabled &&
-                        !queryLogs.getLogsProcessing &&
-                        !dashboard.processingClients &&
-                        this.renderLogs(queryLogs.logs)}
+                    {enabled && (processingGetLogs || processingClients || processingGetConfig) && (
+                        <Loading />
+                    )}
+                    {enabled && isDataReady && this.renderLogs(queryLogs.logs)}
+                    {!enabled && isDataReady && (
+                        <div className="lead text-center py-6">
+                            <Trans components={[<Link to="/settings#logs_config" key="0">link</Link>]}>
+                                query_log_disabled
+                            </Trans>
+                        </div>
+                    )}
                </Card>
            </Fragment>
        );
@ -425,13 +388,12 @@ Logs.propTypes = {
    getLogs: PropTypes.func.isRequired,
    queryLogs: PropTypes.object.isRequired,
    dashboard: PropTypes.object.isRequired,
-    toggleLogStatus: PropTypes.func.isRequired,
-    downloadQueryLog: PropTypes.func.isRequired,
    getFilteringStatus: PropTypes.func.isRequired,
    filtering: PropTypes.object.isRequired,
    setRules: PropTypes.func.isRequired,
    addSuccessToast: PropTypes.func.isRequired,
    getClients: PropTypes.func.isRequired,
+    getLogsConfig: PropTypes.func.isRequired,
    t: PropTypes.func.isRequired,
 };

--- a/client/src/components/Settings/LogsConfig/Form.js
+++ b/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);
--- a/client/src/components/Settings/LogsConfig/index.js
+++ b/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);
--- a/client/src/components/Settings/StatsConfig/Form.js
+++ b/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);
--- a/client/src/components/Settings/StatsConfig/index.js
+++ b/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>
--- a/client/src/components/Settings/index.js
+++ b/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}
--- a/client/src/components/ui/Checkbox.css
+++ b/client/src/components/ui/Checkbox.css
@ -23,7 +23,7 @@
 }

 .checkbox--form .checkbox__label:before {
-    top: 2px;
+    top: 1px;
    margin-right: 10px;
 }

--- a/client/src/containers/Logs.js
+++ b/client/src/containers/Logs.js
@ -1,5 +1,6 @@
 import { connect } from 'react-redux';
-import { getLogs, toggleLogStatus, downloadQueryLog, getFilteringStatus, setRules, addSuccessToast, getClients } from '../actions';
+import { getFilteringStatus, setRules, addSuccessToast, getClients } from '../actions';
+import { getLogs, getLogsConfig } from '../actions/queryLogs';
 import Logs from '../components/Logs';

 const mapStateToProps = (state) => {
@ -10,12 +11,11 @@ const mapStateToProps = (state) => {

 const mapDispatchToProps = {
    getLogs,
-    toggleLogStatus,
-    downloadQueryLog,
    getFilteringStatus,
    setRules,
    addSuccessToast,
    getClients,
+    getLogsConfig,
 };

 export default connect(
--- a/client/src/containers/Settings.js
+++ b/client/src/containers/Settings.js
@ -2,14 +2,18 @@ import { connect } from 'react-redux';
 import { initSettings, toggleSetting } from '../actions';
 import { getBlockedServices, setBlockedServices } from '../actions/services';
 import { getStatsConfig, setStatsConfig, resetStats } from '../actions/stats';
+import { toggleLogStatus, clearLogs, getLogsConfig, setLogsConfig } from '../actions/queryLogs';
 import Settings from '../components/Settings';

 const mapStateToProps = (state) => {
-    const { settings, services, stats } = state;
+    const {
+        settings, services, stats, queryLogs,
+    } = state;
    const props = {
        settings,
        services,
        stats,
+        queryLogs,
    };
    return props;
 };
@ -22,6 +26,10 @@ const mapDispatchToProps = {
    getStatsConfig,
    setStatsConfig,
    resetStats,
+    toggleLogStatus,
+    clearLogs,
+    getLogsConfig,
+    setLogsConfig,
 };

 export default connect(
--- a/client/src/helpers/constants.js
+++ b/client/src/helpers/constants.js
@ -263,3 +263,5 @@ export const FILTERED_STATUS = {
 };

 export const STATS_INTERVALS_DAYS = [1, 7, 30, 90];
+
+export const QUERY_LOG_INTERVALS_DAYS = [1, 7, 30, 90];
--- a/client/src/reducers/index.js
+++ b/client/src/reducers/index.js
@ -12,6 +12,7 @@ import access from './access';
 import rewrites from './rewrites';
 import services from './services';
 import stats from './stats';
+import queryLogs from './queryLogs';

 const settings = handleActions({
    [actions.initSettingsRequest]: state => ({ ...state, processing: true }),
@ -43,6 +44,7 @@ const settings = handleActions({
    processingTestUpstream: false,
    processingSetUpstream: false,
    processingDhcpStatus: false,
+    settingsList: {},
 });

 const dashboard = handleActions({
@ -54,7 +56,6 @@ const dashboard = handleActions({
            running,
            dns_port: dnsPort,
            dns_addresses: dnsAddresses,
-            querylog_enabled: queryLogEnabled,
            upstream_dns: upstreamDns,
            bootstrap_dns: bootstrapDns,
            all_servers: allServers,
@ -69,7 +70,6 @@ const dashboard = handleActions({
            dnsVersion: version,
            dnsPort,
            dnsAddresses,
-            queryLogEnabled,
            upstreamDns: upstreamDns.join('\n'),
            bootstrapDns: bootstrapDns.join('\n'),
            allServers,
@ -94,13 +94,6 @@ const dashboard = handleActions({
        return newState;
    },

-    [actions.toggleLogStatusRequest]: state => ({ ...state, logStatusProcessing: true }),
-    [actions.toggleLogStatusFailure]: state => ({ ...state, logStatusProcessing: false }),
-    [actions.toggleLogStatusSuccess]: (state) => {
-        const { queryLogEnabled } = state;
-        return ({ ...state, queryLogEnabled: !queryLogEnabled, logStatusProcessing: false });
-    },
-
    [actions.getVersionRequest]: state => ({ ...state, processingVersion: true }),
    [actions.getVersionFailure]: state => ({ ...state, processingVersion: false }),
    [actions.getVersionSuccess]: (state, { payload }) => {
@ -179,7 +172,6 @@ const dashboard = handleActions({
 }, {
    processing: true,
    isCoreRunning: false,
-    logStatusProcessing: false,
    processingVersion: true,
    processingFiltering: true,
    processingClients: true,
@ -197,22 +189,6 @@ const dashboard = handleActions({
    autoClients: [],
 });

-const queryLogs = handleActions({
-    [actions.getLogsRequest]: state => ({ ...state, getLogsProcessing: true }),
-    [actions.getLogsFailure]: state => ({ ...state, getLogsProcessing: false }),
-    [actions.getLogsSuccess]: (state, { payload }) => {
-        const newState = { ...state, logs: payload, getLogsProcessing: false };
-        return newState;
-    },
-    [actions.downloadQueryLogRequest]: state => ({ ...state, logsDownloading: true }),
-    [actions.downloadQueryLogFailure]: state => ({ ...state, logsDownloading: false }),
-    [actions.downloadQueryLogSuccess]: state => ({ ...state, logsDownloading: false }),
-}, {
-    getLogsProcessing: false,
-    logsDownloading: false,
-    logs: [],
-});
-
 const filtering = handleActions({
    [actions.setRulesRequest]: state => ({ ...state, processingRules: true }),
    [actions.setRulesFailure]: state => ({ ...state, processingRules: false }),
--- a/client/src/reducers/queryLogs.js
+++ b/client/src/reducers/queryLogs.js
@ -0,0 +1,49 @@
+import { handleActions } from 'redux-actions';
+
+import * as actions from '../actions/queryLogs';
+
+const queryLogs = handleActions(
+    {
+        [actions.getLogsRequest]: state => ({ ...state, processingGetLogs: true }),
+        [actions.getLogsFailure]: state => ({ ...state, processingGetLogs: false }),
+        [actions.getLogsSuccess]: (state, { payload }) => {
+            const newState = { ...state, logs: payload, processingGetLogs: false };
+            return newState;
+        },
+
+        [actions.clearLogsRequest]: state => ({ ...state, processingClear: true }),
+        [actions.clearLogsFailure]: state => ({ ...state, processingClear: false }),
+        [actions.clearLogsSuccess]: state => ({
+            ...state,
+            logs: [],
+            processingClear: false,
+        }),
+
+        [actions.getLogsConfigRequest]: state => ({ ...state, processingGetConfig: true }),
+        [actions.getLogsConfigFailure]: state => ({ ...state, processingGetConfig: false }),
+        [actions.getLogsConfigSuccess]: (state, { payload }) => ({
+            ...state,
+            ...payload,
+            processingGetConfig: false,
+        }),
+
+        [actions.setLogsConfigRequest]: state => ({ ...state, processingSetConfig: true }),
+        [actions.setLogsConfigFailure]: state => ({ ...state, processingSetConfig: false }),
+        [actions.setLogsConfigSuccess]: (state, { payload }) => ({
+            ...state,
+            ...payload,
+            processingSetConfig: false,
+        }),
+    },
+    {
+        processingGetLogs: true,
+        processingClear: false,
+        processingGetConfig: false,
+        processingSetConfig: false,
+        logs: [],
+        interval: 1,
+        enabled: true,
+    },
+);
+
+export default queryLogs;