+
{renderFormattedClientCell(value, info, true)}
{renderBlockingButton(value)}
diff --git a/client/src/components/Header/Header.css b/client/src/components/Header/Header.css
index b67840f3..a5fe802e 100644
--- a/client/src/components/Header/Header.css
+++ b/client/src/components/Header/Header.css
@@ -164,6 +164,10 @@
color: #9aa0ac;
}
+ .nav-icon--white {
+ color: #fff;
+ }
+
.header-brand-img {
height: 32px;
}
diff --git a/client/src/components/Logs/Cells/ClientCell.js b/client/src/components/Logs/Cells/ClientCell.js
index 93830faa..fd9875bf 100644
--- a/client/src/components/Logs/Cells/ClientCell.js
+++ b/client/src/components/Logs/Cells/ClientCell.js
@@ -1,14 +1,16 @@
-import React from 'react';
+import React, { useState } from 'react';
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
import { nanoid } from 'nanoid';
import classNames from 'classnames';
import { useTranslation } from 'react-i18next';
import propTypes from 'prop-types';
-import { checkFiltered } from '../../../helpers/helpers';
+import { checkFiltered, getBlockingClientName } from '../../../helpers/helpers';
import { BLOCK_ACTIONS } from '../../../helpers/constants';
-import { toggleBlocking } from '../../../actions';
+import { toggleBlocking, toggleBlockingForClient } from '../../../actions';
import IconTooltip from './IconTooltip';
import { renderFormattedClientCell } from '../../../helpers/renderFormattedClientCell';
+import { toggleClientBlock } from '../../../actions/access';
+import { getBlockClientInfo } from './helpers';
const ClientCell = ({
client,
@@ -22,6 +24,12 @@ const ClientCell = ({
const autoClients = useSelector((state) => state.dashboard.autoClients, shallowEqual);
const processingRules = useSelector((state) => state.filtering.processingRules);
const isDetailed = useSelector((state) => state.queryLogs.isDetailed);
+ const [isOptionsOpened, setOptionsOpened] = useState(false);
+
+ const disallowed_clients = useSelector(
+ (state) => state.access.disallowed_clients,
+ shallowEqual,
+ );
const autoClient = autoClients.find((autoClient) => autoClient.name === client);
const source = autoClient?.source;
@@ -53,22 +61,81 @@ const ClientCell = ({
const renderBlockingButton = (isFiltered, domain) => {
const buttonType = isFiltered ? BLOCK_ACTIONS.UNBLOCK : BLOCK_ACTIONS.BLOCK;
+ const clients = useSelector((state) => state.dashboard.clients);
- const buttonClass = classNames('btn btn-sm logs__cell--block-button', {
- 'btn-outline-secondary': isFiltered,
- 'btn-outline-danger': !isFiltered,
- });
+ const {
+ confirmMessage,
+ buttonKey: blockingClientKey,
+ type,
+ } = getBlockClientInfo(client, disallowed_clients);
+
+ const blockingForClientKey = isFiltered ? 'unblock_for_this_client_only' : 'block_for_this_client_only';
+ const clientNameBlockingFor = getBlockingClientName(clients, client);
+
+ const BUTTON_OPTIONS_TO_ACTION_MAP = {
+ [blockingForClientKey]: () => {
+ dispatch(toggleBlockingForClient(buttonType, domain, clientNameBlockingFor));
+ },
+ [blockingClientKey]: () => {
+ const message = `${type === BLOCK_ACTIONS.BLOCK ? t('adg_will_drop_dns_queries') : ''} ${t(confirmMessage, { ip: client })}`;
+ if (window.confirm(message)) {
+ dispatch(toggleClientBlock(type, client));
+ }
+ },
+ };
const onClick = () => dispatch(toggleBlocking(buttonType, domain));
- return
;
+ const getOptions = (optionToActionMap) => {
+ const options = Object.entries(optionToActionMap);
+ if (options.length === 0) {
+ return null;
+ }
+ return <>{options
+ .map(([name, onClick]) =>
{t(name)}
+
)};
+ };
+
+ const content = getOptions(BUTTON_OPTIONS_TO_ACTION_MAP);
+
+ const buttonClass = classNames('button-action button-action--main', {
+ 'button-action--unblock': isFiltered,
+ 'button-action--with-options': content,
+ 'button-action--active': isOptionsOpened,
+ });
+
+ const buttonArrowClass = classNames('button-action button-action--arrow', {
+ 'button-action--unblock': isFiltered,
+ 'button-action--active': isOptionsOpened,
+ });
+
+ const containerClass = classNames('button-action__container', {
+ 'button-action__container--detailed': isDetailed,
+ });
+
+ return
+
+ {content && }
+
;
};
return
@@ -81,9 +148,7 @@ const ClientCell = ({
{isDetailed && name && !whoisAvailable
&&
- {name}
-
}
+ title={name}>{name}