+ client: handle filter change

client/package-lock.json

@@ -9868,12 +9868,20 @@
       "dev": true
     },
     "prop-types": {
-      "version": "15.6.2",
+      "version": "15.7.2",
-      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
-      "integrity": "sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==",
+      "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
       "requires": {
-        "loose-envify": "^1.3.1",
+        "loose-envify": "^1.4.0",
-        "object-assign": "^4.1.1"
+        "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",
+      "version": "6.10.3",
-      "resolved": "https://registry.npmjs.org/react-table/-/react-table-6.8.6.tgz",
+      "resolved": "https://registry.npmjs.org/react-table/-/react-table-6.10.3.tgz",
-      "integrity": "sha1-oK2LSDkxkFLVvvwBJgP7Fh5S7eM=",
+      "integrity": "sha512-sVlq2/rxVaQJywGD95+qGiMr/SMHFIFnXdx619BLOWE/Os5FOGtV6pQJNAjZixbQZiOu7dmBO1kME28uxh6wmA==",
       "requires": {
         "classnames": "^2.2.5"
       }

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",

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');

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) => {
+    refreshLogs = () => {
-        this.props.getLogs({
+        window.location.reload();
-            lastRowTime, filter, page, pageSize, refreshLogs,
-        });
     };
 
     handleLogsFiltering = debounce((lastRowTime, filter, page, pageSize, filtered) => {
@@ -265,25 +263,36 @@ class Logs extends Component {
     };
 
     fetchData = (state) => {
-        const {
+        const { pageSize, page, pages } = state;
-            filtered, pageSize, page, pages,
+        const { allLogs, filter } = this.props.queryLogs;
-        } = state;
+        const isLastPage = page + 1 === pages;
-        const { allLogs } = this.props.queryLogs;
-        const isLastPage = pages && (page + 1 >= pages);
-        const isFiltersPresent = filtered.length > 0;
-        const filter = this.getFilters(filtered);
 
-        if (isFiltersPresent) {
+        if (isLastPage) {
-            this.handleLogsFiltering('', filter, page, pageSize, true);
-        } else 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,
 };
 

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(

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: '',
+};

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];
-            }
+            } else if (filtered) {
-
-            if (filtered || refreshLogs) {
                 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,
+        pages: 1,
-        offset: 0,
         total: 0,
         enabled: true,
+        older_than: '',
+        filter: DEFAULT_LOGS_FILTER,
     },
 );