all: sync with master; upd chlog

2023-10-18 17:04:44 +03:00
parent c6aed4eb57
commit b21e19a223
60 changed files with 648 additions and 371 deletions
--- a/client/src/components/Dashboard/BlockedDomains.js
+++ b/client/src/components/Dashboard/BlockedDomains.js
@@ -8,7 +8,7 @@ import Cell from '../ui/Cell';
 import DomainCell from './DomainCell';

 import { getPercent } from '../../helpers/helpers';
-import { STATUS_COLORS } from '../../helpers/constants';
+import { DASHBOARD_TABLES_DEFAULT_PAGE_SIZE, STATUS_COLORS, TABLES_MIN_ROWS } from '../../helpers/constants';

 const CountCell = (totalBlocked) => function cell(row) {
    const { value } = row;
@@ -62,8 +62,8 @@ const BlockedDomains = ({
                ]}
                showPagination={false}
                noDataText={t('no_domains_found')}
-                minRows={6}
-                defaultPageSize={100}
+                minRows={TABLES_MIN_ROWS}
+                defaultPageSize={DASHBOARD_TABLES_DEFAULT_PAGE_SIZE}
                className="-highlight card-table-overflow--limited stats__table"
            />
        </Card>
--- a/client/src/components/Dashboard/Clients.js
+++ b/client/src/components/Dashboard/Clients.js
@@ -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';
@@ -9,10 +9,16 @@ import Card from '../ui/Card';
 import Cell from '../ui/Cell';

 import { getPercent, sortIp } from '../../helpers/helpers';
-import { BLOCK_ACTIONS, STATUS_COLORS } from '../../helpers/constants';
+import {
+    BLOCK_ACTIONS,
+    DASHBOARD_TABLES_DEFAULT_PAGE_SIZE,
+    STATUS_COLORS,
+    TABLES_MIN_ROWS,
+} 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 +46,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 +66,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>
    );
 };
@@ -134,8 +164,8 @@ const Clients = ({
                ]}
                showPagination={false}
                noDataText={t('no_clients_found')}
