6296 fix charts and custom retention labels

Updates #6296

Squashed commit of the following:

commit e6a36f1
Author: Ildar Kamalov <ik@adguard.com>
Date:   Fri Oct 13 17:42:41 2023 +0300

    changelog

commit 96f11f2
Author: Ildar Kamalov <ik@adguard.com>
Date:   Fri Oct 13 16:01:27 2023 +0300

    changelog

commit 136fb14
Author: Ildar Kamalov <ik@adguard.com>
Date:   Fri Oct 13 15:20:14 2023 +0300

    ADG-7598 fix charts and custom retention labels

CHANGELOG.md

@@ -25,9 +25,11 @@ NOTE: Add new changes BELOW THIS COMMENT.
 
 ### Fixed
 
+- 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]).
 
+[#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/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/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/ui/Line.js

@@ -1,20 +1,21 @@
 import React from 'react';
 import { ResponsiveLine } from '@nivo/line';
 import addDays from 'date-fns/add_days';
-import addHours from 'date-fns/add_hours';
 import subDays from 'date-fns/sub_days';
 import subHours from 'date-fns/sub_hours';
 import dateFormat from 'date-fns/format';
 import round from 'lodash/round';
 import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 import './Line.css';
-import { msToDays } from '../../helpers/helpers';
+import { msToDays, msToHours } from '../../helpers/helpers';
+import { TIME_UNITS } from '../../helpers/constants';
 
 const Line = ({
     data, color = 'black',
 }) => {
-    const interval = msToDays(useSelector((state) => state.stats.interval));
+    const interval = useSelector((state) => state.stats.interval);
+    const timeUnits = useSelector((state) => state.stats.timeUnits);
 
     return <ResponsiveLine
         enableArea
@@ -44,12 +45,12 @@ const Line = ({
         enableGridY={false}
         enablePoints={false}
         xFormat={(x) => {
-            if (interval >= 0 && interval <= 7) {
-                const hoursAgo = subHours(Date.now(), 24 * interval);
-                return dateFormat(addHours(hoursAgo, x), 'D MMM HH:00');
+            if (timeUnits === TIME_UNITS.HOURS) {
+                const hoursAgo = msToHours(interval) - x - 1;
+                return dateFormat(subHours(Date.now(), hoursAgo), 'D MMM HH:00');
             }
 
-            const daysAgo = subDays(Date.now(), interval - 1);
+            const daysAgo = subDays(Date.now(), msToDays(interval) - 1);
             return dateFormat(addDays(daysAgo, x), 'D MMM YYYY');
         }}
         yFormat={(y) => round(y, 2)}

client/src/helpers/constants.js

@@ -554,3 +554,8 @@ export const DISABLE_PROTECTION_TIMINGS = {
 };
 
 export const LOCAL_TIMEZONE_VALUE = 'Local';
+
+export const TIME_UNITS = {
+    HOURS: 'hours',
+    DAYS: 'days',
+};

client/src/reducers/stats.js

@@ -1,6 +1,11 @@
 import { handleActions } from 'redux-actions';
 import { normalizeTopClients } from '../helpers/helpers';
-import { DAY, HOUR, STATS_INTERVALS_DAYS } from '../helpers/constants';
+import {
+    DAY,
+    HOUR,
+    STATS_INTERVALS_DAYS,
+    TIME_UNITS,
+} from '../helpers/constants';
 
 import * as actions from '../actions/stats';
 
@@ -18,6 +23,7 @@ const defaultStats = {
     numReplacedSafebrowsing: 0,
     numReplacedSafesearch: 0,
     avgProcessingTime: 0,
+    timeUnits: TIME_UNITS.HOURS,
 };
 
 const stats = handleActions(
@@ -60,6 +66,7 @@ const stats = handleActions(
                 avg_processing_time: avgProcessingTime,
                 top_upstreams_responses: topUpstreamsResponses,
                 top_upstrems_avg_time: topUpstreamsAvgTime,
+                time_units: timeUnits,
             } = payload;
 
             const newState = {
@@ -81,6 +88,7 @@ const stats = handleActions(
                 avgProcessingTime,
                 topUpstreamsResponses,
                 topUpstreamsAvgTime,
+                timeUnits,
             };
 
             return newState;