Add links to all the dashboard things

client/src/components/Dashboard/Counters.js

@@ -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 = {

client/src/components/Dashboard/DomainCell.js

@@ -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"

client/src/components/Dashboard/Statistics.js

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

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