diff --git a/client/package-lock.json b/client/package-lock.json
index b2070cdb..8419dae8 100644
--- 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"
}
diff --git a/client/package.json b/client/package.json
index 0e8b6d4d..7c2b1d18 100644
--- 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",
diff --git a/client/src/actions/queryLogs.js b/client/src/actions/queryLogs.js
index f36bc3d1..20672cf6 100644
--- 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');
diff --git a/client/src/components/Logs/index.js b/client/src/components/Logs/index.js
index eeadb6fb..a0bd2db7 100644
--- 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 (
+
+ {pages || 1}{showEllipsis && '…' }
+
+ );
+ }
+
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 {