+ client: separate filters from the table component

client/src/components/Logs/Filters/Form.js

@@ -0,0 +1,116 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { Field, reduxForm } from 'redux-form';
+import { withNamespaces, Trans } from 'react-i18next';
+import flow from 'lodash/flow';
+
+import { renderField } from '../../../helpers/form';
+import { RESPONSE_FILTER } from '../../../helpers/constants';
+import Tooltip from '../../ui/Tooltip';
+
+const renderFilterField = ({
+    input,
+    id,
+    className,
+    placeholder,
+    type,
+    disabled,
+    autoComplete,
+    tooltip,
+    meta: { touched, error },
+}) => (
+    <Fragment>
+        <div className="logs__input-wrap">
+            <input
+                {...input}
+                id={id}
+                placeholder={placeholder}
+                type={type}
+                className={className}
+                disabled={disabled}
+                autoComplete={autoComplete}
+            />
+            <span className="logs__notice">
+                <Tooltip text={tooltip} type='tooltip-custom--logs' />
+            </span>
+            {!disabled &&
+                touched &&
+                (error && <span className="form__message form__message--error">{error}</span>)}
+        </div>
+    </Fragment>
+);
+
+const Form = (props) => {
+    const {
+        t,
+        handleChange,
+    } = props;
+
+    return (
+        <form onSubmit={handleChange}>
+            <div className="row">
+                <div className="col-3">
+                    <Field
+                        id="domain"
+                        name="domain"
+                        component={renderFilterField}
+                        type="text"
+                        className="form-control"
+                        placeholder={t('domain_name_table_header')}
+                        tooltip={t('query_log_strict_search')}
+                        onChange={handleChange}
+                    />
+                </div>
+                <div className="col-3">
+                    <Field
+                        id="type"
+                        name="type"
+                        component={renderField}
+                        type="text"
+                        className="form-control"
+                        placeholder={t('type_table_header')}
+                        onChange={handleChange}
+                    />
+                </div>
+                <div className="col-3">
+                    <Field
+                        name="response"
+                        component="select"
+                        className="form-control custom-select"
+                    >
+                        <option value={RESPONSE_FILTER.ALL}>
+                            <Trans>show_all_filter_type</Trans>
+                        </option>
+                        <option value={RESPONSE_FILTER.FILTERED}>
+                            <Trans>show_filtered_type</Trans>
+                        </option>
+                    </Field>
+                </div>
+                <div className="col-3">
+                    <Field
+                        id="client"
+                        name="client"
+                        component={renderFilterField}
+                        type="text"
+                        className="form-control"
+                        placeholder={t('client_table_header')}
+                        tooltip={t('query_log_strict_search')}
+                        onChange={handleChange}
+                    />
+                </div>
+            </div>
+        </form>
+    );
+};
+
+Form.propTypes = {
+    handleChange: PropTypes.func,
+    t: PropTypes.func.isRequired,
+};
+
+export default flow([
+    withNamespaces(),
+    reduxForm({
+        form: 'logsFilterForm',
+    }),
+])(Form);

client/src/components/Logs/Filters/index.js

@@ -0,0 +1,45 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import debounce from 'lodash/debounce';
+
+import { DEBOUNCE_FILTER_TIMEOUT, RESPONSE_FILTER } from '../../../helpers/constants';
+import { isValidQuestionType } from '../../../helpers/helpers';
+import Form from './Form';
+
+class Filters extends Component {
+    getFilters = (filtered) => {
+        const {
+            domain, client, type, response,
+        } = filtered;
+
+        return {
+            filter_domain: domain || '',
+            filter_client: client || '',
+            filter_question_type: isValidQuestionType(type) ? type.toUpperCase() : '',
+            filter_response_status: response === RESPONSE_FILTER.FILTERED ? response : '',
+        };
+    };
+
+    handleFormChange = debounce((values) => {
+        const filter = this.getFilters(values);
+        this.props.setLogsFilter(filter);
+    }, DEBOUNCE_FILTER_TIMEOUT);
+
+    render() {
+        const { filter } = this.props;
+
+        return (
+            <Form
+                initialValues={filter}
+                onChange={this.handleFormChange}
+            />
+        );
+    }
+}
+
+Filters.propTypes = {
+    filter: PropTypes.object.isRequired,
+    setLogsFilter: PropTypes.func.isRequired,
+};
+
+export default Filters;

