From f04c028e380182558d772ac6d65efe4f7bdb48d8 Mon Sep 17 00:00:00 2001 From: Ildar Kamalov Date: Thu, 26 Sep 2019 11:36:02 +0300 Subject: [PATCH] + client: handle filter change --- client/package-lock.json | 24 ++++++++----- client/package.json | 4 +-- client/src/actions/queryLogs.js | 1 + client/src/components/Logs/index.js | 53 +++++++++++++++++------------ client/src/containers/Logs.js | 3 +- client/src/helpers/constants.js | 7 ++++ client/src/reducers/queryLogs.js | 17 +++++---- 7 files changed, 71 insertions(+), 38 deletions(-) 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 {