+ client: separate filters from the table component
This commit is contained in:
Ildar Kamalov
committed by
Simon Zolin
Simon Zolin
parent
6b64d393bd
commit
e243e69a6e
@@ -5,46 +5,40 @@ import escapeRegExp from 'lodash/escapeRegExp';
|
||||
import endsWith from 'lodash/endsWith';
|
||||
import { Trans, withNamespaces } from 'react-i18next';
|
||||
import { HashLink as Link } from 'react-router-hash-link';
|
||||
import debounce from 'lodash/debounce';
|
||||
|
||||
import {
|
||||
formatTime,
|
||||
formatDateTime,
|
||||
isValidQuestionType,
|
||||
} from '../../helpers/helpers';
|
||||
import { SERVICES, FILTERED_STATUS, DEBOUNCE_TIMEOUT, DEFAULT_LOGS_FILTER } from '../../helpers/constants';
|
||||
import { SERVICES, FILTERED_STATUS, DEFAULT_LOGS_FILTER, RESPONSE_FILTER, TABLE_DEFAULT_PAGE_SIZE } from '../../helpers/constants';
|
||||
import { getTrackerData } from '../../helpers/trackers/trackers';
|
||||
import { formatClientCell } from '../../helpers/formatClientCell';
|
||||
|
||||
import Filters from './Filters';
|
||||
import PageTitle from '../ui/PageTitle';
|
||||
import Card from '../ui/Card';
|
||||
import Loading from '../ui/Loading';
|
||||
import PopoverFiltered from '../ui/PopoverFilter';
|
||||
import Popover from '../ui/Popover';
|
||||
import Tooltip from '../ui/Tooltip';
|
||||
import './Logs.css';
|
||||
|
||||
const TABLE_FIRST_PAGE = 0;
|
||||
const TABLE_DEFAULT_PAGE_SIZE = 100;
|
||||
const INITIAL_REQUEST_DATA = ['', DEFAULT_LOGS_FILTER, TABLE_FIRST_PAGE, TABLE_DEFAULT_PAGE_SIZE];
|
||||
const FILTERED_REASON = 'Filtered';
|
||||
const RESPONSE_FILTER = {
|
||||
ALL: 'all',
|
||||
FILTERED: 'filtered',
|
||||
};
|
||||
|
||||
class Logs extends Component {
|
||||
componentDidMount() {
|
||||
this.props.setLogsPage(TABLE_FIRST_PAGE);
|
||||
this.getLogs(...INITIAL_REQUEST_DATA);
|
||||
this.props.getFilteringStatus();
|
||||
this.props.getClients();
|
||||
this.props.getLogsConfig();
|
||||
}
|
||||
|
||||
getLogs = (older_than, filter, page, pageSize, filtered) => {
|
||||
getLogs = (older_than, filter, page) => {
|
||||
if (this.props.queryLogs.enabled) {
|
||||
this.props.getLogs({
|
||||
older_than, filter, page, pageSize, filtered,
|
||||
older_than, filter, page, pageSize: TABLE_DEFAULT_PAGE_SIZE,
|
||||
});
|
||||
}
|
||||
};
|
||||
@@ -53,16 +47,6 @@ class Logs extends Component {
|
||||
window.location.reload();
|
||||
};
|
||||
|
||||
handleLogsFiltering = debounce((older_than, filter, page, pageSize, filtered) => {
|
||||
this.props.getLogs({
|
||||
older_than,
|
||||
filter,
|
||||
page,
|
||||
pageSize,
|
||||
filtered,
|
||||
});
|
||||
}, DEBOUNCE_TIMEOUT);
|
||||
|
||||
renderTooltip = (isFiltered, rule, filter, service) =>
|
||||
isFiltered && <PopoverFiltered rule={rule} filter={filter} service={service} />;
|
||||
|
||||
@@ -232,70 +216,25 @@ class Logs extends Component {
|
||||
);
|
||||
};
|
||||
|
||||
getFilterInput = ({ filter, onChange }) => (
|
||||
<Fragment>
|
||||
<div className="logs__input-wrap">
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
onChange={event => onChange(event.target.value)}
|
||||
value={filter ? filter.value : ''}
|
||||
/>
|
||||
<span className="logs__notice">
|
||||
<Tooltip text={this.props.t('query_log_strict_search')} type='tooltip-custom--logs' />
|
||||
</span>
|
||||
</div>
|
||||
</Fragment>
|
||||
);
|
||||
|
||||
getFilters = (filtered) => {
|
||||
const filteredObj = filtered.reduce((acc, cur) => ({ ...acc, [cur.id]: cur.value }), {});
|
||||
const {
|
||||
domain, client, type, response,
|
||||
} = filteredObj;
|
||||
|
||||
return {
|
||||
filter_domain: domain || '',
|
||||
filter_client: client || '',
|
||||
filter_question_type: isValidQuestionType(type) ? type.toUpperCase() : '',
|
||||
filter_response_status: response === RESPONSE_FILTER.FILTERED ? response : '',
|
||||
};
|
||||
};
|
||||
|
||||
fetchData = (state) => {
|
||||
const { pageSize, page, pages } = state;
|
||||
const { filter, oldest } = this.props.queryLogs;
|
||||
const { pages } = state;
|
||||
const {
|
||||
filter, oldest, page,
|
||||
} = this.props.queryLogs;
|
||||
const isLastPage = pages && (page + 1 === pages);
|
||||
|
||||
if (isLastPage) {
|
||||
this.getLogs(oldest, filter, page, pageSize, false);
|
||||
this.getLogs(oldest, filter, page);
|
||||
} else {
|
||||
this.props.setLogsPagination({ page, pageSize });
|
||||
this.props.setLogsPagination({ page, pageSize: TABLE_DEFAULT_PAGE_SIZE });
|
||||
}
|
||||
};
|
||||
|
||||
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;
|
||||
const {
|
||||
processingGetLogs, processingGetConfig, logs, pages,
|
||||
processingGetLogs, processingGetConfig, logs, pages, page,
|
||||
} = queryLogs;
|
||||
const isLoading = processingGetLogs || processingClients || processingGetConfig;
|
||||
|
||||
@@ -304,7 +243,6 @@ class Logs extends Component {
|
||||
Header: t('time_table_header'),
|
||||
accessor: 'time',
|
||||
maxWidth: 100,
|
||||
filterable: false,
|
||||
Cell: this.getTimeCell,
|
||||
},
|
||||
{
|
||||
@@ -360,18 +298,20 @@ class Logs extends Component {
|
||||
return (
|
||||
<ReactTable
|
||||
manual
|
||||
filterable
|
||||
minRows={5}
|
||||
page={page}
|
||||
pages={pages}
|
||||
columns={columns}
|
||||
filterable={false}
|
||||
sortable={false}
|
||||
data={logs || []}
|
||||
loading={isLoading}
|
||||
showPagination={true}
|
||||
showPaginationTop={true}
|
||||
showPageJump={false}
|
||||
showPageSizeOptions={false}
|
||||
onFetchData={this.fetchData}
|
||||
onFilteredChange={this.handleFilterChange}
|
||||
onPageChange={newPage => this.props.setLogsPage(newPage)}
|
||||
className="logs__table"
|
||||
defaultPageSize={TABLE_DEFAULT_PAGE_SIZE}
|
||||
previousText={t('previous_btn')}
|
||||
@@ -381,7 +321,6 @@ class Logs extends Component {
|
||||
noDataText={t('no_logs_found')}
|
||||
pageText={''}
|
||||
ofText={''}
|
||||
renderCurrentPage={() => false}
|
||||
renderTotalPagesCount={() => false}
|
||||
defaultFilterMethod={(filter, row) => {
|
||||
const id = filter.pivotId || filter.id;
|
||||
@@ -446,7 +385,17 @@ class Logs extends Component {
|
||||
<Fragment>
|
||||
<PageTitle title={t('query_log')}>{refreshButton}</PageTitle>
|
||||
{enabled && processingGetConfig && <Loading />}
|
||||
{enabled && !processingGetConfig && <Card>{this.renderLogs()}</Card>}
|
||||
{enabled && !processingGetConfig && (
|
||||
<Fragment>
|
||||
<Card>
|
||||
<Filters
|
||||
filter={queryLogs.filter}
|
||||
setLogsFilter={this.props.setLogsFilter}
|
||||
/>
|
||||
</Card>
|
||||
<Card>{this.renderLogs()}</Card>
|
||||
</Fragment>
|
||||
)}
|
||||
{!enabled && !processingGetConfig && (
|
||||
<Card>
|
||||
<div className="lead text-center py-6">
|
||||
@@ -479,6 +428,7 @@ Logs.propTypes = {
|
||||
getLogsConfig: PropTypes.func.isRequired,
|
||||
setLogsPagination: PropTypes.func.isRequired,
|
||||
setLogsFilter: PropTypes.func.isRequired,
|
||||
setLogsPage: PropTypes.func.isRequired,
|
||||
t: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user