Pull request 743: + client: Query Logs Infinite Scroll

Merge in DNS/adguard-home from feature/infinite_scroll_query_logs to master Squashed commit of the following: commit 4407ef2e7c055066257da791fbd65e6b0a495729 Merge: 40b74522 0a4781be Author: ArtemBaskal <a.baskal@adguard.com> Date: Tue Sep 1 16:20:23 2020 +0300 Merge branch 'master' into feature/infinite_scroll_query_logs commit 40b745225112cf8d664220ed8f484b0aa16e997c Author: ArtemBaskal <a.baskal@adguard.com> Date: Tue Sep 1 15:46:27 2020 +0300 Remove dynamic translation of toasts commit f08fa7b8c6a243f6b10e924aebccc183ce7814fd Author: ArtemBaskal <a.baskal@adguard.com> Date: Tue Sep 1 13:59:53 2020 +0300 Remove renderLimitIdx, update isEntireLog commit 0f1b02616faaa5759c0a3f6d8257117fa22094d9 Author: ArtemBaskal <a.baskal@adguard.com> Date: Tue Sep 1 11:11:14 2020 +0300 Rename variables commit 0928570c689c1fa704af775382620d68893e7c1c Author: ArtemBaskal <a.baskal@adguard.com> Date: Tue Sep 1 11:06:50 2020 +0300 Make query logs short polling function more expressive commit 9e773cbd6c287a1c799fa2680f3462508462ea7a Author: ArtemBaskal <a.baskal@adguard.com> Date: Tue Sep 1 11:06:19 2020 +0300 Fix Toast translation interface commit f9c57033e5adc5788954cf086b2f114dd8938bcb Author: ArtemBaskal <a.baskal@adguard.com> Date: Mon Aug 31 17:01:36 2020 +0300 Do not hide loader commit b86ba48613437f5559a748ad9aa4cf79d15db082 Author: ArtemBaskal <a.baskal@adguard.com> Date: Mon Aug 31 16:56:34 2020 +0300 Add dynamic translation for all toasts commit b9d1d9b447ca90a3c179e503fa5d4abd3516321e Author: ArtemBaskal <a.baskal@adguard.com> Date: Mon Aug 31 16:39:29 2020 +0300 Prevent getting query logs recursion if query is not changed commit e25189749f7912648cca4503cfa8d0ad898c4bb6 Author: ArtemBaskal <a.baskal@adguard.com> Date: Mon Aug 31 10:13:20 2020 +0300 Decrease page limit to 20 commit 8b248ac5276899de838abf2dc9a69e47599cfc12 Author: ArtemBaskal <a.baskal@adguard.com> Date: Fri Aug 28 18:47:12 2020 +0300 Return checkFilteredLogs commit bf2d65c4a3dca0da6b15f632ae11042b7c8e2045 Author: ArtemBaskal <a.baskal@adguard.com> Date: Fri Aug 28 18:33:51 2020 +0300 Review changes commit 01b5250f9d9136a1f334086d3e2f00d1a928b37b Author: ArtemBaskal <a.baskal@adguard.com> Date: Fri Aug 28 15:29:59 2020 +0300 Remove checkFilteredLogs commit 25b364c41e6a1489d930c8b3b39b1ab43723f29d Merge: 1dc66034 2c666cbd Author: Andrey Meshkov <am@adguard.com> Date: Fri Aug 28 14:28:47 2020 +0300 Merge branch 'feature/infinite_scroll_query_logs' of ssh://bit.adguard.com:7999/dns/adguard-home into feature/infinite_scroll_query_logs commit 1dc6603421cde9847e792bfe77ff6546e53fbc2a Author: Andrey Meshkov <am@adguard.com> Date: Fri Aug 28 14:28:01 2020 +0300 disregard maxFileScanEntries only if offset is set commit bad741ed7f1dccf6959d43d000b8c0150f526f9e Author: Andrey Meshkov <am@adguard.com> Date: Fri Aug 28 11:57:45 2020 +0300 Fix search behavior when limit is specified commit 2c666cbdde465cf17434126830dd99ceedfc4cbc Author: ArtemBaskal <a.baskal@adguard.com> Date: Thu Aug 27 18:50:28 2020 +0300 Hide table ref loader during data loading commit 8b4f7fe642ef9e87a979813dcdbd7817d64c27f9 Author: ArtemBaskal <a.baskal@adguard.com> Date: Thu Aug 27 18:43:24 2020 +0300 Repair search commit 26fae1ae01a789999b8a2181d60b35663a20460a Author: ArtemBaskal <a.baskal@adguard.com> Date: Thu Aug 27 17:59:27 2020 +0300 Resetting initial render index, change loader position on search commit e2c97ae1a288438267eef9aec71b979319674a71 Author: ArtemBaskal <a.baskal@adguard.com> Date: Thu Aug 27 16:02:03 2020 +0300 Change isScrolledIntoView ... and 32 more commits
2020-09-01 16:30:30 +03:00
parent 0a4781be97
commit 6b61429572
74 changed files with 1449 additions and 1861 deletions
--- a/client/src/components/Logs/Cells/ClientCell.js
+++ b/client/src/components/Logs/Cells/ClientCell.js
@@ -0,0 +1,109 @@
+import React from 'react';
+import { shallowEqual, useDispatch, useSelector } from 'react-redux';
+import { nanoid } from 'nanoid';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import propTypes from 'prop-types';
+import { checkFiltered } from '../../../helpers/helpers';
+import { BLOCK_ACTIONS } from '../../../helpers/constants';
+import { toggleBlocking } from '../../../actions';
+import IconTooltip from './IconTooltip';
+import { renderFormattedClientCell } from '../../../helpers/renderFormattedClientCell';
+
+const ClientCell = ({
+    client,
+    domain,
+    info,
+    info: { name, whois_info },
+    reason,
+}) => {
+    const { t } = useTranslation();
+    const dispatch = useDispatch();
+    const autoClients = useSelector((state) => state.dashboard.autoClients, shallowEqual);
+    const processingRules = useSelector((state) => state.filtering.processingRules);
+    const isDetailed = useSelector((state) => state.queryLogs.isDetailed);
+
+    const autoClient = autoClients.find((autoClient) => autoClient.name === client);
+    const source = autoClient?.source;
+    const whoisAvailable = whois_info && Object.keys(whois_info).length > 0;
+
+    const id = nanoid();
+
+    const data = {
+        address: client,
+        name,
+        country: whois_info?.country,
+        city: whois_info?.city,
+        network: whois_info?.orgname,
+        source_label: source,
+    };
+
+    const processedData = Object.entries(data);
+
+    const isFiltered = checkFiltered(reason);
+
+    const nameClass = classNames('w-90 o-hidden d-flex flex-column', {
+        'mt-2': isDetailed && !name && !whoisAvailable,
+        'white-space--nowrap': isDetailed,
+    });
+
+    const hintClass = classNames('icons mr-4 icon--24 icon--lightgray', {
+        'my-3': isDetailed,
+    });
+
+    const renderBlockingButton = (isFiltered, domain) => {
+        const buttonType = isFiltered ? BLOCK_ACTIONS.UNBLOCK : BLOCK_ACTIONS.BLOCK;
+
+        const buttonClass = classNames('btn btn-sm logs__cell--block-button', {
+            'btn-outline-secondary': isFiltered,
+            'btn-outline-danger': !isFiltered,
+        });
+
+        const onClick = () => dispatch(toggleBlocking(buttonType, domain));
+
+        return <button
+                type="button"
+                className={buttonClass}
+                onClick={onClick}
+                disabled={processingRules}
+        >
+            {t(buttonType)}
+        </button>;
+    };
+
+    return <div className="o-hidden h-100 logs__cell logs__cell--client" role="gridcell">
+        <IconTooltip className={hintClass} columnClass='grid grid--limited' tooltipClass='px-5 pb-5 pt-4 mw-75'
+                     xlinkHref='question' contentItemClass="contentItemClass" title="client_details"
+                     content={processedData} placement="bottom" />
+        <div className={nameClass}>
+            <div data-tip={true} data-for={id}>
+                {renderFormattedClientCell(client, info, isDetailed, true)}
+            </div>
+            {isDetailed && name && !whoisAvailable
+            && <div className="detailed-info d-none d-sm-block logs__text"
+                    title={name}>
+                {name}
+            </div>}
+        </div>
+        {renderBlockingButton(isFiltered, domain)}
+    </div>;
+};
+
+ClientCell.propTypes = {
+    client: propTypes.string.isRequired,
+    domain: propTypes.string.isRequired,
+    info: propTypes.oneOfType([
+        propTypes.string,
+        propTypes.shape({
+            name: propTypes.string.isRequired,
+            whois_info: propTypes.shape({
+                country: propTypes.string,
+                city: propTypes.string,
+                orgname: propTypes.string,
+            }),
+        }),
+    ]),
+    reason: propTypes.string.isRequired,
+};
+
+export default ClientCell;
--- a/client/src/components/Logs/Cells/DateCell.js
+++ b/client/src/components/Logs/Cells/DateCell.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import propTypes from 'prop-types';
+import { formatDateTime, formatTime } from '../../../helpers/helpers';
+import { DEFAULT_SHORT_DATE_FORMAT_OPTIONS, DEFAULT_TIME_FORMAT } from '../../../helpers/constants';
+
+const DateCell = ({ time }) => {
+    const isDetailed = useSelector((state) => state.queryLogs.isDetailed);
+
+    if (!time) {
+        return '–';
+    }
+
+    const formattedTime = formatTime(time, DEFAULT_TIME_FORMAT);
+    const formattedDate = formatDateTime(time, DEFAULT_SHORT_DATE_FORMAT_OPTIONS);
+
+    return <div className="logs__cell logs__cell logs__cell--date text-truncate" role="gridcell">
+        <div className="logs__time" title={formattedTime}>{formattedTime}</div>
+        {isDetailed
+        && <div className="detailed-info d-none d-sm-block text-truncate"
+                title={formattedDate}>{formattedDate}</div>}
+    </div>;
+};
+
+DateCell.propTypes = {
+    time: propTypes.string.isRequired,
+};
+
+export default DateCell;
--- a/client/src/components/Logs/Cells/getDomainCell.js
+++ b/client/src/components/Logs/Cells/getDomainCell.js
@@ -1,7 +1,8 @@
 import React from 'react';
