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/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) => {
+    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 (
-            <div className="logs__row logs__row--overflow logs__row--column">
-                {formatClientCell(row, t)}
-            </div>
+            <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 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);

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