Pull request: client: add links to the query log from dashboard

Updates #3245.

Squashed commit of the following:

commit 32ca6e12f34e78ab51501f27609ed21fd5a1d1e7
Merge: b5cd0bee 77c70193
Author: Ainar Garipov <A.Garipov@AdGuard.COM>
Date:   Tue Jun 29 17:06:50 2021 +0300

    Merge branch 'master' into 3245-imp-dashboard

commit b5cd0beea03d39a65f97922e3cdbc6af3e19ffdc
Author: Ildar Kamalov <ik@adguard.com>
Date:   Tue Jun 29 16:16:45 2021 +0300

    client: remove links from labels

commit 3a3003aeed737819888a6974c878b88aa6abee38
Merge: 2dc1a5f8 90a85362
Author: Ainar Garipov <A.Garipov@AdGuard.COM>
Date:   Tue Jun 22 13:42:21 2021 +0300

    Merge branch 'master' into 3245-imp-dashboard

commit 2dc1a5f8b936c771cb0c7c26a529c824d0e445a2
Author: Ildar Kamalov <ik@adguard.com>
Date:   Fri Jun 11 19:24:12 2021 +0300

    client: get response status from const

commit 1bb9dc2abd6e9f2263fca09fed4d393f1969446c
Merge: 137dcb05 12f1e4ed
Author: Ildar Kamalov <ik@adguard.com>
Date:   Fri Jun 11 19:08:24 2021 +0300

    Merge branch 'master' into 3245-imp-dashboard

commit 137dcb058ef31d61f630e304a11ef974b0548fc8
Author: Mark Hicken <mhicken@adobe.com>
Date:   Tue Jun 8 15:05:17 2021 -0600

    Add links to all the dashboard things

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>

client/src/components/ui/LogsSearchLink.css

@@ -1,7 +0,0 @@
-.stats__link {
-    color: inherit;
-}
-
-.stats__link:hover {
-    cursor: pointer;
-}

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}
+    return (
-                 className={'stats__link'}
+        <Link
-                 tabIndex={0}
+            to={to}
-                 title={t('click_to_view_queries')}
+            tabIndex={0}
-                 aria-label={t('click_to_view_queries')}>{children}</Link>;
+            title={t('click_to_view_queries')}
+            aria-label={t('click_to_view_queries')}
+        >
+            {children}
+        </Link>
+    );
 };
 
 LogsSearchLink.propTypes = {

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