client/src/components/Logs/index.js

@@ -5,46 +5,40 @@ import escapeRegExp from 'lodash/escapeRegExp';
 import endsWith from 'lodash/endsWith';
 import { Trans, withNamespaces } from 'react-i18next';
 import { HashLink as Link } from 'react-router-hash-link';
-import debounce from 'lodash/debounce';
 
 import {
     formatTime,
     formatDateTime,
-    isValidQuestionType,
 } from '../../helpers/helpers';
-import { SERVICES, FILTERED_STATUS, DEBOUNCE_TIMEOUT, DEFAULT_LOGS_FILTER } from '../../helpers/constants';
+import { SERVICES, FILTERED_STATUS, DEFAULT_LOGS_FILTER, RESPONSE_FILTER, TABLE_DEFAULT_PAGE_SIZE } from '../../helpers/constants';
 import { getTrackerData } from '../../helpers/trackers/trackers';
 import { formatClientCell } from '../../helpers/formatClientCell';
 
+import Filters from './Filters';
 import PageTitle from '../ui/PageTitle';
 import Card from '../ui/Card';
 import Loading from '../ui/Loading';
 import PopoverFiltered from '../ui/PopoverFilter';
 import Popover from '../ui/Popover';
-import Tooltip from '../ui/Tooltip';
 import './Logs.css';
 
 const TABLE_FIRST_PAGE = 0;
-const TABLE_DEFAULT_PAGE_SIZE = 100;
 const INITIAL_REQUEST_DATA = ['', DEFAULT_LOGS_FILTER, TABLE_FIRST_PAGE, TABLE_DEFAULT_PAGE_SIZE];
 const FILTERED_REASON = 'Filtered';
