daxi20/AdGuardHome
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

6296 fix charts and custom retention labels

Browse Source 
Updates #6296

Squashed commit of the following:

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

    changelog

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

    changelog

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

    ADG-7598 fix charts and custom retention labels
This commit is contained in:
Ildar Kamalov
2023-10-16 10:06:37 +03:00
parent 506d71310c
commit 733d6c1fca
7 changed files with 46 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
client/src/components/Dashboard/Counters.js
View File

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

16
client/src/components/Dashboard/index.js
View File

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

15
client/src/components/ui/Line.js
View File

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