+ client: handle logs configuration

2019-09-04 17:39:35 +03:00
parent 27f895cf46
commit a753ae86cc
19 changed files with 401 additions and 229 deletions
--- 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;
 }