+import { useSelector } from 'react-redux';
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import getIconTooltip from './getIconTooltip';
+import propTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
 import {
    DEFAULT_SHORT_DATE_FORMAT_OPTIONS,
    LONG_TIME_FORMAT,
@@ -9,15 +10,19 @@ import {
 } from '../../../helpers/constants';
 import { captitalizeWords, formatDateTime, formatTime } from '../../../helpers/helpers';
 import { getSourceData } from '../../../helpers/trackers/trackers';
+import IconTooltip from './IconTooltip';

-const getDomainCell = (props) => {
-    const {
-        row, t, isDetailed, dnssec_enabled,
-    } = props;
-
-    const {
-        tracker, type, answer_dnssec, client_proto, domain, time,
-    } = row.original;
+const DomainCell = ({
+    answer_dnssec,
+    client_proto,
+    domain,
+    time,
+    tracker,
+    type,
+}) => {
+    const { t } = useTranslation();
+    const dnssec_enabled = useSelector((state) => state.dnsConfig.dnssec_enabled);
+    const isDetailed = useSelector((state) => state.queryLogs.isDetailed);

    const hasTracker = !!tracker;

@@ -50,8 +55,8 @@ const getDomainCell = (props) => {
        name_table_header: tracker?.name,
        category_label: hasTracker && captitalizeWords(tracker.category),
        source_label: sourceData
-            && <a href={sourceData.url} target="_blank" rel="noopener noreferrer"
-                  className="link--green">{sourceData.name}</a>,
+                && <a href={sourceData.url} target="_blank" rel="noopener noreferrer"
+                      className="link--green">{sourceData.name}</a>,
    };

    const renderGrid = (content, idx) => {
@@ -72,51 +77,42 @@ const getDomainCell = (props) => {

    const renderContent = hasTracker ? requestDetails.concat(getGrid(knownTrackerDataObj, 'known_tracker', 'pt-4')) : requestDetails;

-    const trackerHint = getIconTooltip({
-        className: privacyIconClass,
-        tooltipClass: 'pt-4 pb-5 px-5 mw-75',
-        xlinkHref: 'privacy',
-        contentItemClass: 'key-colon',
-        renderContent,
-        place: 'bottom',
-    });
-
-    const valueClass = classNames('w-100', {
+    const valueClass = classNames('w-100 text-truncate', {
        'px-2 d-flex justify-content-center flex-column': isDetailed,
    });

    const details = [ip, protocol].filter(Boolean)
        .join(', ');

-    return (
-        <div className="logs__row o-hidden">
-            {dnssec_enabled && getIconTooltip({
-                className: lockIconClass,
-                tooltipClass: 'py-4 px-5 pb-45',
-                canShowTooltip: answer_dnssec,
-                xlinkHref: 'lock',
-                columnClass: 'w-100',
-                content: 'validated_with_dnssec',
-                placement: 'bottom',
-            })}
-            {trackerHint}
-            <div className={valueClass}>
-                <div className="text-truncate" title={domain}>{domain}</div>
-                {details && isDetailed
-                && <div className="detailed-info d-none d-sm-block text-truncate"
-                        title={details}>{details}</div>}
-            </div>
+    return <div className="d-flex o-hidden logs__cell logs__cell logs__cell--domain" role="gridcell">
+        {dnssec_enabled && <IconTooltip
+                className={lockIconClass}
+                tooltipClass='py-4 px-5 pb-45'
+                canShowTooltip={!!answer_dnssec}
+                xlinkHref='lock'
+                columnClass='w-100'
+                content='validated_with_dnssec'
+                placement='bottom'
+        />}
+        <IconTooltip className={privacyIconClass} tooltipClass='pt-4 pb-5 px-5 mw-75'
+                     xlinkHref='privacy' contentItemClass='key-colon' renderContent={renderContent}
+                     place='bottom' />
+        <div className={valueClass}>
+            <div className="text-truncate" title={domain}>{domain}</div>
+            {details && isDetailed
+            && <div className="detailed-info d-none d-sm-block text-truncate"
+                    title={details}>{details}</div>}
        </div>
-    );
+    </div>;
 };

-getDomainCell.propTypes = {
-    row: PropTypes.object.isRequired,
-    t: PropTypes.func.isRequired,
-    isDetailed: PropTypes.bool.isRequired,
-    toggleBlocking: PropTypes.func.isRequired,
-    autoClients: PropTypes.array.isRequired,
-    dnssec_enabled: PropTypes.bool.isRequired,
+DomainCell.propTypes = {
+    answer_dnssec: propTypes.bool.isRequired,
+    client_proto: propTypes.string.isRequired,
+    domain: propTypes.string.isRequired,
+    time: propTypes.string.isRequired,
+    type: propTypes.string.isRequired,
+    tracker: propTypes.object,
 };

-export default getDomainCell;
+export default DomainCell;
--- a/client/src/components/Logs/Cells/Header.js
+++ b/client/src/components/Logs/Cells/Header.js
@@ -0,0 +1,54 @@
+import { useTranslation } from 'react-i18next';
+import { useDispatch, useSelector } from 'react-redux';
+import classNames from 'classnames';
+import React from 'react';
+import { toggleDetailedLogs } from '../../../actions/queryLogs';
+import HeaderCell from './HeaderCell';
+
+const Header = () => {
+    const { t } = useTranslation();
+    const dispatch = useDispatch();
+    const isDetailed = useSelector((state) => state.queryLogs.isDetailed);
+    const disableDetailedMode = () => dispatch(toggleDetailedLogs(false));
+    const enableDetailedMode = () => dispatch(toggleDetailedLogs(true));
+
+    const HEADERS = [
+        {
+            className: 'logs__cell--date',
+            content: 'time_table_header',
+        },
+        {
+            className: 'logs__cell--domain',
+            content: 'request_table_header',
+        },
+        {
+            className: 'logs__cell--response',
+            content: 'response_table_header',
+        },
+        {
+            className: 'logs__cell--client',
+            content: <>
+                {t('client_table_header')}
+                {<span>
+                    <svg className={classNames('icons icon--24 icon--green cursor--pointer mr-2', { 'icon--selected': !isDetailed })}
+                         onClick={disableDetailedMode}
+                    >
+                    <title>{t('compact')}</title>
+                    <use xlinkHref='#list' /></svg>
+                <svg className={classNames('icons icon--24 icon--green cursor--pointer', { 'icon--selected': isDetailed })}
+                     onClick={enableDetailedMode}
+                >
+                    <title>{t('default')}</title>
+                    <use xlinkHref='#detailed_list' />
+                    </svg>
+            </span>}
+            </>,
+        },
+    ];
+
+    return <div className="logs__cell--header__container px-5" role="row">
+        {HEADERS.map(HeaderCell)}
+    </div>;
+};
+
+export default Header;
--- a/client/src/components/Logs/Cells/HeaderCell.js
+++ b/client/src/components/Logs/Cells/HeaderCell.js
@@ -0,0 +1,22 @@
+import classNames from 'classnames';
+import React from 'react';
+import propTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+
+const HeaderCell = ({ content, className }, idx) => {
+    const { t } = useTranslation();
+    return <div
+            key={idx}
+            className={classNames('logs__cell--header__item logs__cell logs__text--bold', className)}
+            role="columnheader"
+    >
+        {typeof content === 'string' ? t(content) : content}
+    </div>;
+};
+
+HeaderCell.propTypes = {
+    content: propTypes.oneOfType([propTypes.string, propTypes.element]).isRequired,
+    className: propTypes.string,
+};
+
+export default HeaderCell;
--- a/client/src/components/Logs/Cells/getIconTooltip.js
+++ b/client/src/components/Logs/Cells/getIconTooltip.js
@@ -7,7 +7,7 @@ import Tooltip from '../../ui/Tooltip';
 import 'react-popper-tooltip/dist/styles.css';
 import './IconTooltip.css';

-const getIconTooltip = ({
+const IconTooltip = ({
    className,
    contentItemClass,
    columnClass,
@@ -43,14 +43,14 @@ const getIconTooltip = ({
    </Tooltip>;
 };

-getIconTooltip.propTypes = {
+IconTooltip.propTypes = {
    className: PropTypes.string,
    contentItemClass: PropTypes.string,
    columnClass: PropTypes.string,
    tooltipClass: PropTypes.string,
    title: PropTypes.string,
    placement: PropTypes.string,
-    canShowTooltip: PropTypes.string,
+    canShowTooltip: PropTypes.bool,
    xlinkHref: PropTypes.string,
    content: PropTypes.oneOfType([
        PropTypes.string,
@@ -59,4 +59,4 @@ getIconTooltip.propTypes = {
    renderContent: PropTypes.arrayOf(PropTypes.element),
 };

-export default getIconTooltip;
+export default IconTooltip;
--- a/client/src/components/Logs/Cells/ResponseCell.js
+++ b/client/src/components/Logs/Cells/ResponseCell.js
@@ -0,0 +1,101 @@
+import { useTranslation } from 'react-i18next';
+import { shallowEqual, useSelector } from 'react-redux';
+import classNames from 'classnames';
+import React from 'react';
+import propTypes from 'prop-types';
+import { formatElapsedMs, getFilterName } from '../../../helpers/helpers';
+import { FILTERED_STATUS, FILTERED_STATUS_TO_META_MAP } from '../../../helpers/constants';
+import IconTooltip from './IconTooltip';
+
+const ResponseCell = ({
+    elapsedMs,
+    originalResponse,
+    reason,
+    response,
+    status,
+    upstream,
+    rule,
+    filterId,
+}) => {
+    const { t } = useTranslation();
+    const filters = useSelector((state) => state.filtering.filters, shallowEqual);
+    const whitelistFilters = useSelector((state) => state.filtering.whitelistFilters, shallowEqual);
+    const isDetailed = useSelector((state) => state.queryLogs.isDetailed);
+
+    const formattedElapsedMs = formatElapsedMs(elapsedMs, t);
+
+    const isBlocked = reason === FILTERED_STATUS.FILTERED_BLACK_LIST
+            || reason === FILTERED_STATUS.FILTERED_BLOCKED_SERVICE;
+
+    const isBlockedByResponse = originalResponse.length > 0 && isBlocked;
+
+    const statusLabel = t(isBlockedByResponse ? 'blocked_by_cname_or_ip' : FILTERED_STATUS_TO_META_MAP[reason]?.LABEL || reason);
+    const boldStatusLabel = <span className="font-weight-bold">{statusLabel}</span>;
+    const filter = getFilterName(filters, whitelistFilters, filterId);
+
+    const renderResponses = (responseArr) => {
+        if (!responseArr || responseArr.length === 0) {
+            return '';
+        }
+
+        return <div>{responseArr.map((response) => {
+            const className = classNames('white-space--nowrap', {
+                'overflow-break': response.length > 100,
+            });
+
+            return <div key={response} className={className}>{`${response}\n`}</div>;
+        })}</div>;
+    };
+
+    const COMMON_CONTENT = {
+        encryption_status: boldStatusLabel,
+        install_settings_dns: upstream,
+        elapsed: formattedElapsedMs,
+        response_code: status,
+        filter,
+        rule_label: rule,
+        response_table_header: renderResponses(response),
+        original_response: renderResponses(originalResponse),
+    };
+
+    const content = rule
+        ? Object.entries(COMMON_CONTENT)
+        : Object.entries({
+            ...COMMON_CONTENT,
+            filter: '',
+        });
+    const detailedInfo = isBlocked ? filter : formattedElapsedMs;
+
+
+    return <div className="logs__cell logs__cell--response" role="gridcell">
+        <IconTooltip
+                className={classNames('icons mr-4 icon--24 icon--lightgray', { 'my-3': isDetailed })}
+                columnClass='grid grid--limited'
+                tooltipClass='px-5 pb-5 pt-4 mw-75 custom-tooltip__response-details'
+                contentItemClass='text-truncate key-colon o-hidden'
+                xlinkHref='question'
+                title='response_details'
+                content={content}
+                placement='bottom'
+        />
+        <div className="text-truncate">
+            <div className="text-truncate" title={statusLabel}>{statusLabel}</div>
+            {isDetailed && <div
+                    className="detailed-info d-none d-sm-block pt-1 text-truncate"
+                    title={detailedInfo}>{detailedInfo}</div>}
+        </div>
+    </div>;
+};
+
+ResponseCell.propTypes = {
+    elapsedMs: propTypes.string.isRequired,
+    originalResponse: propTypes.array.isRequired,
+    reason: propTypes.string.isRequired,
+    response: propTypes.array.isRequired,
+    status: propTypes.string.isRequired,
+    upstream: propTypes.string.isRequired,
+    rule: propTypes.string,
+    filterId: propTypes.number,
+};
+
+export default ResponseCell;
--- a/client/src/components/Logs/Cells/getClientCell.js
+++ b/client/src/components/Logs/Cells/getClientCell.js
@@ -1,110 +0,0 @@
-import React from 'react';
-import { nanoid } from 'nanoid';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import { formatClientCell } from '../../../helpers/formatClientCell';
-import getIconTooltip from './getIconTooltip';
-import { checkFiltered } from '../../../helpers/helpers';
-import { BLOCK_ACTIONS } from '../../../helpers/constants';
-
-const getClientCell = ({
-    row, t, isDetailed, toggleBlocking, autoClients, processingRules,
-}) => {
-    const {
-        reason, client, domain, info: { name, whois_info },
-    } = row.original;
-
-    const autoClient = autoClients.find((autoClient) => autoClient.name === client);
-    const source = autoClient?.source;
-    const whoisAvailable = whois_info && Object.keys(whois_info).length > 0;
-
-    const id = nanoid();
-
-    const data = {
-        address: client,
-        name,
-        country: whois_info?.country,
-        city: whois_info?.city,
-        network: whois_info?.orgname,
-        source_label: source,
-    };
-
-    const processedData = Object.entries(data);
-
-    const isFiltered = checkFiltered(reason);
-
-    const nameClass = classNames('w-90 o-hidden d-flex flex-column', {
-        'mt-2': isDetailed && !name && !whoisAvailable,
-        'white-space--nowrap': isDetailed,
-    });
-
-    const hintClass = classNames('icons mr-4 icon--24 icon--lightgray', {
-        'my-3': isDetailed,
-    });
-
-    const renderBlockingButton = (isFiltered, domain) => {
-        const buttonType = isFiltered ? BLOCK_ACTIONS.UNBLOCK : BLOCK_ACTIONS.BLOCK;
-
-        const buttonClass = classNames('logs__action button__action', {
-            'btn-outline-secondary': isFiltered,
-            'btn-outline-danger': !isFiltered,
-            'logs__action--detailed': isDetailed,
-        });
-
-        const onClick = () => toggleBlocking(buttonType, domain);
-
-        return (
-            <div className={buttonClass}>
-                <button
-                    type="button"
-                    className={`btn btn-sm ${buttonClass}`}
-                    onClick={onClick}
-                    disabled={processingRules}
-                >
-                    {t(buttonType)}
-                </button>
-            </div>
-        );
-    };
-
-    return (
-        <div className="logs__row o-hidden h-100">
-            {getIconTooltip({
-                className: hintClass,
-                columnClass: 'grid grid--limited',
-                tooltipClass: 'px-5 pb-5 pt-4 mw-75',
-                xlinkHref: 'question',
-                contentItemClass: 'text-truncate key-colon',
-                title: 'client_details',
-                content: processedData,
-                placement: 'bottom',
-            })}
-            <div className={nameClass}>
-                <div data-tip={true} data-for={id}>
-                    {formatClientCell(row, isDetailed)}
-                </div>
-
-                {isDetailed && name && !whoisAvailable && (
-                    <div
-                        className="detailed-info d-none d-sm-block logs__text"
-                        title={name}
-                    >
-                        {name}
-                    </div>
-                )}
-            </div>
-            {renderBlockingButton(isFiltered, domain)}
-        </div>
-    );
-};
-
-getClientCell.propTypes = {
-    row: PropTypes.object.isRequired,
-    t: PropTypes.func.isRequired,
-    isDetailed: PropTypes.bool.isRequired,
-    toggleBlocking: PropTypes.func.isRequired,
-    autoClients: PropTypes.array.isRequired,
-    processingRules: PropTypes.bool.isRequired,
-};
-
-export default getClientCell;
--- a/client/src/components/Logs/Cells/getDateCell.js
+++ b/client/src/components/Logs/Cells/getDateCell.js
@@ -1,28 +0,0 @@
-import React from 'react';
-
-import { formatTime, formatDateTime } from '../../../helpers/helpers';
-import {
-    DEFAULT_SHORT_DATE_FORMAT_OPTIONS,
-    DEFAULT_TIME_FORMAT,
-} from '../../../helpers/constants';
-
-const getDateCell = (row, isDetailed) => {
-    const { time } = row.original;
-
-    if (!time) {
-        return '–';
-    }
-
-    const formattedTime = formatTime(time, DEFAULT_TIME_FORMAT);
-    const formattedDate = formatDateTime(time, DEFAULT_SHORT_DATE_FORMAT_OPTIONS);
-
-    return (
-        <div className="logs__cell">
-            <div className="logs__time" title={formattedTime}>{formattedTime}</div>
-            {isDetailed && <div className="detailed-info d-none d-sm-block text-truncate"
-                                title={formattedDate}>{formattedDate}</div>}
-        </div>
-    );
-};
-
-export default getDateCell;
--- a/client/src/components/Logs/Cells/getResponseCell.js
+++ b/client/src/components/Logs/Cells/getResponseCell.js
@@ -1,79 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-import { formatElapsedMs } from '../../../helpers/helpers';
-import {
-    FILTERED_STATUS,
-    FILTERED_STATUS_TO_META_MAP,
-} from '../../../helpers/constants';
-import getIconTooltip from './getIconTooltip';
-
-const getResponseCell = (row, filtering, t, isDetailed, getFilterName) => {
-    const {
-        reason, filterId, rule, status, upstream, elapsedMs, response, originalResponse,
-    } = row.original;
-
-    const { filters, whitelistFilters } = filtering;
-    const formattedElapsedMs = formatElapsedMs(elapsedMs, t);
-
-    const isBlocked = reason === FILTERED_STATUS.FILTERED_BLACK_LIST
-        || reason === FILTERED_STATUS.FILTERED_BLOCKED_SERVICE;
-
-    const isBlockedByResponse = originalResponse.length > 0 && isBlocked;
-
-    const statusLabel = t(isBlockedByResponse ? 'blocked_by_cname_or_ip' : FILTERED_STATUS_TO_META_MAP[reason]?.label || reason);
-    const boldStatusLabel = <span className="font-weight-bold">{statusLabel}</span>;
-    const filter = getFilterName(filters, whitelistFilters, filterId, t);
-
-    const renderResponses = (responseArr) => {
-        if (responseArr?.length === 0) {
-            return '';
-        }
-
-        return <div>{responseArr.map((response) => {
-            const className = classNames('white-space--nowrap', {
-                'overflow-break': response.length > 100,
-            });
-
-            return <div key={response} className={className}>{`${response}\n`}</div>;
-        })}</div>;
-    };
-
-    const COMMON_CONTENT = {
-        encryption_status: boldStatusLabel,
-        install_settings_dns: upstream,
-        elapsed: formattedElapsedMs,
-        response_code: status,
-        filter,
-        rule_label: rule,
-        response_table_header: renderResponses(response),
-        original_response: renderResponses(originalResponse),
-    };
-
-    const content = rule
-        ? Object.entries(COMMON_CONTENT)
-        : Object.entries({ ...COMMON_CONTENT, filter: '' });
-    const detailedInfo = isBlocked ? filter : formattedElapsedMs;
-
-    return (
-        <div className="logs__row">
-            {getIconTooltip({
-                className: classNames('icons mr-4 icon--24 icon--lightgray', { 'my-3': isDetailed }),
-                columnClass: 'grid grid--limited',
-                tooltipClass: 'px-5 pb-5 pt-4 mw-75 custom-tooltip__response-details',
-                contentItemClass: 'text-truncate key-colon o-hidden',
-                xlinkHref: 'question',
-                title: 'response_details',
-                content,
-                placement: 'bottom',
-            })}
-            <div className="text-truncate">
-                <div className="text-truncate" title={statusLabel}>{statusLabel}</div>
-                {isDetailed && <div
-                    className="detailed-info d-none d-sm-block pt-1 text-truncate"
-                    title={detailedInfo}>{detailedInfo}</div>}
-            </div>
-        </div>
-    );
-};
-
-export default getResponseCell;
--- a/client/src/components/Logs/Cells/index.js
+++ b/client/src/components/Logs/Cells/index.js
@@ -0,0 +1,197 @@
+import React, { memo } from 'react';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import { shallowEqual, useDispatch, useSelector } from 'react-redux';
+import propTypes from 'prop-types';
+import {
+    captitalizeWords,
+    checkFiltered,
+    formatDateTime,
+    formatElapsedMs,
+    formatTime,
+    getFilterName,
+    processContent,
+} from '../../../helpers/helpers';
+import {
+    BLOCK_ACTIONS,
+    DEFAULT_SHORT_DATE_FORMAT_OPTIONS,
+    FILTERED_STATUS,
+    FILTERED_STATUS_TO_META_MAP,
+    LONG_TIME_FORMAT,
+    QUERY_STATUS_COLORS,
+    SCHEME_TO_PROTOCOL_MAP,
+} from '../../../helpers/constants';
+import { getSourceData } from '../../../helpers/trackers/trackers';
+import { toggleBlocking } from '../../../actions';
+import DateCell from './DateCell';
+import DomainCell from './DomainCell';
+import ResponseCell from './ResponseCell';
+import ClientCell from './ClientCell';
+import '../Logs.css';
+
+const Row = memo(({
+    style,
+    rowProps,
+    rowProps: { reason },
+    isSmallScreen,
+    setDetailedDataCurrent,
+    setButtonType,
+    setModalOpened,
+}) => {
+    const dispatch = useDispatch();
+    const { t } = useTranslation();
+    const dnssec_enabled = useSelector((state) => state.dnsConfig.dnssec_enabled);
+    const filters = useSelector((state) => state.filtering.filters, shallowEqual);
+    const whitelistFilters = useSelector((state) => state.filtering.whitelistFilters, shallowEqual);
+    const autoClients = useSelector((state) => state.dashboard.autoClients, shallowEqual);
+
+    const onClick = () => {
+        if (!isSmallScreen) { return; }
+        const {
+            answer_dnssec,
+            client,
+            domain,
+            elapsedMs,
+            info,
+            reason,
+            response,
+            time,
+            tracker,
+            upstream,
+            type,
+            client_proto,
+            filterId,
+            rule,
+            originalResponse,
+            status,
+        } = rowProps;
+
+        const hasTracker = !!tracker;
+
+        const autoClient = autoClients
+            .find((autoClient) => autoClient.name === client);
+
+        const { whois_info } = info;
+        const country = whois_info?.country;
+        const city = whois_info?.city;
+        const network = whois_info?.orgname;
+
+        const source = autoClient?.source;
+
+        const formattedElapsedMs = formatElapsedMs(elapsedMs, t);
+        const isFiltered = checkFiltered(reason);
+
+        const isBlocked = reason === FILTERED_STATUS.FILTERED_BLACK_LIST
+                    || reason === FILTERED_STATUS.FILTERED_BLOCKED_SERVICE;
+
+        const buttonType = isFiltered ? BLOCK_ACTIONS.UNBLOCK : BLOCK_ACTIONS.BLOCK;
+        const onToggleBlock = () => {
+            dispatch(toggleBlocking(buttonType, domain));
+        };
+
+        const isBlockedByResponse = originalResponse.length > 0 && isBlocked;
+        const requestStatus = t(isBlockedByResponse ? 'blocked_by_cname_or_ip' : FILTERED_STATUS_TO_META_MAP[reason]?.LABEL || reason);
+
+        const protocol = t(SCHEME_TO_PROTOCOL_MAP[client_proto]) || '';
+
+        const sourceData = getSourceData(tracker);
+
+        const filter = getFilterName(filters, whitelistFilters, filterId);
+
+        const detailedData = {
+            time_table_header: formatTime(time, LONG_TIME_FORMAT),
+            date: formatDateTime(time, DEFAULT_SHORT_DATE_FORMAT_OPTIONS),
+            encryption_status: isBlocked
+                ? <div className="bg--danger">{requestStatus}</div> : requestStatus,
+            domain,
+            type_table_header: type,
+            protocol,
+            known_tracker: hasTracker && 'title',
+            table_name: tracker?.name,
+            category_label: hasTracker && captitalizeWords(tracker.category),
+            tracker_source: hasTracker && sourceData
+                        && <a
+                                href={sourceData.url}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="link--green">{sourceData.name}
+                        </a>,
+            response_details: 'title',
+            install_settings_dns: upstream,
+            elapsed: formattedElapsedMs,
+            filter: rule ? filter : null,
+            rule_label: rule,
+            response_table_header: response?.join('\n'),
+            response_code: status,
+            client_details: 'title',
+            ip_address: client,
+            name: info?.name,
+            country,
+            city,
+            network,
+            source_label: source,
+            validated_with_dnssec: dnssec_enabled ? Boolean(answer_dnssec) : false,
+            original_response: originalResponse?.join('\n'),
+            [buttonType]: <div onClick={onToggleBlock}
+                                   className={classNames('title--border text-center', {
+                                       'bg--danger': isBlocked,
+                                   })}>{t(buttonType)}</div>,
+        };
+
+        setDetailedDataCurrent(processContent(detailedData));
+        setButtonType(buttonType);
+        setModalOpened(true);
+    };
+
+    const isDetailed = useSelector((state) => state.queryLogs.isDetailed);
+
+    const className = classNames('d-flex px-5 logs__row',
+        `logs__row--${FILTERED_STATUS_TO_META_MAP?.[reason]?.COLOR ?? QUERY_STATUS_COLORS.WHITE}`, {
+            'logs__cell--detailed': isDetailed,
+        });
+
+    return <div style={style} className={className} onClick={onClick} role="row">
+        <DateCell {...rowProps} />
+        <DomainCell {...rowProps} />
+        <ResponseCell {...rowProps} />
+        <ClientCell {...rowProps} />
+    </div>;
+});
+
+Row.displayName = 'Row';
+
+Row.propTypes = {
+    style: propTypes.object,
+    rowProps: propTypes.shape({
+        reason: propTypes.string.isRequired,
+        answer_dnssec: propTypes.bool.isRequired,
+        client: propTypes.string.isRequired,
+        domain: propTypes.string.isRequired,
+        elapsedMs: propTypes.string.isRequired,
+        info: propTypes.oneOfType([
+            propTypes.string,
+            propTypes.shape({
+                whois_info: propTypes.shape({
+                    country: propTypes.string,
+                    city: propTypes.string,
+                    orgname: propTypes.string,
+                }),
+            })]),
+        response: propTypes.array.isRequired,
+        time: propTypes.string.isRequired,
+        tracker: propTypes.object,
+        upstream: propTypes.string.isRequired,
+        type: propTypes.string.isRequired,
+        client_proto: propTypes.string.isRequired,
+        filterId: propTypes.number,
+        rule: propTypes.string,
+        originalResponse: propTypes.array,
+        status: propTypes.string.isRequired,
+    }).isRequired,
+    isSmallScreen: propTypes.bool.isRequired,
+    setDetailedDataCurrent: propTypes.func.isRequired,
+    setButtonType: propTypes.func.isRequired,
+    setModalOpened: propTypes.func.isRequired,
+};
+
+export default Row;