+ client: load additional search results

client/src/__locales/en.json

@@ -401,4 +401,4 @@
     "descr": "Description",
     "whois": "Whois",
     "filtering_rules_learn_more": "<0>Learn more</0> about creating your own hosts blocklists."
-}
+}

client/src/actions/queryLogs.js

@@ -3,6 +3,7 @@ import { createAction } from 'redux-actions';
 import apiClient from '../api/Api';
 import { addErrorToast, addSuccessToast } from './index';
 import { normalizeLogs } from '../helpers/helpers';
+import { TABLE_DEFAULT_PAGE_SIZE } from '../helpers/constants';
 
 const getLogsWithParams = async (config) => {
     const { older_than, filter, ...values } = config;
@@ -15,6 +16,41 @@ const getLogsWithParams = async (config) => {
     };
 };
 
+export const getAdditionalLogsRequest = createAction('GET_ADDITIONAL_LOGS_REQUEST');
+export const getAdditionalLogsFailure = createAction('GET_ADDITIONAL_LOGS_FAILURE');
+export const getAdditionalLogsSuccess = createAction('GET_ADDITIONAL_LOGS_SUCCESS');
+
+const checkFilteredLogs = async (data, filter, dispatch, total) => {
+    const { logs, oldest } = data;
+    const totalData = total || { logs };
+
+    const needToGetAdditionalLogs = (logs.length < TABLE_DEFAULT_PAGE_SIZE ||
+        totalData.logs.length < TABLE_DEFAULT_PAGE_SIZE) &&
+        oldest !== '';
+
+    if (needToGetAdditionalLogs) {
+        dispatch(getAdditionalLogsRequest());
+
+        try {
+            const additionalLogs = await getLogsWithParams({ older_than: oldest, filter });
+            if (additionalLogs.logs.length > 0) {
+                return await checkFilteredLogs(additionalLogs, filter, dispatch, {
+                    logs: [...totalData.logs, ...additionalLogs.logs],
+                    oldest: additionalLogs.oldest,
+                });
+            }
+            dispatch(getAdditionalLogsSuccess());
+            return totalData;
+        } catch (error) {
+            dispatch(addErrorToast({ error }));
+            dispatch(getAdditionalLogsFailure(error));
+        }
+    }
+
+    dispatch(getAdditionalLogsSuccess());
+    return totalData;
+};
+
 export const setLogsPagination = createAction('LOGS_PAGINATION');
 export const setLogsPage = createAction('SET_LOG_PAGE');
 
@@ -22,11 +58,20 @@ export const getLogsRequest = createAction('GET_LOGS_REQUEST');
 export const getLogsFailure = createAction('GET_LOGS_FAILURE');
 export const getLogsSuccess = createAction('GET_LOGS_SUCCESS');
 
