+client: "Drill down" to activity reports

Close #1625

Squashed commit of the following:

commit a01f12c4e5831c43dbe3ae8a80f4db12077dbb2a
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Mon Jul 13 15:50:15 2020 +0300

    minor

commit b8ceb17a3b12e47de81af85fa30c2961a4a42fab
Merge: 702c55ed fecf5494
Author: Andrey Meshkov <am@adguard.com>
Date:   Mon Jul 13 15:32:44 2020 +0300

    Merge branch 'feature/1625' of ssh://bit.adguard.com:7999/dns/adguard-home into feature/1625

commit 702c55edc1ba2ab330eda8189498dfff33c92f5f
Author: Andrey Meshkov <am@adguard.com>
Date:   Mon Jul 13 15:32:41 2020 +0300

    fix makefile when there's no gopath

commit fecf5494b8c1719cb70044f336fe99c341802d25
Merge: d4c811f9 8a417604
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Mon Jul 13 15:30:21 2020 +0300

    Merge branch 'master' into feature/1625

commit d4c811f9630dee448012434e2f50f34ab8b8b899
Merge: b0a037da a33164bf
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Mon Jul 13 12:35:16 2020 +0300

    Merge branch 'master' into feature/1625

commit b0a037daf48913fd8a4cda16d520835630072520
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Mon Jul 13 12:34:42 2020 +0300

    Simplify sync logs action creators

commit eeeb620ae100a554f59783fc2a14fad525ce1a82
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Mon Jul 13 11:17:08 2020 +0300

    Review changes

commit 4cbc59eec5c794df18d6cb9b33f39091ce7cfde9
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Fri Jul 10 15:23:37 2020 +0300

    Update tracker tooltip class

commit 0a705301d4726af1c8f7f7a5776b11d338ab1d54
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Fri Jul 10 13:46:10 2020 +0300

    Replace depricated addListener

commit 2ac0843239853da1725d2e038b5e4cbaef253732
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Fri Jul 10 13:39:45 2020 +0300

    Validate response_status url param

commit 2178039ebbd0cbe2c0048cb5ab7ad7c7e7571bd1
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Fri Jul 10 12:58:18 2020 +0300

    Fix setting empty search value, use strict search on drill down, extract refreshFilteredLogs action

commit 4b11c6a34049bd133077bad035d267f87cdec141
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Thu Jul 9 19:41:48 2020 +0300

    Normalize input search

commit 3fded3575b21bdd017723f5e487c268074599e4f
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Thu Jul 9 18:20:05 2020 +0300

    Optimize search

commit 9073e032e4aadcdef9d826f16a10c300ee46b30e
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Thu Jul 9 14:28:41 2020 +0300

    Update url string params

commit a18cffc8bfac83103fb78ffae2f786f89aea8ba1
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Thu Jul 9 12:55:50 2020 +0300

    Fix reset search

commit 33f769aed56369aacedd29ffd52b527b527d4a59
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Wed Jul 8 19:13:21 2020 +0300

    WIP: Add permlinks

commit 4422641cf5cff06c8485ea23d58e5d42f7cca5cd
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Wed Jul 8 14:42:28 2020 +0300

    Refactor Counters, add response_status links to query log

commit e8bb0b70ca55f31ef3fcdda13dcaad6f5d8479b5
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Tue Jul 7 19:33:04 2020 +0300

    Delete unnecessary file

commit b20816e9dad79866e3ec04d3093c972967b3b226
Merge: 6281084e d2c3af5c
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Tue Jul 7 19:30:44 2020 +0300

    Resolve conflict

commit d2c3af5cf227d76f876d6d94ca016d4b242b2515
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Tue Jul 7 17:14:51 2020 +0300

    + client: Add git hooks

... and 5 more commits

client/src/components/ui/Cell.js

@@ -1,30 +1,32 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-
+import LogsSearchLink from './LogsSearchLink';
 import { formatNumber } from '../../helpers/helpers';
 
-const Cell = ({ value, percent, color }) => (
-    <div className="stats__row">
-        <div className="stats__row-value mb-1">
-            <strong>{formatNumber(value)}</strong>
-            <small className="ml-3 text-muted">{percent}%</small>
-        </div>
-        <div className="progress progress-xs">
-            <div
-                className="progress-bar"
-                style={{
-                    width: `${percent}%`,
-                    backgroundColor: color,
-                }}
-            />
-        </div>
+const Cell = ({
+    value, percent, color, search,
+}) => <div className="stats__row">
+    <div className="stats__row-value mb-1">
+        <strong><LogsSearchLink search={search}>{formatNumber(value)}</LogsSearchLink></strong>
+        <small className="ml-3 text-muted">{percent}%</small>
     </div>
-);
+    <div className="progress progress-xs">
+        <div
+            className="progress-bar"
+            style={{
+                width: `${percent}%`,
+                backgroundColor: color,
+            }}
+        />
+    </div>
+</div>;
 
 Cell.propTypes = {
     value: PropTypes.number.isRequired,
     percent: PropTypes.number.isRequired,
     color: PropTypes.string.isRequired,
+    search: PropTypes.string,
+    onSearchRedirect: PropTypes.func,
 };
 
 export default Cell;

client/src/components/ui/IconTooltip.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import './IconTooltip.css';
+import { useTranslation } from 'react-i18next';
+
+const IconTooltip = ({ text, type = '' }) => {
+    const { t } = useTranslation();
+
+    return <div data-tooltip={t(text)}
+                className={`tooltip-custom ml-1 ${type}`} />;
+};
+
+IconTooltip.propTypes = {
+    text: PropTypes.string.isRequired,
+    type: PropTypes.string,
+};
+
+export default IconTooltip;

client/src/components/ui/LogsSearchLink.css

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

client/src/components/ui/LogsSearchLink.js

@@ -0,0 +1,33 @@
+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';
+
+const LogsSearchLink = ({
+    search = '', response_status = '', children, link = MENU_URLS.logs,
+}) => {
+    const { t } = useTranslation();
+
+    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>;
+};
+
+LogsSearchLink.propTypes = {
+    children: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.number,
+        PropTypes.element]).isRequired,
+    search: PropTypes.string,
+    response_status: PropTypes.string,
+    link: PropTypes.string,
+};
+
+export default LogsSearchLink;

client/src/components/ui/Tooltip.js

@@ -1,14 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import './Tooltip.css';
-
-const Tooltip = ({ text, type = '' }) => <div data-tooltip={text}
-                                              className={`tooltip-custom ml-1 ${type}`} />;
-
-Tooltip.propTypes = {
-    text: PropTypes.string.isRequired,
-    type: PropTypes.string,
-};
-
-export default Tooltip;