mirrors
/
AdGuardHome
mirror of https://github.com/AdguardTeam/AdGuardHome.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge: + client: handle client block and unblock from the top clients table 

Closes #896

Squashed commit of the following:

commit 776de2ae0a62823b8968cff79a9fa7ba350d7f1c
Author: Ildar Kamalov <i.kamalov@adguard.com>
Date:   Thu Jan 30 11:13:41 2020 +0300

    - client: fix normalizeTextarea and blocking button

commit 399e6bc3893093632b09247eaf6493521a668c84
Author: Ildar Kamalov <i.kamalov@adguard.com>
Date:   Wed Jan 29 17:19:50 2020 +0300

    + client: handle client block and unblock from the top clients table
This commit is contained in:
Ildar Kamalov 2020-01-30 13:58:54 +03:00
parent 76be272787
commit 5c814b29e1
14 changed files with 195 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
client/.eslintrc vendored
View File

@ -48,6 +48,7 @@
"camelcase": "off",
"no-console": ["warn", { "allow": ["warn", "error"] }],
"import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
"import/prefer-default-export": "off"
"import/prefer-default-export": "off",
"no-alert": "off"
}
}

6
client/src/__locales/en.json
View File

@ -458,5 +458,9 @@
"check_reason": "Reason: {{reason}}",
"check_rule": "Rule: {{rule}}",
"check_service": "Service name: {{service}}",
"check_not_found": "Doesn't exist in any filter"
"check_not_found": "Doesn't exist in any filter",
"client_confirm_block": "Are you sure you want to block the client \"{{ip}}\"?",
"client_confirm_unblock": "Are you sure you want to unblock the client \"{{ip}}\"?",
"client_blocked": "Client \"{{ip}}\" successfully blocked",
"client_unblocked": "Client \"{{ip}}\" successfully unblocked"
}

50
client/src/actions/access.js
View File

@ -1,7 +1,11 @@
import { createAction } from 'redux-actions';
import { t } from 'i18next';
import apiClient from '../api/Api';
import { addErrorToast, addSuccessToast } from './index';
import { getStats, getStatsConfig } from './stats';
import { normalizeTextarea } from '../helpers/helpers';
import { ACTION } from '../helpers/constants';
export const getAccessListRequest = createAction('GET_ACCESS_LIST_REQUEST');
export const getAccessListFailure = createAction('GET_ACCESS_LIST_FAILURE');
@ -28,9 +32,9 @@ export const setAccessList = config => async (dispatch) => {
const { allowed_clients, disallowed_clients, blocked_hosts } = config;
const values = {
allowed_clients: (allowed_clients && normalizeTextarea(allowed_clients)) || [],
disallowed_clients: (disallowed_clients && normalizeTextarea(disallowed_clients)) || [],
blocked_hosts: (blocked_hosts && normalizeTextarea(blocked_hosts)) || [],
allowed_clients: normalizeTextarea(allowed_clients),
disallowed_clients: normalizeTextarea(disallowed_clients),
blocked_hosts: normalizeTextarea(blocked_hosts),
};
await apiClient.setAccessList(values);
@ -41,3 +45,43 @@ export const setAccessList = config => async (dispatch) => {
dispatch(setAccessListFailure());
}
};
export const toggleClientBlockRequest = createAction('TOGGLE_CLIENT_BLOCK_REQUEST');
export const toggleClientBlockFailure = createAction('TOGGLE_CLIENT_BLOCK_FAILURE');
export const toggleClientBlockSuccess = createAction('TOGGLE_CLIENT_BLOCK_SUCCESS');
export const toggleClientBlock = (type, ip) => async (dispatch, getState) => {
dispatch(toggleClientBlockRequest());
try {
const { allowed_clients, disallowed_clients, blocked_hosts } = getState().access;
let updatedDisallowedClients = normalizeTextarea(disallowed_clients);
if (type === ACTION.unblock && updatedDisallowedClients.includes(ip)) {
updatedDisallowedClients = updatedDisallowedClients.filter(client => client !== ip);
} else if (type === ACTION.block && !updatedDisallowedClients.includes(ip)) {
updatedDisallowedClients.push(ip);
}
const values = {
allowed_clients: normalizeTextarea(allowed_clients),
blocked_hosts: normalizeTextarea(blocked_hosts),
disallowed_clients: updatedDisallowedClients,
};
await apiClient.setAccessList(values);
dispatch(toggleClientBlockSuccess());
if (type === ACTION.unblock) {
dispatch(addSuccessToast(t('client_unblocked', { ip })));
} else if (type === ACTION.block) {
dispatch(addSuccessToast(t('client_blocked', { ip })));
}
dispatch(getStats());
dispatch(getStatsConfig());
dispatch(getAccessList());
} catch (error) {
dispatch(addErrorToast({ error }));
dispatch(toggleClientBlockFailure());
}
};