-export const getLogs = config => async (dispatch) => {
+export const getLogs = config => async (dispatch, getState) => {
     dispatch(getLogsRequest());
     try {
-        const logs = await getLogsWithParams(config);
+        const { isFiltered, filter, page } = getState().queryLogs;
-        dispatch(getLogsSuccess(logs));
+        const data = await getLogsWithParams({ ...config, filter });
+
+        if (isFiltered) {
+            const additionalData = await checkFilteredLogs(data, filter, dispatch);
+            const updatedData = additionalData.logs ? { ...data, ...additionalData } : data;
+            dispatch(getLogsSuccess(updatedData));
+            dispatch(setLogsPagination({ page, pageSize: TABLE_DEFAULT_PAGE_SIZE }));
+        } else {
+            dispatch(getLogsSuccess(data));
+        }
     } catch (error) {
         dispatch(addErrorToast({ error }));
         dispatch(getLogsFailure(error));
@@ -40,8 +85,11 @@ export const setLogsFilterSuccess = createAction('SET_LOGS_FILTER_SUCCESS');
 export const setLogsFilter = filter => async (dispatch) => {
     dispatch(setLogsFilterRequest());
     try {
-        const logs = await getLogsWithParams({ older_than: '', filter });
+        const data = await getLogsWithParams({ older_than: '', filter });
-        dispatch(setLogsFilterSuccess(logs));
+        const additionalData = await checkFilteredLogs(data, filter, dispatch);
+        const updatedData = additionalData.logs ? { ...data, ...additionalData } : data;
+
+        dispatch(setLogsFilterSuccess({ ...updatedData, filter }));
         dispatch(setLogsPage(0));
     } catch (error) {
         dispatch(addErrorToast({ error }));

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

@@ -49,10 +49,10 @@ const Form = (props) => {
     return (
         <form onSubmit={handleChange}>
             <div className="row">
-                <div className="col-3">
+                <div className="col-6 col-sm-3 my-2">
                     <Field
-                        id="domain"
+                        id="filter_domain"
-                        name="domain"
+                        name="filter_domain"
                         component={renderFilterField}
                         type="text"
                         className="form-control"
@@ -61,10 +61,10 @@ const Form = (props) => {
                         onChange={handleChange}
                     />
                 </div>
-                <div className="col-3">
+                <div className="col-6 col-sm-3 my-2">
                     <Field
-                        id="type"
+                        id="filter_question_type"
-                        name="type"
+                        name="filter_question_type"
                         component={renderField}
                         type="text"
                         className="form-control"
@@ -72,9 +72,9 @@ const Form = (props) => {
                         onChange={handleChange}
                     />
                 </div>
-                <div className="col-3">
+                <div className="col-6 col-sm-3 my-2">
                     <Field
-                        name="response"
+                        name="filter_response_status"
                         component="select"
                         className="form-control custom-select"
                     >
@@ -86,10 +86,10 @@ const Form = (props) => {
                         </option>
                     </Field>
                 </div>
-                <div className="col-3">
+                <div className="col-6 col-sm-3 my-2">
                     <Field
-                        id="client"
+                        id="filter_client"
-                        name="client"
+                        name="filter_client"
                         component={renderFilterField}
                         type="text"
                         className="form-control"

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

@@ -1,24 +1,22 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import debounce from 'lodash/debounce';
+import classnames from 'classnames';
 
 import { DEBOUNCE_FILTER_TIMEOUT, RESPONSE_FILTER } from '../../../helpers/constants';
 import { isValidQuestionType } from '../../../helpers/helpers';
 import Form from './Form';
+import Card from '../../ui/Card';
 
 class Filters extends Component {
-    getFilters = (filtered) => {
+    getFilters = ({
-        const {
+        filter_domain, filter_question_type, filter_response_status, filter_client,
-            domain, client, type, response,
+    }) => ({
-        } = filtered;
+        filter_domain: filter_domain || '',
-
+        filter_question_type: isValidQuestionType(filter_question_type) ? filter_question_type.toUpperCase() : '',
-        return {
+        filter_response_status: filter_response_status === RESPONSE_FILTER.FILTERED ? filter_response_status : '',
-            filter_domain: domain || '',
+        filter_client: filter_client || '',
-            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);
@@ -26,13 +24,20 @@ class Filters extends Component {
     }, DEBOUNCE_FILTER_TIMEOUT);
 
     render() {
-        const { filter } = this.props;
+        const { filter, processingAdditionalLogs } = this.props;
+
+        const cardBodyClass = classnames({
+            'card-body': true,
+            'card-body--loading': processingAdditionalLogs,
+        });
 
         return (
-            <Form
+            <Card bodyType={cardBodyClass}>
-                initialValues={filter}
+                <Form
-                onChange={this.handleFormChange}
+                    initialValues={filter}
-            />
+                    onChange={this.handleFormChange}
+                />
+            </Card>
         );
     }
 }
@@ -40,6 +45,8 @@ class Filters extends Component {
 Filters.propTypes = {
     filter: PropTypes.object.isRequired,
     setLogsFilter: PropTypes.func.isRequired,
+    processingGetLogs: PropTypes.bool.isRequired,
+    processingAdditionalLogs: PropTypes.bool.isRequired,
 };
 
 export default Filters;

client/src/components/Logs/index.js

@@ -10,7 +10,7 @@ import {
     formatTime,
     formatDateTime,
 } from '../../helpers/helpers';
-import { SERVICES, FILTERED_STATUS, DEFAULT_LOGS_FILTER, RESPONSE_FILTER, TABLE_DEFAULT_PAGE_SIZE } from '../../helpers/constants';
+import { SERVICES, FILTERED_STATUS, TABLE_DEFAULT_PAGE_SIZE } from '../../helpers/constants';
 import { getTrackerData } from '../../helpers/trackers/trackers';
 import { formatClientCell } from '../../helpers/formatClientCell';
 
@@ -23,7 +23,7 @@ import Popover from '../ui/Popover';
 import './Logs.css';
 
 const TABLE_FIRST_PAGE = 0;
-const INITIAL_REQUEST_DATA = ['', DEFAULT_LOGS_FILTER, TABLE_FIRST_PAGE, TABLE_DEFAULT_PAGE_SIZE];
+const INITIAL_REQUEST_DATA = ['', TABLE_FIRST_PAGE, TABLE_DEFAULT_PAGE_SIZE];
 const FILTERED_REASON = 'Filtered';
 
 class Logs extends Component {
@@ -35,10 +35,10 @@ class Logs extends Component {
         this.props.getLogsConfig();
     }
 
-    getLogs = (older_than, filter, page) => {
+    getLogs = (older_than, page) => {
         if (this.props.queryLogs.enabled) {
             this.props.getLogs({
-                older_than, filter, page, pageSize: TABLE_DEFAULT_PAGE_SIZE,
+                older_than, page, pageSize: TABLE_DEFAULT_PAGE_SIZE,
             });
         }
     };
@@ -218,18 +218,19 @@ class Logs extends Component {
 
     fetchData = (state) => {
         const { pages } = state;
-        const {
+        const { oldest, page } = this.props.queryLogs;
-            filter, oldest, page,
-        } = this.props.queryLogs;
         const isLastPage = pages && (page + 1 === pages);
 
         if (isLastPage) {
-            this.getLogs(oldest, filter, page);
+            this.getLogs(oldest, page);
-        } else {
-            this.props.setLogsPagination({ page, pageSize: TABLE_DEFAULT_PAGE_SIZE });
         }
     };
 
+    changePage = (page) => {
+        this.props.setLogsPage(page);
+        this.props.setLogsPagination({ page, pageSize: TABLE_DEFAULT_PAGE_SIZE });
+    };
+
     renderLogs() {
         const { queryLogs, dashboard, t } = this.props;
         const { processingClients } = dashboard;
@@ -250,7 +251,6 @@ class Logs extends Component {
                 accessor: 'domain',
                 minWidth: 180,
                 Cell: this.getDomainCell,
-                Filter: this.getFilterInput,
             },
             {
                 Header: t('type_table_header'),
@@ -262,28 +262,6 @@ class Logs extends Component {
                 accessor: 'response',
                 minWidth: 250,
                 Cell: this.getResponseCell,
-                filterMethod: (filter, row) => {
-                    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 true;
-                },
-                Filter: ({ filter, onChange }) => (
-                    <select
-                        className="form-control custom-select"
-                        onChange={event => onChange(event.target.value)}
-                        value={filter ? filter.value : RESPONSE_FILTER.ALL}
-                    >
-                        <option value={RESPONSE_FILTER.ALL}>
-                            <Trans>show_all_filter_type</Trans>
-                        </option>
-                        <option value={RESPONSE_FILTER.FILTERED}>
-                            <Trans>show_filtered_type</Trans>
-                        </option>
-                    </select>
-                ),
             },
             {
                 Header: t('client_table_header'),
@@ -291,7 +269,6 @@ class Logs extends Component {
                 maxWidth: 240,
                 minWidth: 240,
                 Cell: this.getClientCell,
-                Filter: this.getFilterInput,
             },
         ];
 
@@ -311,7 +288,7 @@ class Logs extends Component {
                 showPageJump={false}
                 showPageSizeOptions={false}
                 onFetchData={this.fetchData}
-                onPageChange={newPage => this.props.setLogsPage(newPage)}
+                onPageChange={this.changePage}
                 className="logs__table"
                 defaultPageSize={TABLE_DEFAULT_PAGE_SIZE}
                 previousText={t('previous_btn')}
@@ -365,7 +342,9 @@ class Logs extends Component {
 
     render() {
         const { queryLogs, t } = this.props;
-        const { enabled, processingGetConfig } = queryLogs;
+        const {
+            enabled, processingGetConfig, processingAdditionalLogs, processingGetLogs,
+        } = queryLogs;
 
         const refreshButton = enabled ? (
             <button
@@ -387,12 +366,12 @@ class Logs extends Component {
                 {enabled && processingGetConfig && <Loading />}
                 {enabled && !processingGetConfig && (
                     <Fragment>
-                        <Card>
+                        <Filters
-                            <Filters
+                            filter={queryLogs.filter}
-                                filter={queryLogs.filter}
+                            processingGetLogs={processingGetLogs}
-                                setLogsFilter={this.props.setLogsFilter}
+                            processingAdditionalLogs={processingAdditionalLogs}
-                            />
+                            setLogsFilter={this.props.setLogsFilter}
-                        </Card>
+                        />
                         <Card>{this.renderLogs()}</Card>
                     </Fragment>
                 )}

client/src/components/ui/Card.css

@@ -33,6 +33,36 @@
     text-align: center;
 }
 
+.card-body--loading {
+    position: relative;
+}
+
+.card-body--loading:before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 100;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(255, 255, 255, 0.6);
+}
+
+.card-body--loading:after {
+    content: "";
+    position: absolute;
+    z-index: 101;
+    left: 50%;
+    top: 50%;
+    width: 40px;
+    height: 40px;
+    margin-top: -20px;
+    margin-left: -20px;
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2047.6%2047.6%22%20height%3D%22100%25%22%20width%3D%22100%25%22%3E%3Cpath%20opacity%3D%22.235%22%20fill%3D%22%23979797%22%20d%3D%22M44.4%2011.9l-5.2%203c1.5%202.6%202.4%205.6%202.4%208.9%200%209.8-8%2017.8-17.8%2017.8-6.6%200-12.3-3.6-15.4-8.9l-5.2%203C7.3%2042.8%2015%2047.6%2023.8%2047.6c13.1%200%2023.8-10.7%2023.8-23.8%200-4.3-1.2-8.4-3.2-11.9z%22%2F%3E%3Cpath%20fill%3D%22%2366b574%22%20d%3D%22M3.2%2035.7C0%2030.2-.8%2023.8.8%2017.6%202.5%2011.5%206.4%206.4%2011.9%203.2%2017.4%200%2023.8-.8%2030%20.8c6.1%201.6%2011.3%205.6%2014.4%2011.1l-5.2%203c-2.4-4.1-6.2-7.1-10.8-8.3C23.8%205.4%2019%206%2014.9%208.4s-7.1%206.2-8.3%2010.8c-1.2%204.6-.6%209.4%201.8%2013.5l-5.2%203z%22%2F%3E%3C%2Fsvg%3E");
+    will-change: transform;
+    animation: clockwise 2s linear infinite;
+}
+
 .card-title-stats {
     font-size: 13px;
     color: #9aa0ac;

client/src/reducers/queryLogs.js

@@ -107,12 +107,23 @@ const queryLogs = handleActions(
             ...payload,
             processingSetConfig: false,
         }),
+
+        [actions.getAdditionalLogsRequest]: state => ({
+            ...state, processingAdditionalLogs: true, processingGetLogs: true,
+        }),
+        [actions.getAdditionalLogsFailure]: state => ({
+            ...state, processingAdditionalLogs: false, processingGetLogs: false,
+        }),
+        [actions.getAdditionalLogsSuccess]: state => ({
+            ...state, processingAdditionalLogs: false, processingGetLogs: false,
+        }),
     },
     {
         processingGetLogs: true,
         processingClear: false,
         processingGetConfig: false,
         processingSetConfig: false,
+        processingAdditionalLogs: false,
         logs: [],
         interval: 1,
         allLogs: [],