-                minRows={6}
-                defaultPageSize={100}
+                minRows={TABLES_MIN_ROWS}
+                defaultPageSize={DASHBOARD_TABLES_DEFAULT_PAGE_SIZE}
                className="-highlight card-table-overflow--limited clients__table"
                getTrProps={(_state, rowInfo) => {
                    if (!rowInfo) {
--- a/client/src/components/Dashboard/Counters.js
+++ b/client/src/components/Dashboard/Counters.js
@@ -4,9 +4,9 @@ import { Trans, useTranslation } from 'react-i18next';
 import round from 'lodash/round';
 import { shallowEqual, useSelector } from 'react-redux';
 import Card from '../ui/Card';
-import { formatNumber } from '../../helpers/helpers';
+import { formatNumber, msToDays, msToHours } from '../../helpers/helpers';
 import LogsSearchLink from '../ui/LogsSearchLink';
-import { RESPONSE_FILTER, DAY } from '../../helpers/constants';
+import { RESPONSE_FILTER, TIME_UNITS } from '../../helpers/constants';
 import Tooltip from '../ui/Tooltip';

 const Row = ({
@@ -52,14 +52,19 @@ const Counters = ({ refreshButton, subtitle }) => {
        numReplacedParental,
        numReplacedSafesearch,
        avgProcessingTime,
+        timeUnits,
    } = useSelector((state) => state.stats, shallowEqual);
    const { t } = useTranslation();
-    const days = interval / DAY;
+
+    const dnsQueryTooltip = timeUnits === TIME_UNITS.HOURS
+        ? t('number_of_dns_query_hours', { count: msToHours(interval) })
+        : t('number_of_dns_query_days', { count: msToDays(interval) });
+
    const rows = [
        {
            label: 'dns_query',
            count: numDnsQueries,
-            tooltipTitle: days === 1 ? 'number_of_dns_query_24_hours' : t('number_of_dns_query_days', { count: days }),
+            tooltipTitle: dnsQueryTooltip,
            response_status: RESPONSE_FILTER.ALL.QUERY,
        },
        {
--- a/client/src/components/Dashboard/Dashboard.css
+++ b/client/src/components/Dashboard/Dashboard.css
@@ -28,11 +28,14 @@
    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 {
+    outline: 0;
+    box-shadow: none;
 }

 .page-title--dashboard {
--- a/client/src/components/Dashboard/QueriedDomains.js
+++ b/client/src/components/Dashboard/QueriedDomains.js
@@ -7,7 +7,7 @@ import Card from '../ui/Card';
 import Cell from '../ui/Cell';
 import DomainCell from './DomainCell';

-import { STATUS_COLORS } from '../../helpers/constants';
+import { DASHBOARD_TABLES_DEFAULT_PAGE_SIZE, STATUS_COLORS, TABLES_MIN_ROWS } from '../../helpers/constants';
 import { getPercent } from '../../helpers/helpers';

 const getQueriedPercentColor = (percent) => {
@@ -58,8 +58,8 @@ const QueriedDomains = ({
            ]}
            showPagination={false}
            noDataText={t('no_domains_found')}
-            minRows={6}
-            defaultPageSize={100}
+            minRows={TABLES_MIN_ROWS}
+            defaultPageSize={DASHBOARD_TABLES_DEFAULT_PAGE_SIZE}
            className="-highlight card-table-overflow--limited stats__table"
        />
    </Card>
--- a/client/src/components/Dashboard/UpstreamAvgTime.js
+++ b/client/src/components/Dashboard/UpstreamAvgTime.js
@@ -6,6 +6,7 @@ import { withTranslation, Trans } from 'react-i18next';

 import Card from '../ui/Card';
 import DomainCell from './DomainCell';
+import { DASHBOARD_TABLES_DEFAULT_PAGE_SIZE, TABLES_MIN_ROWS } from '../../helpers/constants';

 const TimeCell = ({ value }) => {
    if (!value) {
@@ -62,8 +63,8 @@ const UpstreamAvgTime = ({
            ]}
            showPagination={false}
            noDataText={t('no_upstreams_data_found')}
-            minRows={6}
-            defaultPageSize={100}
+            minRows={TABLES_MIN_ROWS}
+            defaultPageSize={DASHBOARD_TABLES_DEFAULT_PAGE_SIZE}
            className="-highlight card-table-overflow--limited stats__table"
        />
    </Card>
--- a/client/src/components/Dashboard/UpstreamResponses.js
+++ b/client/src/components/Dashboard/UpstreamResponses.js
@@ -8,7 +8,7 @@ import Cell from '../ui/Cell';
 import DomainCell from './DomainCell';

 import { getPercent } from '../../helpers/helpers';
-import { STATUS_COLORS } from '../../helpers/constants';
+import { DASHBOARD_TABLES_DEFAULT_PAGE_SIZE, STATUS_COLORS, TABLES_MIN_ROWS } from '../../helpers/constants';

 const CountCell = (totalBlocked) => (
    function cell(row) {
@@ -64,8 +64,8 @@ const UpstreamResponses = ({
            ]}
            showPagination={false}
            noDataText={t('no_upstreams_data_found')}
-            minRows={6}
-            defaultPageSize={100}
+            minRows={TABLES_MIN_ROWS}
+            defaultPageSize={DASHBOARD_TABLES_DEFAULT_PAGE_SIZE}
            className="-highlight card-table-overflow--limited stats__table"
        />
    </Card>
--- a/client/src/components/Dashboard/index.js
+++ b/client/src/components/Dashboard/index.js
@@ -9,7 +9,12 @@ import Counters from './Counters';
 import Clients from './Clients';
 import QueriedDomains from './QueriedDomains';
 import BlockedDomains from './BlockedDomains';
-import { DISABLE_PROTECTION_TIMINGS, ONE_SECOND_IN_MS, SETTINGS_URLS } from '../../helpers/constants';
+import {
+    DISABLE_PROTECTION_TIMINGS,
+    ONE_SECOND_IN_MS,
+    SETTINGS_URLS,
+    TIME_UNITS,
+} from '../../helpers/constants';
 import {
    msToSeconds,
    msToMinutes,
@@ -46,15 +51,12 @@ const Dashboard = ({
        getAllStats();
    }, []);
    const getSubtitle = () => {
-        const ONE_DAY = 1;
-        const intervalInDays = msToDays(stats.interval);
-
-        if (intervalInDays < ONE_DAY) {
+        if (!stats.enabled) {
            return t('stats_disabled_short');
        }

-        return intervalInDays === ONE_DAY
-            ? t('for_last_24_hours')
+        return stats.timeUnits === TIME_UNITS.HOURS
+            ? t('for_last_hours', { count: msToHours(stats.interval) })
            : t('for_last_days', { count: msToDays(stats.interval) });
    };