diff --git a/client/src/components/Dashboard/Statistics.js b/client/src/components/Dashboard/Statistics.js index 25c6093a..94c31112 100644 --- a/client/src/components/Dashboard/Statistics.js +++ b/client/src/components/Dashboard/Statistics.js @@ -1,9 +1,11 @@ import React from 'react'; import PropTypes from 'prop-types'; +import { Link } from 'react-router-dom'; import { withTranslation, Trans } from 'react-i18next'; import StatsCard from './StatsCard'; import { getPercent, normalizeHistory } from '../../helpers/helpers'; +import { RESPONSE_FILTER } from '../../helpers/constants'; const getNormalizedHistory = (data, interval, id) => [ { data: normalizeHistory(data, interval), id }, @@ -25,7 +27,7 @@ const Statistics = ({ <StatsCard total={numDnsQueries} lineData={getNormalizedHistory(dnsQueries, interval, 'dnsQuery')} - title={<Trans>dns_query</Trans>} + title={<Link to="logs"><Trans>dns_query</Trans></Link>} color="blue" /> </div> @@ -34,7 +36,7 @@ const Statistics = ({ total={numBlockedFiltering} lineData={getNormalizedHistory(blockedFiltering, interval, 'blockedFiltering')} percent={getPercent(numDnsQueries, numBlockedFiltering)} - title={<Trans components={[<a href="#filters" key="0">link</a>]}>blocked_by</Trans>} + title={<Trans components={[<Link to={`logs?response_status=${RESPONSE_FILTER.BLOCKED.QUERY}`} key="0">link</Link>]}>blocked_by</Trans>} color="red" /> </div> @@ -47,7 +49,7 @@ const Statistics = ({ 'replacedSafebrowsing', )} percent={getPercent(numDnsQueries, numReplacedSafebrowsing)} - title={<Trans>stats_malware_phishing</Trans>} + title={<Link to={`logs?response_status=${RESPONSE_FILTER.BLOCKED_THREATS.QUERY}`}><Trans>stats_malware_phishing</Trans></Link>} color="green" /> </div> @@ -56,7 +58,7 @@ const Statistics = ({ total={numReplacedParental} lineData={getNormalizedHistory(replacedParental, interval, 'replacedParental')} percent={getPercent(numDnsQueries, numReplacedParental)} - title={<Trans>stats_adult</Trans>} + title={<Link to={`logs?response_status=${RESPONSE_FILTER.BLOCKED_ADULT_WEBSITES.QUERY}`}><Trans>stats_adult</Trans></Link>} color="yellow" /> </div> diff --git a/client/src/components/ui/LogsSearchLink.css b/client/src/components/ui/LogsSearchLink.css deleted file mode 100644 index 1649e1af..00000000 --- a/client/src/components/ui/LogsSearchLink.css +++ /dev/null @@ -1,7 +0,0 @@ -.stats__link { - color: inherit; -} - -.stats__link:hover { - cursor: pointer; -} diff --git a/client/src/components/ui/LogsSearchLink.js b/client/src/components/ui/LogsSearchLink.js index 692f78d2..ba5970c2 100644 --- a/client/src/components/ui/LogsSearchLink.js +++ b/client/src/components/ui/LogsSearchLink.js @@ -2,7 +2,6 @@ import React from 'react'; import { Link } from 'react-router-dom'; import PropTypes from 'prop-types'; import { useTranslation } from 'react-i18next'; -import './LogsSearchLink.css'; import { getLogsUrlParams } from '../../helpers/helpers'; import { MENU_URLS } from '../../helpers/constants'; @@ -13,11 +12,16 @@ const LogsSearchLink = ({ const to = link === MENU_URLS.logs ? `${MENU_URLS.logs}${getLogsUrlParams(search && `"${search}"`, response_status)}` : link; - return <Link to={to} - className={'stats__link'} - tabIndex={0} - title={t('click_to_view_queries')} - aria-label={t('click_to_view_queries')}>{children}</Link>; + return ( + <Link + to={to} + tabIndex={0} + title={t('click_to_view_queries')} + aria-label={t('click_to_view_queries')} + > + {children} + </Link> + ); }; LogsSearchLink.propTypes = { diff --git a/client/src/helpers/renderFormattedClientCell.js b/client/src/helpers/renderFormattedClientCell.js index f7e59a84..88c85bd7 100644 --- a/client/src/helpers/renderFormattedClientCell.js +++ b/client/src/helpers/renderFormattedClientCell.js @@ -1,4 +1,5 @@ import React from 'react'; +import { Link } from 'react-router-dom'; import { normalizeWhois } from './helpers'; import { WHOIS_ICONS } from './constants'; @@ -63,7 +64,7 @@ export const renderFormattedClientCell = (value, info, isDetailed = false, isLog } return <div className="logs__text mw-100" title={value}> - {nameContainer} + <Link to={`logs?search=${encodeURIComponent(value)}`}>{nameContainer}</Link> {whoisContainer} </div>; };