2020-01-30 10:58:54 +00:00
|
|
|
import React, { Fragment } from 'react';
|
2018-08-30 14:25:33 +00:00
|
|
|
import ReactTable from 'react-table';
|
|
|
|
import PropTypes from 'prop-types';
|
2018-10-25 06:52:03 +00:00
|
|
|
import { Trans, withNamespaces } from 'react-i18next';
|
2018-08-30 14:25:33 +00:00
|
|
|
|
|
|
|
import Card from '../ui/Card';
|
2018-10-12 13:02:01 +00:00
|
|
|
import Cell from '../ui/Cell';
|
2018-08-30 14:25:33 +00:00
|
|
|
|
2019-09-23 13:02:47 +00:00
|
|
|
import { getPercent } from '../../helpers/helpers';
|
2018-10-12 13:02:01 +00:00
|
|
|
import { STATUS_COLORS } from '../../helpers/constants';
|
2019-09-23 13:02:47 +00:00
|
|
|
import { formatClientCell } from '../../helpers/formatClientCell';
|
2018-10-12 13:02:01 +00:00
|
|
|
|
2019-08-27 13:43:58 +00:00
|
|
|
const getClientsPercentColor = (percent) => {
|
|
|
|
if (percent > 50) {
|
|
|
|
return STATUS_COLORS.green;
|
|
|
|
} else if (percent > 10) {
|
|
|
|
return STATUS_COLORS.yellow;
|
|
|
|
}
|
|
|
|
return STATUS_COLORS.red;
|
|
|
|
};
|
2018-10-12 13:02:01 +00:00
|
|
|
|
2019-09-23 13:02:47 +00:00
|
|
|
const countCell = dnsQueries =>
|
2019-08-27 13:43:58 +00:00
|
|
|
function cell(row) {
|
|
|
|
const { value } = row;
|
2019-09-23 13:02:47 +00:00
|
|
|
const percent = getPercent(dnsQueries, value);
|
|
|
|
const percentColor = getClientsPercentColor(percent);
|
2019-03-20 14:04:32 +00:00
|
|
|
|
2019-09-23 13:02:47 +00:00
|
|
|
return <Cell value={value} percent={percent} color={percentColor} />;
|
2019-08-27 13:43:58 +00:00
|
|
|
};
|
2018-10-12 13:02:01 +00:00
|
|
|
|
2020-01-30 10:58:54 +00:00
|
|
|
const renderBlockingButton = (blocked, ip, handleClick, processing) => {
|
|
|
|
let buttonProps = {
|
|
|
|
className: 'btn-outline-danger',
|
|
|
|
text: 'block_btn',
|
|
|
|
type: 'block',
|
|
|
|
};
|
|
|
|
|
|
|
|
if (blocked) {
|
|
|
|
buttonProps = {
|
|
|
|
className: 'btn-outline-secondary',
|
|
|
|
text: 'unblock_btn',
|
|
|
|
type: 'unblock',
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div className="table__action">
|
|
|
|
<button
|
|
|
|
type="button"
|
|
|
|
className={`btn btn-sm ${buttonProps.className}`}
|
|
|
|
onClick={() => handleClick(buttonProps.type, ip)}
|
|
|
|
disabled={processing}
|
|
|
|
>
|
|
|
|
<Trans>{buttonProps.text}</Trans>
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2020-02-04 12:48:07 +00:00
|
|
|
const isBlockedClient = (clients, ip) => !!(clients && clients.includes(ip));
|
|
|
|
|
|
|
|
const clientCell = (t, toggleClientStatus, processing, disallowedClients) =>
|
2019-08-27 13:43:58 +00:00
|
|
|
function cell(row) {
|
2020-02-04 12:48:07 +00:00
|
|
|
const { value } = row;
|
|
|
|
const blocked = isBlockedClient(disallowedClients, value);
|
2020-01-30 10:58:54 +00:00
|
|
|
|
2019-09-23 13:02:47 +00:00
|
|
|
return (
|
2020-01-30 10:58:54 +00:00
|
|
|
<Fragment>
|
|
|
|
<div className="logs__row logs__row--overflow logs__row--column">
|
|
|
|
{formatClientCell(row, t)}
|
|
|
|
</div>
|
|
|
|
{renderBlockingButton(blocked, value, toggleClientStatus, processing)}
|
|
|
|
</Fragment>
|
2019-09-23 13:02:47 +00:00
|
|
|
);
|
2019-08-27 13:43:58 +00:00
|
|
|
};
|
2019-08-22 13:10:47 +00:00
|
|
|
|
2019-08-27 13:43:58 +00:00
|
|
|
const Clients = ({
|
2020-01-30 10:58:54 +00:00
|
|
|
t,
|
|
|
|
refreshButton,
|
|
|
|
topClients,
|
|
|
|
subtitle,
|
|
|
|
dnsQueries,
|
|
|
|
toggleClientStatus,
|
|
|
|
processingAccessSet,
|
2020-02-04 12:48:07 +00:00
|
|
|
disallowedClients,
|
2019-08-27 13:43:58 +00:00
|
|
|
}) => (
|
|
|
|
<Card
|
|
|
|
title={t('top_clients')}
|
|
|
|
subtitle={subtitle}
|
|
|
|
bodyType="card-table"
|
|
|
|
refresh={refreshButton}
|
|
|
|
>
|
|
|
|
<ReactTable
|
2020-01-30 10:58:54 +00:00
|
|
|
data={topClients.map(({
|
|
|
|
name: ip, count, info, blocked,
|
|
|
|
}) => ({
|
2019-08-27 13:43:58 +00:00
|
|
|
ip,
|
|
|
|
count,
|
2019-11-28 14:59:55 +00:00
|
|
|
info,
|
2020-01-30 10:58:54 +00:00
|
|
|
blocked,
|
2019-08-27 13:43:58 +00:00
|
|
|
}))}
|
|
|
|
columns={[
|
|
|
|
{
|
|
|
|
Header: 'IP',
|
|
|
|
accessor: 'ip',
|
|
|
|
sortMethod: (a, b) =>
|
|
|
|
parseInt(a.replace(/\./g, ''), 10) - parseInt(b.replace(/\./g, ''), 10),
|
2020-02-04 12:48:07 +00:00
|
|
|
Cell: clientCell(t, toggleClientStatus, processingAccessSet, disallowedClients),
|
2019-08-27 13:43:58 +00:00
|
|
|
},
|
|
|
|
{
|
|
|
|
Header: <Trans>requests_count</Trans>,
|
|
|
|
accessor: 'count',
|
2019-09-24 12:28:59 +00:00
|
|
|
minWidth: 180,
|
|
|
|
maxWidth: 200,
|
2019-08-27 13:43:58 +00:00
|
|
|
Cell: countCell(dnsQueries),
|
|
|
|
},
|
|
|
|
]}
|
|
|
|
showPagination={false}
|
|
|
|
noDataText={t('no_clients_found')}
|
|
|
|
minRows={6}
|
2019-10-10 10:55:32 +00:00
|
|
|
defaultPageSize={100}
|
2020-01-30 10:58:54 +00:00
|
|
|
className="-highlight card-table-overflow clients__table"
|
|
|
|
getTrProps={(_state, rowInfo) => {
|
|
|
|
if (!rowInfo) {
|
|
|
|
return {};
|
|
|
|
}
|
|
|
|
|
2020-02-04 12:48:07 +00:00
|
|
|
const { ip } = rowInfo.original;
|
2020-01-30 10:58:54 +00:00
|
|
|
|
2020-02-04 12:48:07 +00:00
|
|
|
if (isBlockedClient(disallowedClients, ip)) {
|
2020-01-30 10:58:54 +00:00
|
|
|
return {
|
|
|
|
className: 'red',
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
return {
|
|
|
|
className: '',
|
|
|
|
};
|
|
|
|
}}
|
2019-08-27 13:43:58 +00:00
|
|
|
/>
|
|
|
|
</Card>
|
|
|
|
);
|
2018-08-30 14:25:33 +00:00
|
|
|
|
|
|
|
Clients.propTypes = {
|
2019-08-22 13:10:47 +00:00
|
|
|
topClients: PropTypes.array.isRequired,
|
2018-10-12 13:02:01 +00:00
|
|
|
dnsQueries: PropTypes.number.isRequired,
|
|
|
|
refreshButton: PropTypes.node.isRequired,
|
2019-03-20 14:04:32 +00:00
|
|
|
clients: PropTypes.array.isRequired,
|
2019-05-23 11:14:22 +00:00
|
|
|
autoClients: PropTypes.array.isRequired,
|
2019-08-22 13:10:47 +00:00
|
|
|
subtitle: PropTypes.string.isRequired,
|
|
|
|
t: PropTypes.func.isRequired,
|
2020-01-30 10:58:54 +00:00
|
|
|
toggleClientStatus: PropTypes.func.isRequired,
|
|
|
|
processingAccessSet: PropTypes.bool.isRequired,
|
2020-02-04 12:48:07 +00:00
|
|
|
disallowedClients: PropTypes.string.isRequired,
|
2018-08-30 14:25:33 +00:00
|
|
|
};
|
|
|
|
|
2018-10-25 06:52:03 +00:00
|
|
|
export default withNamespaces()(Clients);
|