Add links to all the dashboard things

This commit is contained in:
Mark Hicken 2021-06-08 15:05:17 -06:00
parent 4700dea92b
commit 137dcb058e
4 changed files with 22 additions and 9 deletions

View file

@ -1,5 +1,6 @@
import React from 'react';
import propTypes from 'prop-types';
import { Link } from 'react-router-dom';
import { Trans, useTranslation } from 'react-i18next';
import round from 'lodash/round';
import { shallowEqual, useSelector } from 'react-redux';
@ -10,7 +11,7 @@ import { RESPONSE_FILTER } from '../../helpers/constants';
import Tooltip from '../ui/Tooltip';
const Row = ({
label, count, response_status, tooltipTitle, translationComponents,
label, count, response_status, tooltipTitle, translationComponents, href,
}) => {
const content = response_status
? <LogsSearchLink response_status={response_status}>{formatNumber(count)}</LogsSearchLink>
@ -18,7 +19,11 @@ const Row = ({
return <tr key={label}>
<td>
{href ? (
<Link to={href}><Trans components={translationComponents}>{label}</Trans></Link>
) : (
<Trans components={translationComponents}>{label}</Trans>
)}
<Tooltip content={tooltipTitle} placement="top"
className="tooltip-container tooltip-custom--narrow text-center">
<svg className="icons icon--20 icon--lightgray ml-2">
@ -48,31 +53,35 @@ const Counters = ({ refreshButton, subtitle }) => {
count: numDnsQueries,
tooltipTitle: interval === 1 ? 'number_of_dns_query_24_hours' : t('number_of_dns_query_days', { count: interval }),
response_status: RESPONSE_FILTER.ALL.QUERY,
href: 'logs',
},
{
label: 'blocked_by',
count: numBlockedFiltering,
tooltipTitle: 'number_of_dns_query_blocked_24_hours',
response_status: RESPONSE_FILTER.BLOCKED.QUERY,
translationComponents: [<a href="#filters" key="0">link</a>],
translationComponents: [<Link to="logs?response_status=filtered" key="0">link</Link>],
},
{
label: 'stats_malware_phishing',
count: numReplacedSafebrowsing,
tooltipTitle: 'number_of_dns_query_blocked_24_hours_by_sec',
response_status: RESPONSE_FILTER.BLOCKED_THREATS.QUERY,
href: 'logs?response_status=blocked_safebrowsing',
},
{
label: 'stats_adult',
count: numReplacedParental,
tooltipTitle: 'number_of_dns_query_blocked_24_hours_adult',
response_status: RESPONSE_FILTER.BLOCKED_ADULT_WEBSITES.QUERY,
href: 'logs?response_status=blocked_parental',
},
{
label: 'enforced_save_search',
count: numReplacedSafesearch,
tooltipTitle: 'number_of_dns_query_to_safe_search',
response_status: RESPONSE_FILTER.SAFE_SEARCH.QUERY,
href: 'logs?response_status=safe_search',
},
{
label: 'average_processing_time',
@ -101,6 +110,7 @@ Row.propTypes = {
response_status: propTypes.string,
tooltipTitle: propTypes.string.isRequired,
translationComponents: propTypes.arrayOf(propTypes.element),
href: propTypes.string,
};
Counters.propTypes = {

View file

@ -1,5 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import { Trans } from 'react-i18next';
import { getSourceData, getTrackerData } from '../../helpers/trackers/trackers';
@ -53,7 +54,7 @@ const DomainCell = ({ value }) => {
return (
<div className="logs__row">
<div className="logs__text" title={value}>
{value}
<Link to={`logs?search=${encodeURIComponent(value)}`}>{value}</Link>
</div>
{trackerData
&& <Tooltip content={content} placement="top"

View file

@ -1,5 +1,6 @@
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';
@ -25,7 +26,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 +35,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=filtered" key="0">link</Link>]}>blocked_by</Trans>}
color="red"
/>
</div>
@ -47,7 +48,7 @@ const Statistics = ({
'replacedSafebrowsing',
)}
percent={getPercent(numDnsQueries, numReplacedSafebrowsing)}
title={<Trans>stats_malware_phishing</Trans>}
title={<Link to="logs?response_status=blocked_safebrowsing"><Trans>stats_malware_phishing</Trans></Link>}
color="green"
/>
</div>
@ -56,7 +57,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=blocked_parental"><Trans>stats_adult</Trans></Link>}
color="yellow"
/>
</div>

View file

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