16
client/src/actions/index.js
View File

@ -289,12 +289,8 @@ export const setUpstream = config => async (dispatch) => {
dispatch(setUpstreamRequest());
try {
const values = { ...config };
values.bootstrap_dns = (
values.bootstrap_dns && normalizeTextarea(values.bootstrap_dns)
) || [];
values.upstream_dns = (
values.upstream_dns && normalizeTextarea(values.upstream_dns)
) || [];
values.bootstrap_dns = normalizeTextarea(values.bootstrap_dns);
values.upstream_dns = normalizeTextarea(values.upstream_dns);
await apiClient.setUpstream(values);
dispatch(addSuccessToast('updated_upstream_dns_toast'));
@ -313,12 +309,8 @@ export const testUpstream = config => async (dispatch) => {
dispatch(testUpstreamRequest());
try {
const values = { ...config };
values.bootstrap_dns = (
values.bootstrap_dns && normalizeTextarea(values.bootstrap_dns)
) || [];
values.upstream_dns = (
values.upstream_dns && normalizeTextarea(values.upstream_dns)
) || [];
values.bootstrap_dns = normalizeTextarea(values.bootstrap_dns);
values.upstream_dns = normalizeTextarea(values.upstream_dns);
const upstreamResponse = await apiClient.testUpstream(values);
const testMessages = Object.keys(upstreamResponse).map((key) => {

7
client/src/actions/stats.js
View File

@ -2,7 +2,7 @@ import { createAction } from 'redux-actions';
import apiClient from '../api/Api';
import { addErrorToast, addSuccessToast } from './index';
import { normalizeTopStats, secondsToMilliseconds, getParamsForClientsSearch, addClientInfo } from '../helpers/helpers';
import { normalizeTopStats, secondsToMilliseconds, getParamsForClientsSearch, addClientInfo, addClientStatus } from '../helpers/helpers';
export const getStatsConfigRequest = createAction('GET_STATS_CONFIG_REQUEST');
export const getStatsConfigFailure = createAction('GET_STATS_CONFIG_FAILURE');
@ -46,12 +46,15 @@ export const getStats = () => async (dispatch) => {
const normalizedTopClients = normalizeTopStats(stats.top_clients);
const clientsParams = getParamsForClientsSearch(normalizedTopClients, 'name');
const clients = await apiClient.findClients(clientsParams);
const accessData = await apiClient.getAccessList();
const { disallowed_clients } = accessData;
const topClientsWithInfo = addClientInfo(normalizedTopClients, clients, 'name');
const topClientsWithStatus = addClientStatus(topClientsWithInfo, disallowed_clients, 'name');
const normalizedStats = {
...stats,
top_blocked_domains: normalizeTopStats(stats.top_blocked_domains),
top_clients: topClientsWithInfo,
top_clients: topClientsWithStatus,
top_queried_domains: normalizeTopStats(stats.top_queried_domains),
avg_processing_time: secondsToMilliseconds(stats.avg_processing_time),
};

2
client/src/components/Dashboard/BlockedDomains.js
View File

@ -58,7 +58,7 @@ const BlockedDomains = ({
noDataText={t('no_domains_found')}
minRows={6}
defaultPageSize={100}
className="-striped -highlight card-table-overflow stats__table"
className="-highlight card-table-overflow stats__table"
/>
</Card>
);

77
client/src/components/Dashboard/Clients.js
View File

@ -1,4 +1,4 @@
import React from 'react';
import React, { Fragment } from 'react';
import ReactTable from 'react-table';
import PropTypes from 'prop-types';
import { Trans, withNamespaces } from 'react-i18next';
@ -28,17 +28,58 @@ const countCell = dnsQueries =>
return <Cell value={value} percent={percent} color={percentColor} />;
};
const clientCell = t =>
function cell(row) {
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>
);
};
const clientCell = (t, toggleClientStatus, processing) =>
function cell(row) {
const { original, value } = row;
const { blocked } = original;
return (
<Fragment>
<div className="logs__row logs__row--overflow logs__row--column">
{formatClientCell(row, t)}
</div>
{renderBlockingButton(blocked, value, toggleClientStatus, processing)}
</Fragment>
);
};
const Clients = ({
t, refreshButton, topClients, subtitle, dnsQueries,
t,
refreshButton,
topClients,
subtitle,
dnsQueries,
toggleClientStatus,
processingAccessSet,
}) => (
<Card
title={t('top_clients')}
@ -47,10 +88,13 @@ const Clients = ({
refresh={refreshButton}
>
<ReactTable
data={topClients.map(({ name: ip, count, info }) => ({
data={topClients.map(({
name: ip, count, info, blocked,
}) => ({
ip,
count,
info,
blocked,
}))}
columns={[
{
@ -58,7 +102,7 @@ const Clients = ({
accessor: 'ip',
sortMethod: (a, b) =>
parseInt(a.replace(/\./g, ''), 10) - parseInt(b.replace(/\./g, ''), 10),
Cell: clientCell(t),
Cell: clientCell(t, toggleClientStatus, processingAccessSet),
},
{
Header: <Trans>requests_count</Trans>,
@ -72,7 +116,24 @@ const Clients = ({
noDataText={t('no_clients_found')}
minRows={6}
defaultPageSize={100}
className="-striped -highlight card-table-overflow"
className="-highlight card-table-overflow clients__table"
getTrProps={(_state, rowInfo) => {
if (!rowInfo) {
return {};
}
const { blocked } = rowInfo.original;
if (blocked) {
return {
className: 'red',
};
}
return {
className: '',
};
}}
/>
</Card>
);
@ -85,6 +146,8 @@ Clients.propTypes = {
autoClients: PropTypes.array.isRequired,
subtitle: PropTypes.string.isRequired,
t: PropTypes.func.isRequired,
toggleClientStatus: PropTypes.func.isRequired,
processingAccessSet: PropTypes.bool.isRequired,
};
export default withNamespaces()(Clients);

2
client/src/components/Dashboard/QueriedDomains.js
View File

@ -59,7 +59,7 @@ const QueriedDomains = ({
noDataText={t('no_domains_found')}
minRows={6}
defaultPageSize={100}
className="-striped -highlight card-table-overflow stats__table"
className="-highlight card-table-overflow stats__table"
/>
</Card>
);

21
client/src/components/Dashboard/index.js
View File

@ -10,6 +10,7 @@ import BlockedDomains from './BlockedDomains';
import PageTitle from '../ui/PageTitle';
import Loading from '../ui/Loading';
import { ACTION } from '../../helpers/constants';
import './Dashboard.css';
class Dashboard extends Component {
@ -39,9 +40,20 @@ class Dashboard extends Component {
);
};
toggleClientStatus = (type, ip) => {
const confirmMessage = type === ACTION.block ? 'client_confirm_block' : 'client_confirm_unblock';
if (window.confirm(this.props.t(confirmMessage, { ip }))) {
this.props.toggleClientBlock(type, ip);
}
};
render() {
const { dashboard, stats, t } = this.props;
const statsProcessing = stats.processingStats || stats.processingGetConfig;
const {
dashboard, stats, access, t,
} = this.props;
const statsProcessing = stats.processingStats
|| stats.processingGetConfig;
const subtitle =
stats.interval === 1
@ -116,6 +128,8 @@ class Dashboard extends Component {
clients={dashboard.clients}
autoClients={dashboard.autoClients}
refreshButton={refreshButton}
toggleClientStatus={this.toggleClientStatus}
processingAccessSet={access.processingSet}
/>
</div>
<div className="col-lg-6">
@ -146,11 +160,14 @@ class Dashboard extends Component {
Dashboard.propTypes = {
dashboard: PropTypes.object.isRequired,
stats: PropTypes.object.isRequired,
access: PropTypes.object.isRequired,
getStats: PropTypes.func.isRequired,
getStatsConfig: PropTypes.func.isRequired,
toggleProtection: PropTypes.func.isRequired,
getClients: PropTypes.func.isRequired,
t: PropTypes.func.isRequired,
toggleClientBlock: PropTypes.func.isRequired,
getAccessList: PropTypes.func.isRequired,
};
export default withNamespaces()(Dashboard);

11
client/src/components/Logs/Logs.css
View File

@ -61,9 +61,10 @@
margin-right: 5px;
}
.logs__action {
.logs__action,
.table__action {
position: absolute;
top: 10px;
top: 11px;
right: 15px;
background-color: #fff;
border-radius: 4px;
@ -72,11 +73,13 @@
opacity: 0;
}
.logs__table .rt-td {
.logs__table .rt-td,
.clients__table .rt-td {
position: relative;
}
.logs__table .rt-tr:hover .logs__action {
.logs__table .rt-tr:hover .logs__action,
.clients__table .rt-tr:hover .table__action {
visibility: visible;
opacity: 1;
}

7
client/src/containers/Dashboard.js
View File

@ -1,11 +1,12 @@
import { connect } from 'react-redux';
import { toggleProtection, getClients } from '../actions';
import { getStats, getStatsConfig, setStatsConfig } from '../actions/stats';
import { toggleClientBlock, getAccessList } from '../actions/access';
import Dashboard from '../components/Dashboard';
const mapStateToProps = (state) => {
const { dashboard, stats } = state;
const props = { dashboard, stats };
const { dashboard, stats, access } = state;
const props = { dashboard, stats, access };
return props;
};
@ -15,6 +16,8 @@ const mapDispatchToProps = {
getStats,
getStatsConfig,
setStatsConfig,
toggleClientBlock,
getAccessList,
};
export default connect(

5
client/src/helpers/constants.js
View File

@ -456,3 +456,8 @@ export const DETAILED_DATE_FORMAT_OPTIONS = {
};
export const CUSTOM_FILTERING_RULES_ID = 0;
export const ACTION = {
block: 'block',
unblock: 'unblock',
};

19
client/src/helpers/helpers.js
View File

@ -122,6 +122,17 @@ export const addClientInfo = (data, clients, param) => (
})
);
export const addClientStatus = (data, disallowedClients, param) => (
data.map((row) => {
const clientIp = row[param];
const blocked = !!(disallowedClients && disallowedClients.includes(clientIp));
return {
...row,
blocked,
};
})
);
export const normalizeFilteringStatus = (filteringStatus) => {
const {
enabled, filters, user_rules: userRules, interval,
@ -275,7 +286,13 @@ export const redirectToCurrentProtocol = (values, httpPort = 80) => {
}
};
export const normalizeTextarea = text => text && text.replace(/[;, ]/g, '\n').split('\n').filter(n => n);
export const normalizeTextarea = (text) => {
if (!text) {
return [];
}
return text.replace(/[;, ]/g, '\n').split('\n').filter(n => n);
};
/**
* Normalizes the topClients array

4
client/src/reducers/access.js
View File

@ -31,6 +31,10 @@ const access = handleActions(
};
return newState;
},
[actions.toggleClientBlockRequest]: state => ({ ...state, processingSet: true }),
[actions.toggleClientBlockFailure]: state => ({ ...state, processingSet: false }),
[actions.toggleClientBlockSuccess]: state => ({ ...state, processingSet: false }),
},
{
processing: true,