+ client: handle filter change

2019-09-26 11:36:02 +03:00 · 2019-09-26 11:36:02 +03:00 · f04c028e38
parent 9ac6049405
commit f04c028e38
7 changed files with 71 additions and 38 deletions
--- a/client/package-lock.json
+++ b/client/package-lock.json
@ -9868,12 +9868,20 @@
      "dev": true
    },
    "prop-types": {
-      "version": "15.6.2",
-      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz",
-      "integrity": "sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==",
+      "version": "15.7.2",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
+      "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
      "requires": {
-        "loose-envify": "^1.3.1",
-        "object-assign": "^4.1.1"
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.8.1"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "16.9.0",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.9.0.tgz",
+          "integrity": "sha512-tJBzzzIgnnRfEm046qRcURvwQnZVXmuCbscxUO5RWrGTXpon2d4c8mI0D8WE6ydVIm29JiLB6+RslkIvym9Rjw=="
+        }
      }
    },
    "proxy-addr": {
@ -10212,9 +10220,9 @@
      }
    },
    "react-table": {
-      "version": "6.8.6",
-      "resolved": "https://registry.npmjs.org/react-table/-/react-table-6.8.6.tgz",
-      "integrity": "sha1-oK2LSDkxkFLVvvwBJgP7Fh5S7eM=",
+      "version": "6.10.3",
+      "resolved": "https://registry.npmjs.org/react-table/-/react-table-6.10.3.tgz",
+      "integrity": "sha512-sVlq2/rxVaQJywGD95+qGiMr/SMHFIFnXdx619BLOWE/Os5FOGtV6pQJNAjZixbQZiOu7dmBO1kME28uxh6wmA==",
      "requires": {
        "classnames": "^2.2.5"
      }
--- a/client/package.json
+++ b/client/package.json
@ -17,7 +17,7 @@
    "i18next-browser-languagedetector": "^2.2.3",
    "lodash": "^4.17.15",
    "nanoid": "^1.2.3",
-    "prop-types": "^15.6.1",
+    "prop-types": "^15.7.2",
    "react": "^16.4.0",
    "react-click-outside": "^3.0.1",
    "react-dom": "^16.4.0",
@ -27,7 +27,7 @@
    "react-redux-loading-bar": "^4.0.7",
    "react-router-dom": "^4.2.2",
    "react-router-hash-link": "^1.2.2",
-    "react-table": "^6.8.6",
+    "react-table": "^6.10.3",
    "react-transition-group": "^2.4.0",
    "redux": "^4.0.0",
    "redux-actions": "^2.4.0",
--- a/client/src/actions/queryLogs.js
+++ b/client/src/actions/queryLogs.js
@ -5,6 +5,7 @@ import { addErrorToast, addSuccessToast } from './index';
 import { normalizeLogs } from '../helpers/helpers';

 export const setLogsPagination = createAction('LOGS_PAGINATION');
+export const setLogsFilter = createAction('LOGS_FILTER');

 export const getLogsRequest = createAction('GET_LOGS_REQUEST');
 export const getLogsFailure = createAction('GET_LOGS_FAILURE');
--- a/client/src/components/Logs/index.js
+++ b/client/src/components/Logs/index.js
@ -12,7 +12,7 @@ import {
    formatDateTime,
    isValidQuestionType,
 } from '../../helpers/helpers';
-import { SERVICES, FILTERED_STATUS, DEBOUNCE_TIMEOUT } from '../../helpers/constants';
+import { SERVICES, FILTERED_STATUS, DEBOUNCE_TIMEOUT, DEFAULT_LOGS_FILTER } from '../../helpers/constants';
 import { getTrackerData } from '../../helpers/trackers/trackers';
 import { formatClientCell } from '../../helpers/formatClientCell';

@ -26,7 +26,7 @@ import './Logs.css';

 const TABLE_FIRST_PAGE = 0;
 const TABLE_DEFAULT_PAGE_SIZE = 50;
-const INITIAL_REQUEST_DATA = ['', {}, TABLE_FIRST_PAGE, TABLE_DEFAULT_PAGE_SIZE];
+const INITIAL_REQUEST_DATA = ['', DEFAULT_LOGS_FILTER, TABLE_FIRST_PAGE, TABLE_DEFAULT_PAGE_SIZE];
 const FILTERED_REASON = 'Filtered';
 const RESPONSE_FILTER = {
    ALL: 'all',
@ -41,18 +41,16 @@ class Logs extends Component {
        this.props.getLogsConfig();
    }

-    getLogs = (lastRowTime, filter, page, pageSize) => {
+    getLogs = (lastRowTime, filter, page, pageSize, filtered) => {
        if (this.props.queryLogs.enabled) {
            this.props.getLogs({
-                lastRowTime, filter, page, pageSize,
+                lastRowTime, filter, page, pageSize, filtered,
            });
        }
    };

-    refreshLogs = (lastRowTime, filter, page, pageSize, refreshLogs = true) => {
-        this.props.getLogs({
-            lastRowTime, filter, page, pageSize, refreshLogs,
-        });
+    refreshLogs = () => {
+        window.location.reload();
    };

    handleLogsFiltering = debounce((lastRowTime, filter, page, pageSize, filtered) => {
@ -265,25 +263,36 @@ class Logs extends Component {
    };

    fetchData = (state) => {
-        const {
-            filtered, pageSize, page, pages,
-        } = state;
-        const { allLogs } = this.props.queryLogs;
-        const isLastPage = pages && (page + 1 >= pages);
-        const isFiltersPresent = filtered.length > 0;
-        const filter = this.getFilters(filtered);
+        const { pageSize, page, pages } = state;
+        const { allLogs, filter } = this.props.queryLogs;
+        const isLastPage = page + 1 === pages;

-        if (isFiltersPresent) {
-            this.handleLogsFiltering('', filter, page, pageSize, true);
-        } else if (isLastPage) {
+        if (isLastPage) {
            const lastRow = allLogs[allLogs.length - 1];
            const lastRowTime = (lastRow && lastRow.time) || '';
-            this.getLogs(lastRowTime, filter, page, pageSize);
+            this.getLogs(lastRowTime, filter, page, pageSize, true);
        } else {
            this.props.setLogsPagination({ page, pageSize });
        }
    };

+    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;
@ -362,7 +371,7 @@ class Logs extends Component {
                loading={isLoading}
                showPageJump={false}
                onFetchData={this.fetchData}
-                onPageChange={page => this.setState({ page })}
+                onFilteredChange={this.handleFilterChange}
                className="logs__table"
                showPagination={true}
                defaultPageSize={TABLE_DEFAULT_PAGE_SIZE}
@ -373,6 +382,7 @@ class Logs extends Component {
                ofText={t('of_table_footer_text')}
                rowsText={t('rows_table_footer_text')}
                noDataText={t('no_logs_found')}
+                renderTotalPagesCount={this.showTotalPagesCount}
                defaultFilterMethod={(filter, row) => {
                    const id = filter.pivotId || filter.id;
                    return row[id] !== undefined
@ -422,7 +432,7 @@ class Logs extends Component {
            <button
                type="button"
                className="btn btn-icon btn-outline-primary btn-sm ml-3"
-                onClick={() => this.refreshLogs(...INITIAL_REQUEST_DATA)}
+                onClick={this.refreshLogs}
            >
                <svg className="icons">
                    <use xlinkHref="#refresh" />
@ -468,6 +478,7 @@ Logs.propTypes = {
    getClients: PropTypes.func.isRequired,
    getLogsConfig: PropTypes.func.isRequired,
    setLogsPagination: PropTypes.func.isRequired,
+    setLogsFilter: PropTypes.func.isRequired,
    t: PropTypes.func.isRequired,
 };

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

 const mapStateToProps = (state) => {
@ -18,6 +18,7 @@ const mapDispatchToProps = {
    getClients,
    getLogsConfig,
    setLogsPagination,
+    setLogsFilter,
 };

 export default connect(
--- a/client/src/helpers/constants.js
+++ b/client/src/helpers/constants.js
@ -318,3 +318,10 @@ export const DNS_RECORD_TYPES = [
    'TXT',
    'URI',
 ];
+
+export const DEFAULT_LOGS_FILTER = {
+    domain: '',
+    client: '',
+    question_type: '',
+    response_status: '',
+};
--- a/client/src/reducers/queryLogs.js
+++ b/client/src/reducers/queryLogs.js
@ -1,6 +1,7 @@
 import { handleActions } from 'redux-actions';

 import * as actions from '../actions/queryLogs';
+import { DEFAULT_LOGS_FILTER } from '../helpers/constants';

 const queryLogs = handleActions(
    {
@ -19,11 +20,15 @@ const queryLogs = handleActions(
            };
        },

+        [actions.setLogsFilter]: (state, { payload }) => (
+            { ...state, filter: payload }
+        ),
+
        [actions.getLogsRequest]: state => ({ ...state, processingGetLogs: true }),
        [actions.getLogsFailure]: state => ({ ...state, processingGetLogs: false }),
        [actions.getLogsSuccess]: (state, { payload }) => {
            const {
-                logs, lastRowTime, page, pageSize, filtered, refreshLogs,
+                logs, lastRowTime, page, pageSize, filtered,
            } = payload;
            let logsWithOffset = state.allLogs.length > 0 ? state.allLogs : logs;
            let allLogs = logs;
@ -31,9 +36,7 @@ const queryLogs = handleActions(
            if (lastRowTime) {
                logsWithOffset = [...state.allLogs, ...logs];
                allLogs = [...state.allLogs, ...logs];
-            }
-
-            if (filtered || refreshLogs) {
+            } else if (filtered) {
                logsWithOffset = logs;
                allLogs = logs;
            }
@ -50,6 +53,7 @@ const queryLogs = handleActions(
                total,
                allLogs,
                logs: logsSlice,
+                isEntireLog: logs.length < 1,
                processingGetLogs: false,
            };
        },
@ -86,10 +90,11 @@ const queryLogs = handleActions(
        logs: [],
        interval: 1,
        allLogs: [],
-        pages: 0,
-        offset: 0,
+        pages: 1,
        total: 0,
        enabled: true,
+        older_than: '',
+        filter: DEFAULT_LOGS_FILTER,
    },
 );