From 733d6c1fcad696a37e75c5a0d19f8fe75eb3b017 Mon Sep 17 00:00:00 2001 From: Ildar Kamalov Date: Mon, 16 Oct 2023 10:06:37 +0300 Subject: [PATCH] 6296 fix charts and custom retention labels Updates #6296 Squashed commit of the following: commit e6a36f107b7bdd17fe4141b035fe5c1f6edd5c6c Author: Ildar Kamalov Date: Fri Oct 13 17:42:41 2023 +0300 changelog commit 96f11f2090d2aff600f6dcd6ca601e25cd857530 Author: Ildar Kamalov Date: Fri Oct 13 16:01:27 2023 +0300 changelog commit 136fb14f61dcb2bdec3bc9b8943a05544752a606 Author: Ildar Kamalov Date: Fri Oct 13 15:20:14 2023 +0300 ADG-7598 fix charts and custom retention labels --- CHANGELOG.md | 2 ++ client/src/__locales/en.json | 6 ++++-- client/src/components/Dashboard/Counters.js | 13 +++++++++---- client/src/components/Dashboard/index.js | 16 +++++++++------- client/src/components/ui/Line.js | 15 ++++++++------- client/src/helpers/constants.js | 5 +++++ client/src/reducers/stats.js | 10 +++++++++- 7 files changed, 46 insertions(+), 21 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index caa96295..cb067fe8 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/client/src/__locales/en.json b/client/src/__locales/en.json index c7e9fe46..5f5a9ca8 100644 --- a/client/src/__locales/en.json +++ b/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.", @@ -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", diff --git a/client/src/components/Dashboard/Counters.js b/client/src/components/Dashboard/Counters.js index 69702c32..2a27c9c4 100644 --- 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, }, { diff --git a/client/src/components/Dashboard/index.js b/client/src/components/Dashboard/index.js index c0c88a0e..f4a780a7 100644 --- 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) }); }; diff --git a/client/src/components/ui/Line.js b/client/src/components/ui/Line.js index 6e13b2e3..636eb62a 100644 --- a/client/src/components/ui/Line.js +++ b/client/src/components/ui/Line.js @@ -1,7 +1,6 @@ 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'; @@ -9,12 +8,14 @@ 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 { - 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)} diff --git a/client/src/helpers/constants.js b/client/src/helpers/constants.js index 1f72fc51..6f14926b 100644 --- a/client/src/helpers/constants.js +++ b/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', +}; diff --git a/client/src/reducers/stats.js b/client/src/reducers/stats.js index a7baeabe..a5c0e3fc 100644 --- a/client/src/reducers/stats.js +++ b/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;