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

client/.eslintrc

@@ -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"
     }
 }

client/src/__locales/en.json

@@ -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"
 }

client/src/actions/access.js

@@ -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)) || [],
+            allowed_clients: normalizeTextarea(allowed_clients),
-            disallowed_clients: (disallowed_clients && normalizeTextarea(disallowed_clients)) || [],
+            disallowed_clients: normalizeTextarea(disallowed_clients),
-            blocked_hosts: (blocked_hosts && normalizeTextarea(blocked_hosts)) || [],
+            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());
+    }
+};

client/src/actions/index.js

@@ -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.bootstrap_dns && normalizeTextarea(values.bootstrap_dns)
+        values.upstream_dns = normalizeTextarea(values.upstream_dns);
-        ) || [];
-        values.upstream_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.bootstrap_dns && normalizeTextarea(values.bootstrap_dns)
+        values.upstream_dns = normalizeTextarea(values.upstream_dns);
-        ) || [];
-        values.upstream_dns = (
-            values.upstream_dns && normalizeTextarea(values.upstream_dns)
-        ) || [];
 
         const upstreamResponse = await apiClient.testUpstream(values);
         const testMessages = Object.keys(upstreamResponse).map((key) => {

client/src/actions/stats.js

@@ -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),
         };

client/src/components/Dashboard/BlockedDomains.js

@@ -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>
     );

client/src/components/Dashboard/Clients.js

@@ -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 =>
+const renderBlockingButton = (blocked, ip, handleClick, processing) => {
-    function cell(row) {
+    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="logs__row logs__row--overflow logs__row--column">
+        <div className="table__action">
-                {formatClientCell(row, t)}
+            <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);

client/src/components/Dashboard/QueriedDomains.js

@@ -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>
 );

client/src/components/Dashboard/index.js

@@ -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 {
-        const statsProcessing = stats.processingStats || stats.processingGetConfig;
+            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);

client/src/components/Logs/Logs.css

@@ -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;
 }

client/src/containers/Dashboard.js

@@ -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 { dashboard, stats, access } = state;
-    const props = { dashboard, stats };
+    const props = { dashboard, stats, access };
     return props;
 };
 
@@ -15,6 +16,8 @@ const mapDispatchToProps = {
     getStats,
     getStatsConfig,
     setStatsConfig,
+    toggleClientBlock,
+    getAccessList,
 };
 
 export default connect(

client/src/helpers/constants.js

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

client/src/helpers/helpers.js

@@ -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

client/src/reducers/access.js

@@ -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,