Pull request 743: + client: Query Logs Infinite Scroll
Merge in DNS/adguard-home from feature/infinite_scroll_query_logs to master
Squashed commit of the following:
commit 4407ef2e7c055066257da791fbd65e6b0a495729
Merge: 40b74522 0a4781be
Author: ArtemBaskal <a.baskal@adguard.com>
Date: Tue Sep 1 16:20:23 2020 +0300
Merge branch 'master' into feature/infinite_scroll_query_logs
commit 40b745225112cf8d664220ed8f484b0aa16e997c
Author: ArtemBaskal <a.baskal@adguard.com>
Date: Tue Sep 1 15:46:27 2020 +0300
Remove dynamic translation of toasts
commit f08fa7b8c6a243f6b10e924aebccc183ce7814fd
Author: ArtemBaskal <a.baskal@adguard.com>
Date: Tue Sep 1 13:59:53 2020 +0300
Remove renderLimitIdx, update isEntireLog
commit 0f1b02616faaa5759c0a3f6d8257117fa22094d9
Author: ArtemBaskal <a.baskal@adguard.com>
Date: Tue Sep 1 11:11:14 2020 +0300
Rename variables
commit 0928570c689c1fa704af775382620d68893e7c1c
Author: ArtemBaskal <a.baskal@adguard.com>
Date: Tue Sep 1 11:06:50 2020 +0300
Make query logs short polling function more expressive
commit 9e773cbd6c287a1c799fa2680f3462508462ea7a
Author: ArtemBaskal <a.baskal@adguard.com>
Date: Tue Sep 1 11:06:19 2020 +0300
Fix Toast translation interface
commit f9c57033e5adc5788954cf086b2f114dd8938bcb
Author: ArtemBaskal <a.baskal@adguard.com>
Date: Mon Aug 31 17:01:36 2020 +0300
Do not hide loader
commit b86ba48613437f5559a748ad9aa4cf79d15db082
Author: ArtemBaskal <a.baskal@adguard.com>
Date: Mon Aug 31 16:56:34 2020 +0300
Add dynamic translation for all toasts
commit b9d1d9b447ca90a3c179e503fa5d4abd3516321e
Author: ArtemBaskal <a.baskal@adguard.com>
Date: Mon Aug 31 16:39:29 2020 +0300
Prevent getting query logs recursion if query is not changed
commit e25189749f7912648cca4503cfa8d0ad898c4bb6
Author: ArtemBaskal <a.baskal@adguard.com>
Date: Mon Aug 31 10:13:20 2020 +0300
Decrease page limit to 20
commit 8b248ac5276899de838abf2dc9a69e47599cfc12
Author: ArtemBaskal <a.baskal@adguard.com>
Date: Fri Aug 28 18:47:12 2020 +0300
Return checkFilteredLogs
commit bf2d65c4a3dca0da6b15f632ae11042b7c8e2045
Author: ArtemBaskal <a.baskal@adguard.com>
Date: Fri Aug 28 18:33:51 2020 +0300
Review changes
commit 01b5250f9d9136a1f334086d3e2f00d1a928b37b
Author: ArtemBaskal <a.baskal@adguard.com>
Date: Fri Aug 28 15:29:59 2020 +0300
Remove checkFilteredLogs
commit 25b364c41e6a1489d930c8b3b39b1ab43723f29d
Merge: 1dc66034 2c666cbd
Author: Andrey Meshkov <am@adguard.com>
Date: Fri Aug 28 14:28:47 2020 +0300
Merge branch 'feature/infinite_scroll_query_logs' of ssh://bit.adguard.com:7999/dns/adguard-home into feature/infinite_scroll_query_logs
commit 1dc6603421cde9847e792bfe77ff6546e53fbc2a
Author: Andrey Meshkov <am@adguard.com>
Date: Fri Aug 28 14:28:01 2020 +0300
disregard maxFileScanEntries only if offset is set
commit bad741ed7f1dccf6959d43d000b8c0150f526f9e
Author: Andrey Meshkov <am@adguard.com>
Date: Fri Aug 28 11:57:45 2020 +0300
Fix search behavior when limit is specified
commit 2c666cbdde465cf17434126830dd99ceedfc4cbc
Author: ArtemBaskal <a.baskal@adguard.com>
Date: Thu Aug 27 18:50:28 2020 +0300
Hide table ref loader during data loading
commit 8b4f7fe642ef9e87a979813dcdbd7817d64c27f9
Author: ArtemBaskal <a.baskal@adguard.com>
Date: Thu Aug 27 18:43:24 2020 +0300
Repair search
commit 26fae1ae01a789999b8a2181d60b35663a20460a
Author: ArtemBaskal <a.baskal@adguard.com>
Date: Thu Aug 27 17:59:27 2020 +0300
Resetting initial render index, change loader position on search
commit e2c97ae1a288438267eef9aec71b979319674a71
Author: ArtemBaskal <a.baskal@adguard.com>
Date: Thu Aug 27 16:02:03 2020 +0300
Change isScrolledIntoView
... and 32 more commits
This commit is contained in:
Artem Baskal
@@ -1,14 +1,17 @@
|
||||
import React from 'react';
|
||||
import ReactTable from 'react-table';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Trans, withTranslation } from 'react-i18next';
|
||||
import { Trans, useTranslation } from 'react-i18next';
|
||||
|
||||
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
|
||||
import classNames from 'classnames';
|
||||
import Card from '../ui/Card';
|
||||
import Cell from '../ui/Cell';
|
||||
|
||||
import { getPercent, getIpMatchListStatus, sortIp } from '../../helpers/helpers';
|
||||
import { IP_MATCH_LIST_STATUS, STATUS_COLORS } from '../../helpers/constants';
|
||||
import { formatClientCell } from '../../helpers/formatClientCell';
|
||||
import { BLOCK_ACTIONS, IP_MATCH_LIST_STATUS, STATUS_COLORS } from '../../helpers/constants';
|
||||
import { toggleClientBlock } from '../../actions/access';
|
||||
import { renderFormattedClientCell } from '../../helpers/renderFormattedClientCell';
|
||||
|
||||
const getClientsPercentColor = (percent) => {
|
||||
if (percent > 50) {
|
||||
@@ -20,126 +23,131 @@ const getClientsPercentColor = (percent) => {
|
||||
return STATUS_COLORS.red;
|
||||
};
|
||||
|
||||
const countCell = (dnsQueries) => function cell(row) {
|
||||
const { value } = row;
|
||||
const percent = getPercent(dnsQueries, value);
|
||||
const CountCell = (row) => {
|
||||
const { value, original: { ip } } = row;
|
||||
const numDnsQueries = useSelector((state) => state.stats.numDnsQueries, shallowEqual);
|
||||
|
||||
const percent = getPercent(numDnsQueries, value);
|
||||
const percentColor = getClientsPercentColor(percent);
|
||||
|
||||
return <Cell value={value} percent={percent} color={percentColor} search={row.original.ip} />;
|
||||
return <Cell value={value} percent={percent} color={percentColor} search={ip} />;
|
||||
};
|
||||
|
||||
const renderBlockingButton = (ipMatchListStatus, ip, handleClick, processing) => {
|
||||
const buttonProps = ipMatchListStatus === IP_MATCH_LIST_STATUS.NOT_FOUND
|
||||
? {
|
||||
className: 'btn-outline-danger',
|
||||
text: 'block',
|
||||
type: 'block',
|
||||
const renderBlockingButton = (ip) => {
|
||||
const dispatch = useDispatch();
|
||||
const { t } = useTranslation();
|
||||
const processingSet = useSelector((state) => state.access.processingSet);
|
||||
const disallowed_clients = useSelector(
|
||||
(state) => state.access.disallowed_clients, shallowEqual,
|
||||
);
|
||||
|
||||
const ipMatchListStatus = getIpMatchListStatus(ip, disallowed_clients);
|
||||
|
||||
if (ipMatchListStatus === IP_MATCH_LIST_STATUS.CIDR) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const isNotFound = ipMatchListStatus === IP_MATCH_LIST_STATUS.NOT_FOUND;
|
||||
const type = isNotFound ? BLOCK_ACTIONS.BLOCK : BLOCK_ACTIONS.UNBLOCK;
|
||||
const text = type;
|
||||
|
||||
const className = classNames('btn btn-sm', {
|
||||
'btn-outline-danger': isNotFound,
|
||||
'btn-outline-secondary': !isNotFound,
|
||||
});
|
||||
|
||||
const toggleClientStatus = (type, ip) => {
|
||||
const confirmMessage = type === BLOCK_ACTIONS.BLOCK ? 'client_confirm_block' : 'client_confirm_unblock';
|
||||
|
||||
if (window.confirm(t(confirmMessage, { ip }))) {
|
||||
dispatch(toggleClientBlock(type, ip));
|
||||
}
|
||||
: {
|
||||
className: 'btn-outline-secondary',
|
||||
text: 'unblock',
|
||||
type: 'unblock',
|
||||
};
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="table__action button__action">
|
||||
<button
|
||||
type="button"
|
||||
className={`btn btn-sm ${buttonProps.className}`}
|
||||
onClick={() => handleClick(buttonProps.type, ip)}
|
||||
disabled={processing}
|
||||
>
|
||||
<Trans>{buttonProps.text}</Trans>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
const onClick = () => toggleClientStatus(type, ip);
|
||||
|
||||
return <div className="table__action pl-4">
|
||||
<button
|
||||
type="button"
|
||||
className={className}
|
||||
onClick={onClick}
|
||||
disabled={processingSet}
|
||||
>
|
||||
<Trans>{text}</Trans>
|
||||
</button>
|
||||
</div>;
|
||||
};
|
||||
|
||||
const clientCell = (t, toggleClientStatus, processing, disallowedClients) => function cell(row) {
|
||||
const { value } = row;
|
||||
const ipMatchListStatus = getIpMatchListStatus(value, disallowedClients);
|
||||
const ClientCell = (row) => {
|
||||
const { value, original: { info } } = row;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="logs__row logs__row--overflow logs__row--column">
|
||||
{formatClientCell(row, true, false)}
|
||||
</div>
|
||||
{ipMatchListStatus !== IP_MATCH_LIST_STATUS.CIDR
|
||||
&& renderBlockingButton(ipMatchListStatus, value, toggleClientStatus, processing)}
|
||||
</>
|
||||
);
|
||||
return <>
|
||||
<div className="logs__row logs__row--overflow logs__row--column d-flex">
|
||||
{renderFormattedClientCell(value, info, true)}
|
||||
{renderBlockingButton(value)}
|
||||
</div>
|
||||
</>;
|
||||
};
|
||||
|
||||
const Clients = ({
|
||||
t,
|
||||
refreshButton,
|
||||
topClients,
|
||||
subtitle,
|
||||
dnsQueries,
|
||||
toggleClientStatus,
|
||||
processingAccessSet,
|
||||
disallowedClients,
|
||||
}) => (
|
||||
<Card
|
||||
title={t('top_clients')}
|
||||
subtitle={subtitle}
|
||||
bodyType="card-table"
|
||||
refresh={refreshButton}
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const topClients = useSelector((state) => state.stats.topClients, shallowEqual);
|
||||
const disallowedClients = useSelector((state) => state.access.disallowed_clients, shallowEqual);
|
||||
|
||||
return <Card
|
||||
title={t('top_clients')}
|
||||
subtitle={subtitle}
|
||||
bodyType="card-table"
|
||||
refresh={refreshButton}
|
||||
>
|
||||
<ReactTable
|
||||
data={topClients.map(({
|
||||
name: ip, count, info, blocked,
|
||||
}) => ({
|
||||
ip,
|
||||
count,
|
||||
info,
|
||||
blocked,
|
||||
}))}
|
||||
columns={[
|
||||
{
|
||||
Header: 'IP',
|
||||
accessor: 'ip',
|
||||
sortMethod: sortIp,
|
||||
Cell: clientCell(t, toggleClientStatus, processingAccessSet, disallowedClients),
|
||||
},
|
||||
{
|
||||
Header: <Trans>requests_count</Trans>,
|
||||
accessor: 'count',
|
||||
minWidth: 180,
|
||||
maxWidth: 200,
|
||||
Cell: countCell(dnsQueries),
|
||||
},
|
||||
]}
|
||||
showPagination={false}
|
||||
noDataText={t('no_clients_found')}
|
||||
minRows={6}
|
||||
defaultPageSize={100}
|
||||
className="-highlight card-table-overflow--limited clients__table"
|
||||
getTrProps={(_state, rowInfo) => {
|
||||
if (!rowInfo) {
|
||||
return {};
|
||||
}
|
||||
data={topClients.map(({
|
||||
name: ip, count, info, blocked,
|
||||
}) => ({
|
||||
ip,
|
||||
count,
|
||||
info,
|
||||
blocked,
|
||||
}))}
|
||||
columns={[
|
||||
{
|
||||
Header: 'IP',
|
||||
accessor: 'ip',
|
||||
sortMethod: sortIp,
|
||||
Cell: ClientCell,
|
||||
},
|
||||
{
|
||||
Header: <Trans>requests_count</Trans>,
|
||||
accessor: 'count',
|
||||
minWidth: 180,
|
||||
maxWidth: 200,
|
||||
Cell: CountCell,
|
||||
},
|
||||
]}
|
||||
showPagination={false}
|
||||
noDataText={t('no_clients_found')}
|
||||
minRows={6}
|
||||
defaultPageSize={100}
|
||||
className="-highlight card-table-overflow--limited clients__table"
|
||||
getTrProps={(_state, rowInfo) => {
|
||||
if (!rowInfo) {
|
||||
return {};
|
||||
}
|
||||
|
||||
const { ip } = rowInfo.original;
|
||||
const { ip } = rowInfo.original;
|
||||
|
||||
return getIpMatchListStatus(ip, disallowedClients)
|
||||
=== IP_MATCH_LIST_STATUS.NOT_FOUND ? {} : { className: 'red' };
|
||||
}}
|
||||
return getIpMatchListStatus(ip, disallowedClients) === IP_MATCH_LIST_STATUS.NOT_FOUND ? {} : { className: 'red' };
|
||||
}}
|
||||
/>
|
||||
</Card>
|
||||
);
|
||||
|
||||
Clients.propTypes = {
|
||||
topClients: PropTypes.array.isRequired,
|
||||
dnsQueries: PropTypes.number.isRequired,
|
||||
refreshButton: PropTypes.node.isRequired,
|
||||
clients: PropTypes.array.isRequired,
|
||||
autoClients: PropTypes.array.isRequired,
|
||||
subtitle: PropTypes.string.isRequired,
|
||||
t: PropTypes.func.isRequired,
|
||||
toggleClientStatus: PropTypes.func.isRequired,
|
||||
processingAccessSet: PropTypes.bool.isRequired,
|
||||
disallowedClients: PropTypes.string.isRequired,
|
||||
</Card>;
|
||||
};
|
||||
|
||||
export default withTranslation()(Clients);
|
||||
Clients.propTypes = {
|
||||
refreshButton: PropTypes.node.isRequired,
|
||||
subtitle: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
export default Clients;
|
||||
|
||||
Reference in New Issue
Block a user