-const RESPONSE_FILTER = {
-    ALL: 'all',
-    FILTERED: 'filtered',
-};
 
 class Logs extends Component {
     componentDidMount() {
+        this.props.setLogsPage(TABLE_FIRST_PAGE);
         this.getLogs(...INITIAL_REQUEST_DATA);
         this.props.getFilteringStatus();
         this.props.getClients();
         this.props.getLogsConfig();
     }
 
-    getLogs = (older_than, filter, page, pageSize, filtered) => {
+    getLogs = (older_than, filter, page) => {
         if (this.props.queryLogs.enabled) {
             this.props.getLogs({
-                older_than, filter, page, pageSize, filtered,
+                older_than, filter, page, pageSize: TABLE_DEFAULT_PAGE_SIZE,
             });
         }
     };
@@ -53,16 +47,6 @@ class Logs extends Component {
         window.location.reload();
     };
 
-    handleLogsFiltering = debounce((older_than, filter, page, pageSize, filtered) => {
-        this.props.getLogs({
-            older_than,
-            filter,
-            page,
-            pageSize,
-            filtered,
-        });
-    }, DEBOUNCE_TIMEOUT);
-
     renderTooltip = (isFiltered, rule, filter, service) =>
         isFiltered && <PopoverFiltered rule={rule} filter={filter} service={service} />;
 
@@ -232,70 +216,25 @@ class Logs extends Component {
         );
     };
 
-    getFilterInput = ({ filter, onChange }) => (
-        <Fragment>
-            <div className="logs__input-wrap">
-                <input
-                    type="text"
-                    className="form-control"
-                    onChange={event => onChange(event.target.value)}
-                    value={filter ? filter.value : ''}
-                />
-                <span className="logs__notice">
-                    <Tooltip text={this.props.t('query_log_strict_search')} type='tooltip-custom--logs' />
-                </span>
-            </div>
-        </Fragment>
-    );
-
-    getFilters = (filtered) => {
-        const filteredObj = filtered.reduce((acc, cur) => ({ ...acc, [cur.id]: cur.value }), {});
-        const {
-            domain, client, type, response,
-        } = filteredObj;
-
-        return {
-            filter_domain: domain || '',
-            filter_client: client || '',
-            filter_question_type: isValidQuestionType(type) ? type.toUpperCase() : '',
-            filter_response_status: response === RESPONSE_FILTER.FILTERED ? response : '',
-        };
-    };
-
     fetchData = (state) => {
-        const { pageSize, page, pages } = state;
-        const { filter, oldest } = this.props.queryLogs;
+        const { pages } = state;
+        const {
+            filter, oldest, page,
+        } = this.props.queryLogs;
         const isLastPage = pages && (page + 1 === pages);
 
         if (isLastPage) {
-            this.getLogs(oldest, filter, page, pageSize, false);
+            this.getLogs(oldest, filter, page);
         } else {
-            this.props.setLogsPagination({ page, pageSize });
+            this.props.setLogsPagination({ page, pageSize: TABLE_DEFAULT_PAGE_SIZE });
         }
     };
 
-    handleFilterChange = (filtered) => {
-        const filters = this.getFilters(filtered);
-        this.props.setLogsFilter(filters);
-        this.handleLogsFiltering('', filters, TABLE_FIRST_PAGE, TABLE_DEFAULT_PAGE_SIZE, true);
-    }
-
-    showTotalPagesCount = (pages) => {
-        const { total, isEntireLog } = this.props.queryLogs;
-        const showEllipsis = !isEntireLog && total >= 500;
-
-        return (
-            <span className="-totalPages">
-                {pages || 1}{showEllipsis && '…' }
-            </span>
-        );
-    }
-
     renderLogs() {
         const { queryLogs, dashboard, t } = this.props;
         const { processingClients } = dashboard;
         const {
-            processingGetLogs, processingGetConfig, logs, pages,
+            processingGetLogs, processingGetConfig, logs, pages, page,
         } = queryLogs;
         const isLoading = processingGetLogs || processingClients || processingGetConfig;
 
@@ -304,7 +243,6 @@ class Logs extends Component {
                 Header: t('time_table_header'),
                 accessor: 'time',
                 maxWidth: 100,
-                filterable: false,
                 Cell: this.getTimeCell,
             },
             {
@@ -360,18 +298,20 @@ class Logs extends Component {
         return (
             <ReactTable
                 manual
-                filterable
                 minRows={5}
+                page={page}
                 pages={pages}
                 columns={columns}
+                filterable={false}
                 sortable={false}
                 data={logs || []}
                 loading={isLoading}
                 showPagination={true}
+                showPaginationTop={true}
                 showPageJump={false}
                 showPageSizeOptions={false}
                 onFetchData={this.fetchData}
-                onFilteredChange={this.handleFilterChange}
+                onPageChange={newPage => this.props.setLogsPage(newPage)}
                 className="logs__table"
                 defaultPageSize={TABLE_DEFAULT_PAGE_SIZE}
                 previousText={t('previous_btn')}
@@ -381,7 +321,6 @@ class Logs extends Component {
                 noDataText={t('no_logs_found')}
                 pageText={''}
                 ofText={''}
-                renderCurrentPage={() => false}
                 renderTotalPagesCount={() => false}
                 defaultFilterMethod={(filter, row) => {
                     const id = filter.pivotId || filter.id;
@@ -446,7 +385,17 @@ class Logs extends Component {
             <Fragment>
                 <PageTitle title={t('query_log')}>{refreshButton}</PageTitle>
                 {enabled && processingGetConfig && <Loading />}
-                {enabled && !processingGetConfig && <Card>{this.renderLogs()}</Card>}
+                {enabled && !processingGetConfig && (
+                    <Fragment>
+                        <Card>
+                            <Filters
+                                filter={queryLogs.filter}
+                                setLogsFilter={this.props.setLogsFilter}
+                            />
+                        </Card>
+                        <Card>{this.renderLogs()}</Card>
+                    </Fragment>
+                )}
                 {!enabled && !processingGetConfig && (
                     <Card>
                         <div className="lead text-center py-6">
@@ -479,6 +428,7 @@ Logs.propTypes = {
     getLogsConfig: PropTypes.func.isRequired,
     setLogsPagination: PropTypes.func.isRequired,
     setLogsFilter: PropTypes.func.isRequired,
+    setLogsPage: PropTypes.func.isRequired,
     t: PropTypes.func.isRequired,
 };
 

client/src/components/ui/Tooltip.css

@@ -64,6 +64,7 @@
     top: calc(100% + 10px);
     right: -10px;
     left: initial;
+    width: 255px;
     transform: none;
 }