fix dashboard clients table block/unblock button
This commit is contained in:
parent
ef5d72fd7c
commit
0fce61dfad
|
@ -1,4 +1,4 @@
|
|||
import React from 'react';
|
||||
import React, { useState } from 'react';
|
||||
import ReactTable from 'react-table';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Trans, useTranslation } from 'react-i18next';
|
||||
|
@ -13,6 +13,7 @@ import { BLOCK_ACTIONS, STATUS_COLORS } from '../../helpers/constants';
|
|||
import { toggleClientBlock } from '../../actions/access';
|
||||
import { renderFormattedClientCell } from '../../helpers/renderFormattedClientCell';
|
||||
import { getStats } from '../../actions/stats';
|
||||
import IconTooltip from '../Logs/Cells/IconTooltip';
|
||||
|
||||
const getClientsPercentColor = (percent) => {
|
||||
if (percent > 50) {
|
||||
|
@ -40,9 +41,7 @@ const renderBlockingButton = (ip, disallowed, disallowed_rule) => {
|
|||
const processingSet = useSelector((state) => state.access.processingSet);
|
||||
const allowedСlients = useSelector((state) => state.access.allowed_clients, shallowEqual);
|
||||
|
||||
const buttonClass = classNames('button-action button-action--main', {
|
||||
'button-action--unblock': disallowed,
|
||||
});
|
||||
const [isOptionsOpened, setOptionsOpened] = useState(false);
|
||||
|
||||
const toggleClientStatus = async (ip, disallowed, disallowed_rule) => {
|
||||
let confirmMessage;
|
||||
|
@ -62,23 +61,49 @@ const renderBlockingButton = (ip, disallowed, disallowed_rule) => {
|
|||
}
|
||||
};
|
||||
|
||||
const onClick = () => toggleClientStatus(ip, disallowed, disallowed_rule);
|
||||
const onClick = () => {
|
||||
toggleClientStatus(ip, disallowed, disallowed_rule);
|
||||
setOptionsOpened(false);
|
||||
};
|
||||
|
||||
const text = disallowed ? BLOCK_ACTIONS.UNBLOCK : BLOCK_ACTIONS.BLOCK;
|
||||
|
||||
const lastRuleInAllowlist = !disallowed && allowedСlients === disallowed_rule;
|
||||
const disabled = processingSet || lastRuleInAllowlist;
|
||||
return (
|
||||
<div className="table__action pl-4">
|
||||
<div className="table__action">
|
||||
<button
|
||||
type="button"
|
||||
className={buttonClass}
|
||||
onClick={onClick}
|
||||
disabled={disabled}
|
||||
title={lastRuleInAllowlist ? t('last_rule_in_allowlist', { disallowed_rule }) : ''}
|
||||
className="btn btn-icon btn-sm px-0"
|
||||
onClick={() => setOptionsOpened(true)}
|
||||
>
|
||||
<Trans>{text}</Trans>
|
||||
<svg className="icon24 icon--lightgray button-action__icon">
|
||||
<use xlinkHref="#bullets" />
|
||||
</svg>
|
||||
</button>
|
||||
{isOptionsOpened && (
|
||||
<IconTooltip
|
||||
className="icon24"
|
||||
tooltipClass="button-action--arrow-option-container"
|
||||
xlinkHref="bullets"
|
||||
triggerClass="btn btn-icon btn-sm px-0 button-action__hidden-trigger"
|
||||
content={(
|
||||
<button
|
||||
className={classNames('button-action--arrow-option px-4 py-1', disallowed ? 'bg--green' : 'bg--danger')}
|
||||
onClick={onClick}
|
||||
disabled={disabled}
|
||||
title={lastRuleInAllowlist ? t('last_rule_in_allowlist', { disallowed_rule }) : ''}
|
||||
>
|
||||
<Trans>{text}</Trans>
|
||||
</button>
|
||||
)}
|
||||
placement="bottom-end"
|
||||
trigger="click"
|
||||
onVisibilityChange={setOptionsOpened}
|
||||
defaultTooltipShown={true}
|
||||
delayHide={0}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -28,11 +28,13 @@
|
|||
border-bottom: 6px solid #585965;
|
||||
}
|
||||
|
||||
@media (max-width: 1279.98px) {
|
||||
.table__action {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
.table__action {
|
||||
position: relative;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.table__action .btn-icon {
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
.page-title--dashboard {
|
||||
|
|
|
@ -26,7 +26,6 @@ const ClientCell = ({
|
|||
const { t } = useTranslation();
|
||||
const dispatch = useDispatch();
|
||||
const autoClients = useSelector((state) => state.dashboard.autoClients, shallowEqual);
|
||||
const processingRules = useSelector((state) => state.filtering.processingRules);
|
||||
const isDetailed = useSelector((state) => state.queryLogs.isDetailed);
|
||||
const allowedСlients = useSelector((state) => state.access.allowed_clients, shallowEqual);
|
||||
const [isOptionsOpened, setOptionsOpened] = useState(false);
|
||||
|
@ -197,7 +196,7 @@ const ClientCell = ({
|
|||
</div>
|
||||
{isDetailed && clientName && !whoisAvailable && (
|
||||
<Link
|
||||
className="detailed-info d-none d-sm-block logs__text logs__text--link"
|
||||
className="detailed-info d-none d-sm-block logs__text logs__text--link logs__text--client"
|
||||
to={`logs?search="${encodeURIComponent(clientName)}"`}
|
||||
title={clientName}
|
||||
>
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
.tooltip-custom__container {
|
||||
min-width: 150px;
|
||||
padding: 1rem 1.5rem 1.25rem 1.5rem;
|
||||
font-size: 16px !important;
|
||||
box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.2);
|
||||
|
|
|
@ -80,6 +80,10 @@
|
|||
color: var(--gray-f3);
|
||||
}
|
||||
|
||||
.logs__text--client {
|
||||
padding-right: 32px;
|
||||
}
|
||||
|
||||
.icon--selected {
|
||||
background-color: var(--gray-f3);
|
||||
border: solid 1px var(--gray-d8);
|
||||
|
|
|
@ -43,7 +43,7 @@ export const renderFormattedClientCell = (value, info, isDetailed = false, isLog
|
|||
const whoisAvailable = whois_info && Object.keys(whois_info).length > 0;
|
||||
|
||||
if (name) {
|
||||
const nameValue = <div className="logs__text logs__text--link logs__text--nowrap" title={`${name} (${value})`}>
|
||||
const nameValue = <div className="logs__text logs__text--link logs__text--nowrap logs__text--client" title={`${name} (${value})`}>
|
||||
{name} <small>{`(${value})`}</small>
|
||||
</div>;
|
||||
|
||||
|
|
Loading…
Reference in New Issue