Merge branch 'master' into ADG-7473-1

CHANGELOG.md

@@ -23,13 +23,22 @@ See also the [v0.107.40 GitHub milestone][ms-v0.107.40].
 NOTE: Add new changes BELOW THIS COMMENT.
 -->
 
+### Changed
+
+- "Block" and "Unblock" buttons of the query log moved to the tooltip menu ([#684]).
+
 ### Fixed
 
 - Dashboard tables scroll issue ([#6180]).
 - Issues with QUIC and HTTP/3 upstreams on FreeBSD ([#6301]).
 - Panic on clearing query log ([#6304]).
+- The time shown in the statistics is one hour less than the current time ([#6296]).
+- Issues with QUIC and HTTP/3 upstreams on FreeBSD ([#6301]).
+- Panic on clearing query log ([#6304]).
 
+[#684]: https://github.com/AdguardTeam/AdGuardHome/issues/684
 [#6180]: https://github.com/AdguardTeam/AdGuardHome/issues/6180
+[#6296]: https://github.com/AdguardTeam/AdGuardHome/issues/6296
 [#6301]: https://github.com/AdguardTeam/AdGuardHome/issues/6301
 [#6304]: https://github.com/AdguardTeam/AdGuardHome/issues/6304
 

client/src/__locales/en.json

@@ -119,7 +119,8 @@
     "stats_malware_phishing": "Blocked malware/phishing",
     "stats_adult": "Blocked adult websites",
     "stats_query_domain": "Top queried domains",
-    "for_last_24_hours": "for the last 24 hours",
+    "for_last_hours": "for the last {{count}} hour",
+    "for_last_hours_plural": "for the last {{count}} hours",
     "for_last_days": "for the last {{count}} day",
     "for_last_days_plural": "for the last {{count}} days",
     "stats_disabled": "The statistics have been disabled. You can turn it on from the <0>settings page</0>.",
@@ -134,7 +135,8 @@
     "no_upstreams_data_found": "No upstreams data found",
     "number_of_dns_query_days": "The number of DNS queries processed for the last {{count}} day",
     "number_of_dns_query_days_plural": "The number of DNS queries processed for the last {{count}} days",
-    "number_of_dns_query_24_hours": "The number of DNS queries processed for the last 24 hours",
+    "number_of_dns_query_hours": "The number of DNS queries processed for the last {{count}} hour",
+    "number_of_dns_query_hours_plural": "The number of DNS queries processed for the last {{count}} hours",
     "number_of_dns_query_blocked_24_hours": "The number of DNS requests blocked by adblock filters and hosts blocklists",
     "number_of_dns_query_blocked_24_hours_by_sec": "The number of DNS requests blocked by the AdGuard browsing security module",
     "number_of_dns_query_blocked_24_hours_adult": "The number of adult websites blocked",

client/src/components/App/index.css

@@ -134,15 +134,6 @@ body {
     cursor: not-allowed;
 }
 
-.button-action {
-    visibility: hidden;
-}
-
-.logs__row:hover .button-action,
-.button-action--active {
-    visibility: visible;
-}
-
 .ReactModal__Body--open {
     overflow: hidden;
 }

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';
@@ -18,6 +18,7 @@ import {
 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) {
@@ -45,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;
@@ -67,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>
     );
 };

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,
         },
         {

client/src/components/Dashboard/Dashboard.css

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

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

client/src/components/Logs/Cells/ClientCell.js

@@ -26,9 +26,7 @@ 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 processingSet = useSelector((state) => state.access.processingSet);
     const allowedСlients = useSelector((state) => state.access.allowed_clients, shallowEqual);
     const [isOptionsOpened, setOptionsOpened] = useState(false);
 
@@ -84,11 +82,23 @@ const ClientCell = ({
         const blockingForClientKey = isFiltered ? 'unblock_for_this_client_only' : 'block_for_this_client_only';
         const clientNameBlockingFor = getBlockingClientName(clients, client);
 
+        const onClick = async () => {
+            await dispatch(toggleBlocking(buttonType, domain));
+            await dispatch(getStats());
+            setOptionsOpened(false);
+        };
+
         const BUTTON_OPTIONS = [
+            {
+                name: buttonType,
+                onClick,
+                className: isFiltered ? 'bg--green' : 'bg--danger',
+            },
             {
                 name: blockingForClientKey,
                 onClick: () => {
                     dispatch(toggleBlockingForClient(buttonType, domain, clientNameBlockingFor));
+                    setOptionsOpened(false);
                 },
             },
             {
@@ -101,27 +111,25 @@ const ClientCell = ({
                             client_info?.disallowed_rule || '',
                         ));
                         await dispatch(updateLogs());
+                        setOptionsOpened(false);
                     }
                 },
-                disabled: processingSet || lastRuleInAllowlist,
+                disabled: lastRuleInAllowlist,
             },
         ];
 
-        const onClick = async () => {
-            await dispatch(toggleBlocking(buttonType, domain));
-            await dispatch(getStats());
-        };
-
         const getOptions = (options) => {
             if (options.length === 0) {
                 return null;
             }
             return (
                 <>
-                    {options.map(({ name, onClick, disabled }) => (
+                    {options.map(({
+                        name, onClick, disabled, className,
+                    }) => (
                         <button
                             key={name}
-                            className="button-action--arrow-option px-4 py-1"
+                            className={classNames('button-action--arrow-option px-4 py-1', className)}
                             onClick={onClick}
                             disabled={disabled}
                         >
@@ -134,17 +142,6 @@ const ClientCell = ({
 
         const content = getOptions(BUTTON_OPTIONS);
 
-        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,
         });
@@ -153,25 +150,26 @@ const ClientCell = ({
             <div className={containerClass}>
                 <button
                     type="button"
-                    className={buttonClass}
-                    onClick={onClick}
-                    disabled={processingRules}
+                    className="btn btn-icon btn-sm px-0"
+                    onClick={() => setOptionsOpened(true)}
                 >
-                    {t(buttonType)}
+                    <svg className="icon24 icon--lightgray button-action__icon">
+                        <use xlinkHref="#bullets" />
+                    </svg>
                 </button>
-                {content && (
-                    <button className={buttonArrowClass} disabled={processingRules}>
-                        <IconTooltip
-                            className="icon24"
-                            tooltipClass="button-action--arrow-option-container"
-                            xlinkHref="chevron-down"
-                            triggerClass="button-action--icon"
-                            content={content}
-                            placement="bottom-end"
-                            trigger="click"
-                            onVisibilityChange={setOptionsOpened}
-                        />
-                    </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={content}
+                        placement="bottom-end"
+                        trigger="click"
+                        onVisibilityChange={setOptionsOpened}
+                        defaultTooltipShown={true}
+                        delayHide={0}
+                    />
                 )}
             </div>
         );
@@ -198,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}
                     >

client/src/components/Logs/Cells/IconTooltip.css

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

client/src/components/Logs/Cells/IconTooltip.js

@@ -21,6 +21,8 @@ const IconTooltip = ({
     content,
     trigger,
     onVisibilityChange,
+    defaultTooltipShown,
+    delayHide,
     renderContent = content ? React.Children.map(
         processContent(content),
         (item, idx) => <div key={idx} className={contentItemClass}>
@@ -44,6 +46,8 @@ const IconTooltip = ({
         trigger={trigger}
         onVisibilityChange={onVisibilityChange}
         delayShow={trigger === 'click' ? 0 : SHOW_TOOLTIP_DELAY}
+        delayHide={delayHide}
+        defaultTooltipShown={defaultTooltipShown}
     >
         {xlinkHref && <svg className={className}>
             <use xlinkHref={`#${xlinkHref}`} />
@@ -65,6 +69,8 @@ IconTooltip.propTypes = {
     content: PropTypes.node,
     renderContent: PropTypes.arrayOf(PropTypes.element),
     onVisibilityChange: PropTypes.func,
+    defaultTooltipShown: PropTypes.bool,
+    delayHide: PropTypes.number,
 };
 
 export default IconTooltip;