Pull request #2231: ADG-8368 Frontend rewritten in TypeScript, added Node 18 support

Merge in DNS/adguard-home from ADG-8368-typescript-node-18 to master

Squashed commit of the following:

commit daa288ae0d76178af24595cc807055902e6f09ab
Merge: 4c89cf720 1085d59a6
Author: Igor Lobanov <bniwredyc@gmail.com>
Date:   Mon Jun 10 17:22:20 2024 +0200

    merge

commit 4c89cf7209
Author: Ildar Kamalov <ik@adguard.com>
Date:   Thu Jun 6 13:27:18 2024 +0300

    remove install from initial state

commit b943f2011f
Author: Igor Lobanov <bniwredyc@gmail.com>
Date:   Wed Jun 5 23:10:55 2024 +0200

    frontend production build fix

commit cd1be2d66d
Author: Igor Lobanov <bniwredyc@gmail.com>
Date:   Wed Jun 5 20:23:14 2024 +0200

    production build quickfix

commit 7b8ac01fc2
Author: Ainar Garipov <A.Garipov@AdGuard.COM>
Date:   Wed Jun 5 19:57:31 2024 +0300

    all: upd node docker

commit 02afed66d5
Author: Igor Lobanov <bniwredyc@gmail.com>
Date:   Wed Jun 5 18:23:12 2024 +0200

    changelog fixes

commit 9c0f736f0c
Merge: 62c4fbf1e e04775c4f
Author: Igor Lobanov <bniwredyc@gmail.com>
Date:   Wed Jun 5 18:18:29 2024 +0200

    merge

commit 62c4fbf1e3
Author: Igor Lobanov <bniwredyc@gmail.com>
Date:   Wed Jun 5 16:22:22 2024 +0200

    empty line in changelog

commit 76b1e44a93
Author: Igor Lobanov <bniwredyc@gmail.com>
Date:   Wed Jun 5 16:20:37 2024 +0200

    changelog

commit f783e90040
Author: Igor Lobanov <bniwredyc@gmail.com>
Date:   Wed Jun 5 16:19:13 2024 +0200

    filters.js -> filters.ts

commit 3d4ce6554c
Author: Igor Lobanov <bniwredyc@gmail.com>
Date:   Wed Jun 5 16:18:03 2024 +0200

    generated file removed

commit e35ba58f2a
Author: Igor Lobanov <bniwredyc@gmail.com>
Date:   Wed Jun 5 15:45:21 2024 +0200

    rollback unwanted changes

commit 1f30d4216d
Author: Igor Lobanov <bniwredyc@gmail.com>
Date:   Wed Jun 5 15:27:36 2024 +0200

    review fix

commit 6cd4e44f07
Author: Igor Lobanov <bniwredyc@gmail.com>
Date:   Wed Jun 5 11:55:39 2024 +0200

    missing generated file restoresd

commit 2ab738b303
Author: Igor Lobanov <bniwredyc@gmail.com>
Date:   Wed Jun 5 11:40:32 2024 +0200

    Frontend rewritten in TypeScript, added Node 18 support

client/src/components/Logs/AnonymizerNotification.tsx

@@ -1,13 +1,18 @@
 import React from 'react';
 import { Trans } from 'react-i18next';
+
 import { HashLink as Link } from 'react-router-hash-link';
 
 const AnonymizerNotification = () => (
     <div className="alert alert-primary mt-6">
-        <Trans components={[
-            <strong key="0">text</strong>,
-            <Link to="/settings#logs-config" key="1">link</Link>,
-        ]}>
+        <Trans
+            components={[
+                <strong key="0">text</strong>,
+
+                <Link to="/settings#logs-config" key="1">
+                    link
+                </Link>,
+            ]}>
             anonymizer_notification
         </Trans>
     </div>

client/src/components/Logs/Cells/ClientCell.tsx

@@ -3,36 +3,55 @@ import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 import { nanoid } from 'nanoid';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
+
 import { Link, useHistory } from 'react-router-dom';
-import propTypes from 'prop-types';
 
 import { checkFiltered, getBlockingClientName } from '../../../helpers/helpers';
 import { BLOCK_ACTIONS } from '../../../helpers/constants';
+
 import { toggleBlocking, toggleBlockingForClient } from '../../../actions';
+
 import IconTooltip from './IconTooltip';
+
 import { renderFormattedClientCell } from '../../../helpers/renderFormattedClientCell';
 import { toggleClientBlock } from '../../../actions/access';
 import { getBlockClientInfo } from './helpers';
 import { getStats } from '../../../actions/stats';
 import { updateLogs } from '../../../actions/queryLogs';
+import { RootState } from '../../../initialState';
 
-const ClientCell = ({
-    client,
-    client_id,
-    client_info,
-    domain,
-    reason,
-}) => {
+interface ClientCellProps {
+    client: string;
+    client_id?: string;
+    client_info?: {
+        name: string;
+        whois: {
+            country?: string;
+            city?: string;
+            orgname?: string;
+        };
+        disallowed: boolean;
+        disallowed_rule: string;
+    };
+    domain: string;
+    reason: string;
+}
+
+const ClientCell = ({ client, client_id, client_info, domain, reason }: ClientCellProps) => {
     const { t } = useTranslation();
     const dispatch = useDispatch();
     const history = useHistory();
-    const autoClients = useSelector((state) => state.dashboard.autoClients, shallowEqual);
-    const isDetailed = useSelector((state) => state.queryLogs.isDetailed);
-    const allowedСlients = useSelector((state) => state.access.allowed_clients, shallowEqual);
+
+    const autoClients = useSelector((state: RootState) => state.dashboard.autoClients, shallowEqual);
+
+    const isDetailed = useSelector((state: RootState) => state.queryLogs.isDetailed);
+
+    const allowedClients = useSelector((state: RootState) => state.access.allowed_clients, shallowEqual);
     const [isOptionsOpened, setOptionsOpened] = useState(false);
 
-    const autoClient = autoClients.find((autoClient) => autoClient.name === client);
-    const clients = useSelector((state) => state.dashboard.clients);
+    const autoClient = autoClients.find((autoClient: any) => autoClient.name === client);
+
+    const clients = useSelector((state: RootState) => state.dashboard.clients);
     const source = autoClient?.source;
     const whoisAvailable = client_info && Object.keys(client_info.whois).length > 0;
     const clientName = client_info?.name || client_id;
@@ -57,7 +76,7 @@ const ClientCell = ({
 
     const isFiltered = checkFiltered(reason);
 
-    const clientIds = clients.map((c) => c.ids).flat();
+    const clientIds = clients.map((c: any) => c.ids).flat();
 
     const nameClass = classNames('w-90 o-hidden d-flex flex-column', {
         'mt-2': isDetailed && !client_info?.name && !whoisAvailable,
@@ -68,7 +87,7 @@ const ClientCell = ({
         'my-3': isDetailed,
     });
 
-    const renderBlockingButton = (isFiltered, domain) => {
+    const renderBlockingButton = (isFiltered: any, domain: any) => {
         const buttonType = isFiltered ? BLOCK_ACTIONS.UNBLOCK : BLOCK_ACTIONS.BLOCK;
 
         const {
@@ -79,7 +98,7 @@ const ClientCell = ({
             client,
             client_info?.disallowed || false,
             client_info?.disallowed_rule || '',
-            allowedСlients,
+            allowedClients,
         );
 
         const blockingForClientKey = isFiltered ? 'unblock_for_this_client_only' : 'block_for_this_client_only';
@@ -108,11 +127,13 @@ const ClientCell = ({
                 name: blockingClientKey,
                 onClick: async () => {
                     if (window.confirm(confirmMessage)) {
-                        await dispatch(toggleClientBlock(
-                            client,
-                            client_info?.disallowed || false,
-                            client_info?.disallowed_rule || '',
-                        ));
+                        await dispatch(
+                            toggleClientBlock(
+                                client,
+                                client_info?.disallowed || false,
+                                client_info?.disallowed_rule || '',
+                            ),
+                        );
                         await dispatch(updateLogs());
                         setOptionsOpened(false);
                     }
@@ -130,21 +151,19 @@ const ClientCell = ({
             });
         }
 
-        const getOptions = (options) => {
+        const getOptions = (options: any) => {
             if (options.length === 0) {
                 return null;
             }
+
             return (
                 <>
-                    {options.map(({
-                        name, onClick, disabled, className,
-                    }) => (
+                    {options.map(({ name, onClick, disabled, className }: any) => (
                         <button
                             key={name}
                             className={classNames('button-action--arrow-option px-4 py-1', className)}
                             onClick={onClick}
-                            disabled={disabled}
-                        >
+                            disabled={disabled}>
                             {t(name)}
                         </button>
                     ))}
@@ -160,11 +179,7 @@ const ClientCell = ({
 
         return (
             <div className={containerClass}>
-                <button
-                    type="button"
-                    className="btn btn-icon btn-sm px-0"
-                    onClick={() => setOptionsOpened(true)}
-                >
+                <button type="button" className="btn btn-icon btn-sm px-0" onClick={() => setOptionsOpened(true)}>
                     <svg className="icon24 icon--lightgray button-action__icon">
                         <use xlinkHref="#bullets" />
                     </svg>
@@ -188,10 +203,7 @@ const ClientCell = ({
     };
 
     return (
-        <div
-            className="o-hidden h-100 logs__cell logs__cell--client"
-            role="gridcell"
-        >
+        <div className="o-hidden h-100 logs__cell logs__cell--client" role="gridcell">
             <IconTooltip
                 className={hintClass}
                 columnClass="grid grid--limited"
@@ -202,6 +214,7 @@ const ClientCell = ({
                 content={processedData}
                 placement="bottom"
             />
+
             <div className={nameClass}>
                 <div data-tip={true} data-for={id}>
                     {renderFormattedClientCell(client, clientInfo, isDetailed, true)}
@@ -210,8 +223,7 @@ const ClientCell = ({
                     <Link
                         className="detailed-info d-none d-sm-block logs__text logs__text--link logs__text--client"
                         to={`logs?search="${encodeURIComponent(clientName)}"`}
-                        title={clientName}
-                    >
+                        title={clientName}>
                         {clientName}
                     </Link>
                 )}
@@ -221,21 +233,4 @@ const ClientCell = ({
     );
 };
 
-ClientCell.propTypes = {
-    client: propTypes.string.isRequired,
-    client_id: propTypes.string,
-    client_info: propTypes.shape({
-        name: propTypes.string.isRequired,
-        whois: propTypes.shape({
-            country: propTypes.string,
-            city: propTypes.string,
-            orgname: propTypes.string,
-        }).isRequired,
-        disallowed: propTypes.bool.isRequired,
-        disallowed_rule: propTypes.string.isRequired,
-    }),
-    domain: propTypes.string.isRequired,
-    reason: propTypes.string.isRequired,
-};
-
 export default ClientCell;

client/src/components/Logs/Cells/DateCell.js

@@ -1,29 +0,0 @@
-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;

client/src/components/Logs/Cells/DateCell.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+
+import { formatDateTime, formatTime } from '../../../helpers/helpers';
+import { DEFAULT_SHORT_DATE_FORMAT_OPTIONS, DEFAULT_TIME_FORMAT } from '../../../helpers/constants';
+import { RootState } from '../../../initialState';
+
+interface DateCellProps {
+    time: string;
+}
+
+const DateCell = ({ time }: DateCellProps) => {
+    const isDetailed = useSelector((state: RootState) => 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>
+    );
+};
+
+export default DateCell;

client/src/components/Logs/Cells/DomainCell.tsx

@@ -1,16 +1,32 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 import classNames from 'classnames';
-import propTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import {
     DEFAULT_SHORT_DATE_FORMAT_OPTIONS,
     LONG_TIME_FORMAT,
     SCHEME_TO_PROTOCOL_MAP,
 } from '../../../helpers/constants';
+
 import { captitalizeWords, formatDateTime, formatTime } from '../../../helpers/helpers';
 import { getSourceData } from '../../../helpers/trackers/trackers';
+
 import IconTooltip from './IconTooltip';
+import { RootState } from '../../../initialState';
+
+interface DomainCellProps {
+    answer_dnssec: boolean;
+    client_proto: string;
+    domain: string;
+    unicodeName?: string;
+    time: string;
+    type: string;
+    tracker?: {
+        name: string;
+        category: string;
+    };
+    ecs?: string;
+}
 
 const DomainCell = ({
     answer_dnssec,
@@ -21,10 +37,12 @@ const DomainCell = ({
     tracker,
     type,
     ecs,
-}) => {
+}: DomainCellProps) => {
     const { t } = useTranslation();
-    const dnssec_enabled = useSelector((state) => state.dnsConfig.dnssec_enabled);
-    const isDetailed = useSelector((state) => state.queryLogs.isDetailed);
+
+    const dnssec_enabled = useSelector((state: RootState) => state.dnsConfig.dnssec_enabled);
+
+    const isDetailed = useSelector((state: RootState) => state.queryLogs.isDetailed);
 
     const hasTracker = !!tracker;
 
@@ -43,7 +61,15 @@ const DomainCell = ({
     const protocol = t(SCHEME_TO_PROTOCOL_MAP[client_proto]) || '';
     const ip = type ? `${t('type_table_header')}: ${type}` : '';
 
-    let requestDetailsObj = {
+    let requestDetailsObj: {
+        time_table_header: string;
+        date: string;
+        domain: string;
+        punycode?: string;
+        ecs?: string;
+        type_table_header?: string;
+        protocol?: string;
+    } = {
         time_table_header: formatTime(time, LONG_TIME_FORMAT),
         date: formatDateTime(time, DEFAULT_SHORT_DATE_FORMAT_OPTIONS),
         domain,
@@ -76,24 +102,16 @@ const DomainCell = ({
         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"
-            >
+            <a href={sourceData.url} target="_blank" rel="noopener noreferrer" className="link--green">
                 {sourceData.name}
             </a>
         ),
     };
 
-    const renderGrid = (content, idx) => {
+    const renderGrid = (content: any, idx: any) => {
         const preparedContent = typeof content === 'string' ? t(content) : content;
 
-        const className = classNames(
-            'text-truncate o-hidden',
-            { 'overflow-break': preparedContent?.length > 100 },
-        );
+        const className = classNames('text-truncate o-hidden', { 'overflow-break': preparedContent?.length > 100 });
 
         return (
             <div key={idx} className={className}>
@@ -102,10 +120,11 @@ const DomainCell = ({
         );
     };
 
-    const getGrid = (contentObj, title, className) => [
+    const getGrid = (contentObj: any, title: string, className?: string) => [
         <div key={title} className={classNames('pb-2 grid--title', className)}>
             {t(title)}
         </div>,
+
         <div key={`${title}-1`} className="grid grid--limited">
             {React.Children.map(Object.entries(contentObj), renderGrid)}
         </div>,
@@ -113,7 +132,9 @@ const DomainCell = ({
 
     const requestDetails = getGrid(requestDetailsObj, 'request_details');
 
-    const renderContent = hasTracker ? requestDetails.concat(getGrid(knownTrackerDataObj, 'known_tracker', 'pt-4')) : requestDetails;
+    const renderContent = hasTracker
+        ? requestDetails.concat(getGrid(knownTrackerDataObj, 'known_tracker', 'pt-4'))
+        : requestDetails;
 
     const valueClass = classNames('w-100 text-truncate', {
         'px-2 d-flex justify-content-center flex-column': isDetailed,
@@ -122,10 +143,7 @@ const DomainCell = ({
     const details = [ip, protocol].filter(Boolean).join(', ');
 
     return (
-        <div
-            className="d-flex o-hidden logs__cell logs__cell logs__cell--domain"
-            role="gridcell"
-        >
+        <div className="d-flex o-hidden logs__cell logs__cell logs__cell--domain" role="gridcell">
             {dnssec_enabled && (
                 <IconTooltip
                     className={lockIconClass}
@@ -137,14 +155,16 @@ const DomainCell = ({
                     placement="bottom"
                 />
             )}
+
             <IconTooltip
                 className={privacyIconClass}
                 tooltipClass="pt-4 pb-5 px-5 mw-75"
                 xlinkHref="privacy"
                 contentItemClass="key-colon"
                 renderContent={renderContent}
-                place="bottom"
+                placement="bottom"
             />
+
             <div className={valueClass}>
                 {unicodeName ? (
                     <div className="text-truncate overflow-break-mobile" title={unicodeName}>
@@ -156,10 +176,7 @@ const DomainCell = ({
                     </div>
                 )}
                 {details && isDetailed && (
-                    <div
-                        className="detailed-info d-none d-sm-block text-truncate"
-                        title={details}
-                    >
+                    <div className="detailed-info d-none d-sm-block text-truncate" title={details}>
                         {details}
                     </div>
                 )}
@@ -168,15 +185,4 @@ const DomainCell = ({
     );
 };
 
-DomainCell.propTypes = {
-    answer_dnssec: propTypes.bool.isRequired,
-    client_proto: propTypes.string.isRequired,
-    domain: propTypes.string.isRequired,
-    unicodeName: propTypes.string,
-    time: propTypes.string.isRequired,
-    type: propTypes.string.isRequired,
-    tracker: propTypes.object,
-    ecs: propTypes.string,
-};
-
 export default DomainCell;

client/src/components/Logs/Cells/Header.js

@@ -1,54 +0,0 @@
-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;

client/src/components/Logs/Cells/Header.tsx

@@ -0,0 +1,73 @@
+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';
+import { RootState } from '../../../initialState';
+
+const Header = () => {
+    const { t } = useTranslation();
+    const dispatch = useDispatch();
+
+    const isDetailed = useSelector((state: RootState) => 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;

client/src/components/Logs/Cells/HeaderCell.js

@@ -1,22 +0,0 @@
-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;

client/src/components/Logs/Cells/HeaderCell.tsx

@@ -0,0 +1,23 @@
+import classNames from 'classnames';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+interface HeaderCellProps {
+    content: string | React.ReactElement;
+    className?: string;
+}
+
+const HeaderCell = ({ content, className }: HeaderCellProps, idx: any) => {
+    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>
+    );
+};
+
+export default HeaderCell;

client/src/components/Logs/Cells/IconTooltip.css

@@ -91,18 +91,24 @@
         margin: -0.5rem 0 0;
     }
 
-    .grid > .key__time_table_header, .grid > .key__data, .grid > .key__encryption_status, .grid > .key__elapsed {
+    .grid > .key__time_table_header,
+    .grid > .key__data,
+    .grid > .key__encryption_status,
+    .grid > .key__elapsed {
         grid-column: 1 / span 1;
     }
 
-    .grid > .value__time_table_header, .grid > .value__data, .grid > .value__encryption_status, .grid > .value__elapsed {
+    .grid > .value__time_table_header,
+    .grid > .value__data,
+    .grid > .value__encryption_status,
+    .grid > .value__elapsed {
         grid-column: 2 / span 1;
         margin: 0 !important;
     }
 }
 
 .grid .key-colon:nth-child(odd)::after {
-    content: ":";
+    content: ':';
 }
 
 .grid__one-row {
@@ -127,7 +133,7 @@
 }
 
 .title--border:before {
-    content: "";
+    content: '';
     position: absolute;
     left: 0;
     border-top: 0.5px solid var(--gray-d8) !important;

client/src/components/Logs/Cells/IconTooltip.js

@@ -1,76 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Trans } from 'react-i18next';
-import classNames from 'classnames';
-import { processContent } from '../../../helpers/helpers';
-import Tooltip from '../../ui/Tooltip';
-import 'react-popper-tooltip/dist/styles.css';
-import './IconTooltip.css';
-import { SHOW_TOOLTIP_DELAY } from '../../../helpers/constants';
-
-const IconTooltip = ({
-    className,
-    contentItemClass,
-    columnClass,
-    triggerClass,
-    canShowTooltip = true,
-    xlinkHref,
-    title,
-    placement,
-    tooltipClass,
-    content,
-    trigger,
-    onVisibilityChange,
-    defaultTooltipShown,
-    delayHide,
-    renderContent = content ? React.Children.map(
-        processContent(content),
-        (item, idx) => <div key={idx} className={contentItemClass}>
-            <Trans>{item || '—'}</Trans>
-        </div>,
-    ) : null,
-}) => {
-    const tooltipContent = <>
-        {title
-        && <div className="pb-4 h-25 grid-content font-weight-bold"><Trans>{title}</Trans></div>}
-        <div className={classNames(columnClass)}>{renderContent}</div>
-    </>;
-
-    const tooltipClassName = classNames('tooltip-custom__container', tooltipClass, { 'd-none': !canShowTooltip });
-
-    return <Tooltip
-        className={tooltipClassName}
-        content={tooltipContent}
-        placement={placement}
-        triggerClass={triggerClass}
-        trigger={trigger}
-        onVisibilityChange={onVisibilityChange}
-        delayShow={trigger === 'click' ? 0 : SHOW_TOOLTIP_DELAY}
-        delayHide={delayHide}
-        defaultTooltipShown={defaultTooltipShown}
-    >
-        {xlinkHref && <svg className={className}>
-            <use xlinkHref={`#${xlinkHref}`} />
-        </svg>}
-    </Tooltip>;
-};
-
-IconTooltip.propTypes = {
-    className: PropTypes.string,
-    trigger: PropTypes.string,
-    triggerClass: PropTypes.string,
-    contentItemClass: PropTypes.string,
-    columnClass: PropTypes.string,
-    tooltipClass: PropTypes.string,
-    title: PropTypes.string,
-    placement: PropTypes.string,
-    canShowTooltip: PropTypes.bool,
-    xlinkHref: PropTypes.string,
-    content: PropTypes.node,
-    renderContent: PropTypes.arrayOf(PropTypes.element),
-    onVisibilityChange: PropTypes.func,
-    defaultTooltipShown: PropTypes.bool,
-    delayHide: PropTypes.number,
-};
-
-export default IconTooltip;

client/src/components/Logs/Cells/IconTooltip.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import { Trans } from 'react-i18next';
+import classNames from 'classnames';
+import PopperJS from 'popper.js';
+import { TriggerTypes } from 'react-popper-tooltip';
+
+import { processContent } from '../../../helpers/helpers';
+
+import Tooltip from '../../ui/Tooltip';
+import 'react-popper-tooltip/dist/styles.css';
+import './IconTooltip.css';
+import { SHOW_TOOLTIP_DELAY } from '../../../helpers/constants';
+
+interface IconTooltipProps {
+    className?: string;
+    trigger?: TriggerTypes;
+    triggerClass?: string;
+    contentItemClass?: string;
+    columnClass?: string;
+    tooltipClass?: string;
+    title?: string;
+    placement?: PopperJS.Placement;
+    canShowTooltip?: boolean;
+    xlinkHref?: string;
+    content?: React.ReactNode;
+    renderContent?: React.ReactElement[];
+    onVisibilityChange?: (...args: unknown[]) => unknown;
+    defaultTooltipShown?: boolean;
+    delayHide?: number;
+}
+
+const IconTooltip = ({
+    className,
+    contentItemClass,
+    columnClass,
+    triggerClass,
+    canShowTooltip = true,
+    xlinkHref,
+    title,
+    placement,
+    tooltipClass,
+    content,
+    trigger,
+    onVisibilityChange,
+    defaultTooltipShown,
+    delayHide,
+
+    renderContent = content
+        ? React.Children.map(
+              processContent(content),
+
+              (item, idx) => (
+                  <div key={idx} className={contentItemClass}>
+                      <Trans>{item || '—'}</Trans>
+                  </div>
+              ),
+          )
+        : null,
+}: IconTooltipProps) => {
+    const tooltipContent = (
+        <>
+            {title && (
+                <div className="pb-4 h-25 grid-content font-weight-bold">
+                    <Trans>{title}</Trans>
+                </div>
+            )}
+
+            <div className={classNames(columnClass)}>{renderContent}</div>
+        </>
+    );
+
+    const tooltipClassName = classNames('tooltip-custom__container', tooltipClass, { 'd-none': !canShowTooltip });
+
+    return (
+        <Tooltip
+            className={tooltipClassName}
+            content={tooltipContent}
+            placement={placement}
+            triggerClass={triggerClass}
+            trigger={trigger}
+            onVisibilityChange={onVisibilityChange}
+            delayShow={trigger === 'click' ? 0 : SHOW_TOOLTIP_DELAY}
+            delayHide={delayHide}
+            defaultTooltipShown={defaultTooltipShown}>
+            {xlinkHref && (
+                <svg className={className}>
+                    <use xlinkHref={`#${xlinkHref}`} />
+                </svg>
+            )}
+        </Tooltip>
+    );
+};
+
+export default IconTooltip;

client/src/components/Logs/Cells/ResponseCell.js

@@ -1,141 +0,0 @@
-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 {
-    getRulesToFilterList,
-    formatElapsedMs,
-    getFilterNames,
-    getServiceName,
-} 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,
-    rules,
-    service_name,
-    cached,
-}) => {
-    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 services = useSelector((store) => store?.services);
-
-    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 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,
-        ...(cached
-            && {
-                served_from_cache_label: (
-                    <svg className="icons icon--20 icon--green mb-1">
-                        <use xlinkHref="#check" />
-                    </svg>
-                ),
-            }
-        ),
-        elapsed: formattedElapsedMs,
-        response_code: status,
-        ...(service_name && services.allServices
-                && { service_name: getServiceName(services.allServices, service_name) }
-        ),
-        ...(rules.length > 0
-                && { rule_label: getRulesToFilterList(rules, filters, whitelistFilters) }
-        ),
-        response_table_header: renderResponses(response),
-        original_response: renderResponses(originalResponse),
-    };
-
-    const content = rules.length > 0
-        ? Object.entries(COMMON_CONTENT)
-        : Object.entries({
-            ...COMMON_CONTENT,
-            filter: '',
-        });
-
-    const getDetailedInfo = (reason) => {
-        switch (reason) {
-            case FILTERED_STATUS.FILTERED_BLOCKED_SERVICE:
-                if (!service_name || !services.allServices) {
-                    return formattedElapsedMs;
-                }
-                return getServiceName(services.allServices, service_name);
-            case FILTERED_STATUS.FILTERED_BLACK_LIST:
-            case FILTERED_STATUS.NOT_FILTERED_WHITE_LIST:
-                return getFilterNames(rules, filters, whitelistFilters).join(', ');
-            default:
-                return formattedElapsedMs;
-        }
-    };
-
-    const detailedInfo = getDetailedInfo(reason);
-
-    return (
-        <div className="logs__cell logs__cell--response" role="gridcell">
-            <IconTooltip
-                className={classNames('icons mr-4 icon--24 icon--lightgray logs__question', { '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,
-    cached: propTypes.bool.isRequired,
-    rules: propTypes.arrayOf(propTypes.shape({
-        text: propTypes.string.isRequired,
-        filter_list_id: propTypes.number.isRequired,
-    })),
-    service_name: propTypes.string,
-};
-
-export default ResponseCell;

client/src/components/Logs/Cells/ResponseCell.tsx

@@ -0,0 +1,150 @@
+import { useTranslation } from 'react-i18next';
+import { shallowEqual, useSelector } from 'react-redux';
+import classNames from 'classnames';
+import React from 'react';
+import { getRulesToFilterList, formatElapsedMs, getFilterNames, getServiceName } from '../../../helpers/helpers';
+import { FILTERED_STATUS, FILTERED_STATUS_TO_META_MAP } from '../../../helpers/constants';
+
+import IconTooltip from './IconTooltip';
+import { RootState } from '../../../initialState';
+
+interface ResponseCellProps {
+    elapsedMs: string;
+    originalResponse?: unknown[];
+    reason: string;
+    response: unknown[];
+    status: string;
+    upstream: string;
+    cached: boolean;
+    rules?: {
+        text: string;
+        filter_list_id: number;
+    }[];
+    service_name?: string;
+}
+
+const ResponseCell = ({
+    elapsedMs,
+    originalResponse,
+    reason,
+    response,
+    status,
+    upstream,
+    rules,
+    service_name,
+    cached,
+}: ResponseCellProps) => {
+    const { t } = useTranslation();
+
+    const filters = useSelector((state: RootState) => state.filtering.filters, shallowEqual);
+
+    const whitelistFilters = useSelector((state: RootState) => state.filtering.whitelistFilters, shallowEqual);
+
+    const isDetailed = useSelector((state: RootState) => state.queryLogs.isDetailed);
+
+    const services = useSelector((store: RootState) => store?.services);
+
+    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 renderResponses = (responseArr: any) => {
+        if (!responseArr || responseArr.length === 0) {
+            return '';
+        }
+
+        return (
+            <div>
+                {responseArr.map((response: any) => {
+                    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,
+        ...(cached && {
+            served_from_cache_label: (
+                <svg className="icons icon--20 icon--green mb-1">
+                    <use xlinkHref="#check" />
+                </svg>
+            ),
+        }),
+        elapsed: formattedElapsedMs,
+        response_code: status,
+        ...(service_name &&
+            services.allServices && { service_name: getServiceName(services.allServices, service_name) }),
+        ...(rules.length > 0 && { rule_label: getRulesToFilterList(rules, filters, whitelistFilters) }),
+        response_table_header: renderResponses(response),
+        original_response: renderResponses(originalResponse),
+    };
+
+    const content =
+        rules.length > 0
+            ? Object.entries(COMMON_CONTENT)
+            : Object.entries({
+                  ...COMMON_CONTENT,
+                  filter: '',
+              });
+
+    const getDetailedInfo = (reason: any) => {
+        switch (reason) {
+            case FILTERED_STATUS.FILTERED_BLOCKED_SERVICE:
+                if (!service_name || !services.allServices) {
+                    return formattedElapsedMs;
+                }
+                return getServiceName(services.allServices, service_name);
+            case FILTERED_STATUS.FILTERED_BLACK_LIST:
+            case FILTERED_STATUS.NOT_FILTERED_WHITE_LIST:
+                return getFilterNames(rules, filters, whitelistFilters).join(', ');
+            default:
+                return formattedElapsedMs;
+        }
+    };
+
+    const detailedInfo = getDetailedInfo(reason);
+
+    return (
+        <div className="logs__cell logs__cell--response" role="gridcell">
+            <IconTooltip
+                className={classNames('icons mr-4 icon--24 icon--lightgray logs__question', { '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>
+    );
+};
+
+export default ResponseCell;

client/src/components/Logs/Cells/helpers/index.ts

@@ -2,20 +2,20 @@ import i18next from 'i18next';
 
 export const BUTTON_PREFIX = 'btn_';
 
-export const getBlockClientInfo = (ip, disallowed, disallowed_rule, allowedСlients) => {
+export const getBlockClientInfo = (ip: any, disallowed: any, disallowed_rule: any, allowedClients: any) => {
     let confirmMessage;
 
     if (disallowed) {
         confirmMessage = i18next.t('client_confirm_unblock', { ip: disallowed_rule || ip });
     } else {
         confirmMessage = `${i18next.t('adg_will_drop_dns_queries')} ${i18next.t('client_confirm_block', { ip })}`;
-        if (allowedСlients.length > 0) {
+        if (allowedClients.length > 0) {
             confirmMessage = confirmMessage.concat(`\n\n${i18next.t('filter_allowlist', { disallowed_rule })}`);
         }
     }
 
     const buttonKey = i18next.t(disallowed ? 'allow_this_client' : 'disallow_this_client');
-    const lastRuleInAllowlist = !disallowed && allowedСlients === disallowed_rule;
+    const lastRuleInAllowlist = !disallowed && allowedClients === disallowed_rule;
 
     return {
         confirmMessage,

client/src/components/Logs/Cells/index.js

@@ -1,285 +0,0 @@
-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,
-    getRulesToFilterList,
-    formatDateTime,
-    formatElapsedMs,
-    formatTime,
-    getBlockingClientName,
-    getServiceName,
-    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, toggleBlockingForClient } from '../../../actions';
-import DateCell from './DateCell';
-import DomainCell from './DomainCell';
-import ResponseCell from './ResponseCell';
-import ClientCell from './ClientCell';
-import { toggleClientBlock } from '../../../actions/access';
-import { getBlockClientInfo, BUTTON_PREFIX } from './helpers';
-import { updateLogs } from '../../../actions/queryLogs';
-
-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 processingSet = useSelector((state) => state.access.processingSet);
-    const allowedСlients = useSelector((state) => state.access.allowed_clients, shallowEqual);
-    const services = useSelector((store) => store?.services);
-
-    const clients = useSelector((state) => state.dashboard.clients);
-
-    const onClick = () => {
-        if (!isSmallScreen) {
-            return;
-        }
-        const {
-            answer_dnssec,
-            client,
-            domain,
-            elapsedMs,
-            client_info,
-            response,
-            time,
-            tracker,
-            upstream,
-            type,
-            client_proto,
-            client_id,
-            rules,
-            originalResponse,
-            status,
-            service_name,
-            cached,
-        } = rowProps;
-
-        const hasTracker = !!tracker;
-
-        const autoClient = autoClients
-            .find((autoClient) => autoClient.name === client);
-
-        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 {
-            confirmMessage,
-            buttonKey: blockingClientKey,
-            lastRuleInAllowlist,
-        } = getBlockClientInfo(
-            client,
-            client_info?.disallowed || false,
-            client_info?.disallowed_rule || '',
-            allowedСlients,
-        );
-
-        const blockingForClientKey = isFiltered ? 'unblock_for_this_client_only' : 'block_for_this_client_only';
-        const clientNameBlockingFor = getBlockingClientName(clients, client);
-
-        const onBlockingForClientClick = () => {
-            dispatch(toggleBlockingForClient(buttonType, domain, clientNameBlockingFor));
-        };
-
-        const onBlockingClientClick = async () => {
-            if (window.confirm(confirmMessage)) {
-                await dispatch(
-                    toggleClientBlock(
-                        client,
-                        client_info?.disallowed || false,
-                        client_info?.disallowed_rule || '',
-                    ),
-                );
-                await dispatch(updateLogs());
-                setModalOpened(false);
-            }
-        };
-
-        const blockButton = (
-            <>
-                <div className="title--border" />
-                <button
-                    type="button"
-                    className={
-                        classNames(
-                            'button-action--arrow-option mb-1',
-                            { 'bg--danger': !isBlocked },
-                            { 'bg--green': isFiltered },
-                        )}
-                    onClick={onToggleBlock}
-                >
-                    {t(buttonType)}
-                </button>
-            </>
-        );
-
-        const blockForClientButton = <button
-                className='text-center font-weight-bold py-1 button-action--arrow-option'
-                onClick={onBlockingForClientClick}>
-            {t(blockingForClientKey)}
-        </button>;
-
-        const blockClientButton = <button
-                className='text-center font-weight-bold py-1 button-action--arrow-option'
-                onClick={onBlockingClientClick}
-                disabled={processingSet || lastRuleInAllowlist}>
-            {t(blockingClientKey)}
-        </button>;
-
-        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,
-            ...(FILTERED_STATUS.FILTERED_BLOCKED_SERVICE && service_name && services.allServices
-                && { service_name: getServiceName(services.allServices, service_name) }),
-            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,
-            ...(cached
-                && {
-                    served_from_cache_label: (
-                        <svg className="icons icon--20 icon--green">
-                            <use xlinkHref="#check" />
-                        </svg>
-                    ),
-                }
-            ),
-            elapsed: formattedElapsedMs,
-            ...(rules.length > 0
-                    && { rule_label: getRulesToFilterList(rules, filters, whitelistFilters) }
-            ),
-            response_table_header: response?.join('\n'),
-            response_code: status,
-            client_details: 'title',
-            ip_address: client,
-            name: client_info?.name || client_id,
-            country: client_info?.whois?.country,
-            city: client_info?.whois?.city,
-            network: client_info?.whois?.orgname,
-            source_label: source,
-            validated_with_dnssec: dnssec_enabled ? Boolean(answer_dnssec) : false,
-            original_response: originalResponse?.join('\n'),
-            [BUTTON_PREFIX + buttonType]: blockButton,
-            [BUTTON_PREFIX + blockingForClientKey]: blockForClientButton,
-            [BUTTON_PREFIX + blockingClientKey]: blockClientButton,
-        };
-
-        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,
-        response: propTypes.array.isRequired,
-        time: propTypes.string.isRequired,
-        tracker: propTypes.object,
-        upstream: propTypes.string.isRequired,
-        cached: propTypes.bool.isRequired,
-        type: propTypes.string.isRequired,
-        client_proto: propTypes.string.isRequired,
-        client_id: propTypes.string,
-        ecs: propTypes.string,
-        client_info: propTypes.shape({
-            name: propTypes.string.isRequired,
-            whois: propTypes.shape({
-                country: propTypes.string,
-                city: propTypes.string,
-                orgname: propTypes.string,
-            }).isRequired,
-            disallowed: propTypes.bool.isRequired,
-            disallowed_rule: propTypes.string.isRequired,
-        }),
-        rules: propTypes.arrayOf(propTypes.shape({
-            text: propTypes.string.isRequired,
-            filter_list_id: propTypes.number.isRequired,
-        })),
-        originalResponse: propTypes.array,
-        status: propTypes.string.isRequired,
-        service_name: propTypes.string,
-    }).isRequired,
-    isSmallScreen: propTypes.bool.isRequired,
-    setDetailedDataCurrent: propTypes.func.isRequired,
-    setButtonType: propTypes.func.isRequired,
-    setModalOpened: propTypes.func.isRequired,
-};
-
-export default Row;

client/src/components/Logs/Cells/index.tsx

@@ -0,0 +1,306 @@
+import React, { Dispatch, memo, SetStateAction } from 'react';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import { shallowEqual, useDispatch, useSelector } from 'react-redux';
+
+import {
+    captitalizeWords,
+    checkFiltered,
+    getRulesToFilterList,
+    formatDateTime,
+    formatElapsedMs,
+    formatTime,
+    getBlockingClientName,
+    getServiceName,
+    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, toggleBlockingForClient } from '../../../actions';
+
+import DateCell from './DateCell';
+
+import DomainCell from './DomainCell';
+
+import ResponseCell from './ResponseCell';
+
+import ClientCell from './ClientCell';
+import { toggleClientBlock } from '../../../actions/access';
+import { getBlockClientInfo, BUTTON_PREFIX } from './helpers';
+import { updateLogs } from '../../../actions/queryLogs';
+
+import '../Logs.css';
+import { RootState } from '../../../initialState';
+
+interface RowProps {
+    style?: object;
+    rowProps: {
+        reason: string;
+        answer_dnssec: boolean;
+        client: string;
+        domain: string;
+        elapsedMs: string;
+        response: unknown[];
+        time: string;
+        tracker?: {
+            name: string;
+            category: string;
+        };
+        upstream: string;
+        cached: boolean;
+        type: string;
+        client_proto: string;
+        client_id?: string;
+        ecs?: string;
+        client_info?: {
+            name: string;
+            whois: {
+                country?: string;
+                city?: string;
+                orgname?: string;
+            };
+            disallowed: boolean;
+            disallowed_rule: string;
+        };
+        rules?: {
+            text: string;
+            filter_list_id: number;
+        }[];
+        originalResponse?: unknown[];
+        status: string;
+        service_name?: string;
+    };
+    isSmallScreen: boolean;
+    setDetailedDataCurrent: Dispatch<SetStateAction<any>>;
+    setButtonType: (...args: unknown[]) => unknown;
+    setModalOpened: (...args: unknown[]) => unknown;
+}
+
+const Row = memo(
+    ({
+        style,
+        rowProps,
+        rowProps: { reason },
+        isSmallScreen,
+        setDetailedDataCurrent,
+        setButtonType,
+        setModalOpened,
+    }: RowProps) => {
+        const dispatch = useDispatch();
+        const { t } = useTranslation();
+
+        const dnssec_enabled = useSelector((state: RootState) => state.dnsConfig.dnssec_enabled);
+
+        const filters = useSelector((state: RootState) => state.filtering.filters, shallowEqual);
+
+        const whitelistFilters = useSelector((state: RootState) => state.filtering.whitelistFilters, shallowEqual);
+
+        const autoClients = useSelector((state: RootState) => state.dashboard.autoClients, shallowEqual);
+
+        const processingSet = useSelector((state: RootState) => state.access.processingSet);
+
+        const allowedClients = useSelector((state: RootState) => state.access.allowed_clients, shallowEqual);
+
+        const services = useSelector((state: RootState) => state?.services);
+
+        const clients = useSelector((state: RootState) => state.dashboard.clients);
+
+        const onClick = () => {
+            if (!isSmallScreen) {
+                return;
+            }
+            const {
+                answer_dnssec,
+                client,
+                domain,
+                elapsedMs,
+                client_info,
+                response,
+                time,
+                tracker,
+                upstream,
+                type,
+                client_proto,
+                client_id,
+                rules,
+                originalResponse,
+                status,
+                service_name,
+                cached,
+            } = rowProps;
+
+            const hasTracker = !!tracker;
+
+            const autoClient = autoClients.find((autoClient: any) => autoClient.name === client);
+
+            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 {
+                confirmMessage,
+                buttonKey: blockingClientKey,
+                lastRuleInAllowlist,
+            } = getBlockClientInfo(
+                client,
+                client_info?.disallowed || false,
+                client_info?.disallowed_rule || '',
+                allowedClients,
+            );
+
+            const blockingForClientKey = isFiltered ? 'unblock_for_this_client_only' : 'block_for_this_client_only';
+            const clientNameBlockingFor = getBlockingClientName(clients, client);
+
+            const onBlockingForClientClick = () => {
+                dispatch(toggleBlockingForClient(buttonType, domain, clientNameBlockingFor));
+            };
+
+            const onBlockingClientClick = async () => {
+                if (window.confirm(confirmMessage)) {
+                    await dispatch(
+                        toggleClientBlock(client, client_info?.disallowed || false, client_info?.disallowed_rule || ''),
+                    );
+                    await dispatch(updateLogs());
+                    setModalOpened(false);
+                }
+            };
+
+            const blockButton = (
+                <>
+                    <div className="title--border" />
+
+                    <button
+                        type="button"
+                        className={classNames(
+                            'button-action--arrow-option mb-1',
+                            { 'bg--danger': !isBlocked },
+                            { 'bg--green': isFiltered },
+                        )}
+                        onClick={onToggleBlock}>
+                        {t(buttonType)}
+                    </button>
+                </>
+            );
+
+            const blockForClientButton = (
+                <button
+                    className="text-center font-weight-bold py-1 button-action--arrow-option"
+                    onClick={onBlockingForClientClick}>
+                    {t(blockingForClientKey)}
+                </button>
+            );
+
+            const blockClientButton = (
+                <button
+                    className="text-center font-weight-bold py-1 button-action--arrow-option"
+                    onClick={onBlockingClientClick}
+                    disabled={processingSet || lastRuleInAllowlist}>
+                    {t(blockingClientKey)}
+                </button>
+            );
+
+            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,
+                ...(FILTERED_STATUS.FILTERED_BLOCKED_SERVICE &&
+                    service_name &&
+                    services.allServices && { service_name: getServiceName(services.allServices, service_name) }),
+                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,
+                ...(cached && {
+                    served_from_cache_label: (
+                        <svg className="icons icon--20 icon--green">
+                            <use xlinkHref="#check" />
+                        </svg>
+                    ),
+                }),
+                elapsed: formattedElapsedMs,
+                ...(rules.length > 0 && { rule_label: getRulesToFilterList(rules, filters, whitelistFilters) }),
+                response_table_header: response?.join('\n'),
+                response_code: status,
+                client_details: 'title',
+                ip_address: client,
+                name: client_info?.name || client_id,
+                country: client_info?.whois?.country,
+                city: client_info?.whois?.city,
+                network: client_info?.whois?.orgname,
+                source_label: source,
+                validated_with_dnssec: dnssec_enabled ? Boolean(answer_dnssec) : false,
+                original_response: originalResponse?.join('\n'),
+                [BUTTON_PREFIX + buttonType]: blockButton,
+                [BUTTON_PREFIX + blockingForClientKey]: blockForClientButton,
+                [BUTTON_PREFIX + blockingClientKey]: blockClientButton,
+            };
+
+            setDetailedDataCurrent(processContent(detailedData));
+            setButtonType(buttonType);
+            setModalOpened(true);
+        };
+
+        const isDetailed = useSelector((state: RootState) => 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';
+
+export default Row;

client/src/components/Logs/Disabled.tsx

@@ -1,5 +1,6 @@
 import React, { Fragment } from 'react';
 import { Trans } from 'react-i18next';
+
 import { HashLink as Link } from 'react-router-hash-link';
 
 import Card from '../ui/Card';
@@ -11,6 +12,7 @@ const Disabled = () => (
                 <Trans>query_log</Trans>
             </h1>
         </div>
+
         <Card>
             <div className="lead text-center py-6">
                 <Trans
@@ -18,8 +20,7 @@ const Disabled = () => (
                         <Link to="/settings#logs-config" key="0">
                             link
                         </Link>,
-                    ]}
-                >
+                    ]}>
                     query_log_disabled
                 </Trans>
             </div>

client/src/components/Logs/Filters/Form.js

@@ -1,200 +0,0 @@
-import React, { useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { Field, reduxForm } from 'redux-form';
-import { useTranslation } from 'react-i18next';
-import { shallowEqual, useDispatch, useSelector } from 'react-redux';
-import { useHistory } from 'react-router-dom';
-import classNames from 'classnames';
-import {
-    DEBOUNCE_FILTER_TIMEOUT,
-    DEFAULT_LOGS_FILTER,
-    FORM_NAME,
-    RESPONSE_FILTER,
-    RESPONSE_FILTER_QUERIES,
-} from '../../../helpers/constants';
-import { setLogsFilter } from '../../../actions/queryLogs';
-import useDebounce from '../../../helpers/useDebounce';
-import { createOnBlurHandler, getLogsUrlParams } from '../../../helpers/helpers';
-import Tooltip from '../../ui/Tooltip';
-
-const renderFilterField = ({
-    input,
-    id,
-    className,
-    placeholder,
-    type,
-    disabled,
-    autoComplete,
-    tooltip,
-    meta: { touched, error },
-    onClearInputClick,
-    onKeyDown,
-    normalizeOnBlur,
-}) => {
-    const onBlur = (event) => createOnBlurHandler(event, input, normalizeOnBlur);
-
-    return <>
-        <div className="input-group-search input-group-search__icon--magnifier">
-            <svg className="icons icon--24 icon--gray">
-                <use xlinkHref="#magnifier" />
-            </svg>
-        </div>
-        <input
-            {...input}
-            id={id}
-            placeholder={placeholder}
-            type={type}
-            className={className}
-            disabled={disabled}
-            autoComplete={autoComplete}
-            aria-label={placeholder}
-            onKeyDown={onKeyDown}
-            onBlur={onBlur}
-        />
-        <div
-            className={classNames('input-group-search input-group-search__icon--cross', { invisible: input.value.length < 1 })}>
-            <svg className="icons icon--20 icon--gray" onClick={onClearInputClick}>
-                <use xlinkHref="#cross" />
-            </svg>
-        </div>
-        <span className="input-group-search input-group-search__icon--tooltip">
-            <Tooltip content={tooltip} className="tooltip-container">
-                <svg className="icons icon--20 icon--gray">
-                    <use xlinkHref="#question" />
-                </svg>
-            </Tooltip>
-    </span>
-        {!disabled
-        && touched
-        && (error && <span className="form__message form__message--error">{error}</span>)}
-    </>;
-};
-
-renderFilterField.propTypes = {
-    input: PropTypes.object.isRequired,
-    id: PropTypes.string.isRequired,
-    onClearInputClick: PropTypes.func.isRequired,
-    className: PropTypes.string,
-    placeholder: PropTypes.string,
-    type: PropTypes.string,
-    disabled: PropTypes.string,
-    autoComplete: PropTypes.string,
-    tooltip: PropTypes.string,
-    onKeyDown: PropTypes.func,
-    normalizeOnBlur: PropTypes.func,
-    meta: PropTypes.shape({
-        touched: PropTypes.bool,
-        error: PropTypes.object,
-    }).isRequired,
-};
-
-const FORM_NAMES = {
-    search: 'search',
-    response_status: 'response_status',
-};
-
-const Form = (props) => {
-    const {
-        className = '',
-        responseStatusClass,
-        setIsLoading,
-        change,
-    } = props;
-
-    const { t } = useTranslation();
-    const dispatch = useDispatch();
-    const history = useHistory();
-
-    const {
-        response_status, search,
-    } = useSelector((state) => state?.form[FORM_NAME.LOGS_FILTER].values, shallowEqual);
-
-    const [
-        debouncedSearch,
-        setDebouncedSearch,
-    ] = useDebounce(search.trim(), DEBOUNCE_FILTER_TIMEOUT);
-
-    useEffect(() => {
-        dispatch(setLogsFilter({
-            response_status,
-            search: debouncedSearch,
-        }));
-
-        history.replace(`${getLogsUrlParams(debouncedSearch, response_status)}`);
-    }, [response_status, debouncedSearch]);
-
-    if (response_status && !(response_status in RESPONSE_FILTER_QUERIES)) {
-        change(FORM_NAMES.response_status, DEFAULT_LOGS_FILTER[FORM_NAMES.response_status]);
-    }
-
-    const onInputClear = async () => {
-        setIsLoading(true);
-        change(FORM_NAMES.search, DEFAULT_LOGS_FILTER[FORM_NAMES.search]);
-        setIsLoading(false);
-    };
-
-    const onEnterPress = (e) => {
-        if (e.key === 'Enter') {
-            setDebouncedSearch(search);
-        }
-    };
-
-    const normalizeOnBlur = (data) => data.trim();
-
-    return (
-        <form
-            className="d-flex flex-wrap form-control--container"
-            onSubmit={(e) => {
-                e.preventDefault();
-            }}
-        >
-            <div className="field__search">
-                <Field
-                    id={FORM_NAMES.search}
-                    name={FORM_NAMES.search}
-                    component={renderFilterField}
-                    type="text"
-                    className={classNames('form-control form-control--search form-control--transparent', className)}
-                    placeholder={t('domain_or_client')}
-                    tooltip={t('query_log_strict_search')}
-                    onClearInputClick={onInputClear}
-                    onKeyDown={onEnterPress}
-                    normalizeOnBlur={normalizeOnBlur}
-                />
-            </div>
-            <div className="field__select">
-                <Field
-                    name={FORM_NAMES.response_status}
-                    component="select"
-                    className={classNames('form-control custom-select custom-select--logs custom-select__arrow--left form-control--transparent', responseStatusClass)}
-                >
-                    {Object.values(RESPONSE_FILTER)
-                        .map(({
-                            QUERY, LABEL, disabled,
-                        }) => (
-                            <option
-                                key={LABEL}
-                                value={QUERY}
-                                disabled={disabled}
-                            >
-                                {t(LABEL)}
-                            </option>
-                        ))
-                    }
-                </Field>
-            </div>
-        </form>
-    );
-};
-
-Form.propTypes = {
-    className: PropTypes.string,
-    responseStatusClass: PropTypes.string,
-    change: PropTypes.func.isRequired,
-    setIsLoading: PropTypes.func.isRequired,
-};
-
-export default reduxForm({
-    form: FORM_NAME.LOGS_FILTER,
-    enableReinitialize: true,
-})(Form);

client/src/components/Logs/Filters/Form.tsx

@@ -0,0 +1,201 @@
+import React, { useEffect } from 'react';
+
+import { Field, reduxForm } from 'redux-form';
+import { useTranslation } from 'react-i18next';
+import { shallowEqual, useDispatch, useSelector } from 'react-redux';
+
+import { useHistory } from 'react-router-dom';
+import classNames from 'classnames';
+import {
+    DEBOUNCE_FILTER_TIMEOUT,
+    DEFAULT_LOGS_FILTER,
+    FORM_NAME,
+    RESPONSE_FILTER,
+    RESPONSE_FILTER_QUERIES,
+} from '../../../helpers/constants';
+import { setLogsFilter } from '../../../actions/queryLogs';
+import useDebounce from '../../../helpers/useDebounce';
+
+import { createOnBlurHandler, getLogsUrlParams } from '../../../helpers/helpers';
+
+import Tooltip from '../../ui/Tooltip';
+import { RootState } from '../../../initialState';
+
+interface renderFilterFieldProps {
+    input: {
+        value: string;
+    };
+    id: string;
+    onClearInputClick: (...args: unknown[]) => unknown;
+    className?: string;
+    placeholder?: string;
+    type?: string;
+    disabled?: boolean;
+    autoComplete?: string;
+    tooltip?: string;
+    onKeyDown?: (...args: unknown[]) => unknown;
+    normalizeOnBlur?: (...args: unknown[]) => unknown;
+    meta: {
+        touched?: boolean;
+        error?: object;
+    };
+}
+
+const renderFilterField = ({
+    input,
+    id,
+    className,
+    placeholder,
+    type,
+    disabled,
+    autoComplete,
+    tooltip,
+    meta: { touched, error },
+    onClearInputClick,
+    onKeyDown,
+    normalizeOnBlur,
+}: renderFilterFieldProps) => {
+    const onBlur = (event: any) => createOnBlurHandler(event, input, normalizeOnBlur);
+
+    return (
+        <>
+            <div className="input-group-search input-group-search__icon--magnifier">
+                <svg className="icons icon--24 icon--gray">
+                    <use xlinkHref="#magnifier" />
+                </svg>
+            </div>
+
+            <input
+                {...input}
+                id={id}
+                placeholder={placeholder}
+                type={type}
+                className={className}
+                disabled={disabled}
+                autoComplete={autoComplete}
+                aria-label={placeholder}
+                onKeyDown={onKeyDown}
+                onBlur={onBlur}
+            />
+
+            <div
+                className={classNames('input-group-search input-group-search__icon--cross', {
+                    invisible: input.value.length < 1,
+                })}>
+                <svg className="icons icon--20 icon--gray" onClick={onClearInputClick}>
+                    <use xlinkHref="#cross" />
+                </svg>
+            </div>
+
+            <span className="input-group-search input-group-search__icon--tooltip">
+                <Tooltip content={tooltip} className="tooltip-container">
+                    <svg className="icons icon--20 icon--gray">
+                        <use xlinkHref="#question" />
+                    </svg>
+                </Tooltip>
+            </span>
+            {!disabled && touched && error && <span className="form__message form__message--error">{error}</span>}
+        </>
+    );
+};
+
+const FORM_NAMES = {
+    search: 'search',
+    response_status: 'response_status',
+};
+
+interface FiltersFormProps {
+    className?: string;
+    responseStatusClass?: string;
+    change: (...args: unknown[]) => unknown;
+    setIsLoading?: (...args: unknown[]) => unknown;
+}
+
+const Form = (props: FiltersFormProps) => {
+    const { className = '', responseStatusClass, setIsLoading, change } = props;
+
+    const { t } = useTranslation();
+    const dispatch = useDispatch();
+    const history = useHistory();
+
+    const { response_status, search } = useSelector(
+        (state: RootState) => state?.form[FORM_NAME.LOGS_FILTER].values,
+        shallowEqual,
+    );
+
+    const [debouncedSearch, setDebouncedSearch] = useDebounce(search.trim(), DEBOUNCE_FILTER_TIMEOUT);
+
+    useEffect(() => {
+        dispatch(
+            setLogsFilter({
+                response_status,
+                search: debouncedSearch,
+            }),
+        );
+
+        history.replace(`${getLogsUrlParams(debouncedSearch, response_status)}`);
+    }, [response_status, debouncedSearch]);
+
+    if (response_status && !(response_status in RESPONSE_FILTER_QUERIES)) {
+        change(FORM_NAMES.response_status, DEFAULT_LOGS_FILTER[FORM_NAMES.response_status]);
+    }
+
+    const onInputClear = async () => {
+        setIsLoading(true);
+
+        change(FORM_NAMES.search, DEFAULT_LOGS_FILTER[FORM_NAMES.search]);
+        setIsLoading(false);
+    };
+
+    const onEnterPress = (e: any) => {
+        if (e.key === 'Enter') {
+            setDebouncedSearch(search);
+        }
+    };
+
+    const normalizeOnBlur = (data: any) => data.trim();
+
+    return (
+        <form
+            className="d-flex flex-wrap form-control--container"
+            onSubmit={(e) => {
+                e.preventDefault();
+            }}>
+            <div className="field__search">
+                <Field
+                    id={FORM_NAMES.search}
+                    name={FORM_NAMES.search}
+                    component={renderFilterField}
+                    type="text"
+                    className={classNames('form-control form-control--search form-control--transparent', className)}
+                    placeholder={t('domain_or_client')}
+                    tooltip={t('query_log_strict_search')}
+                    onClearInputClick={onInputClear}
+                    onKeyDown={onEnterPress}
+                    normalizeOnBlur={normalizeOnBlur}
+                />
+            </div>
+
+            <div className="field__select">
+                <Field
+                    name={FORM_NAMES.response_status}
+                    component="select"
+                    className={classNames(
+                        'form-control custom-select custom-select--logs custom-select__arrow--left form-control--transparent',
+                        responseStatusClass,
+                    )}>
+                    {Object.values(RESPONSE_FILTER).map(({ QUERY, LABEL, disabled }: any) => (
+                        <option key={LABEL} value={QUERY} disabled={disabled}>
+                            {t(LABEL)}
+                        </option>
+                    ))}
+                </Field>
+            </div>
+        </form>
+    );
+};
+
+export default reduxForm({
+    form: FORM_NAME.LOGS_FILTER,
+    enableReinitialize: true,
+})(Form);

client/src/components/Logs/Filters/index.tsx

@@ -1,12 +1,18 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
+
 import Form from './Form';
 import { refreshFilteredLogs } from '../../../actions/queryLogs';
 import { addSuccessToast } from '../../../actions/toasts';
 
-const Filters = ({ filter, setIsLoading }) => {
+interface FiltersProps {
+    filter: object;
+    processingGetLogs: boolean;
+    setIsLoading: (...args: unknown[]) => unknown;
+}
+
+const Filters = ({ filter, setIsLoading }: FiltersProps) => {
     const { t } = useTranslation();
     const dispatch = useDispatch();
 
@@ -17,32 +23,29 @@ const Filters = ({ filter, setIsLoading }) => {
         setIsLoading(false);
     };
 
-    return <div className="page-header page-header--logs">
-        <h1 className="page-title page-title--large">
-            {t('query_log')}
-            <button
+    return (
+        <div className="page-header page-header--logs">
+            <h1 className="page-title page-title--large">
+                {t('query_log')}
+
+                <button
                     type="button"
                     className="btn btn-icon--green logs__refresh"
                     title={t('refresh_btn')}
-                    onClick={refreshLogs}
-            >
-                <svg className="icons icon--24">
-                    <use xlinkHref="#update" />
-                </svg>
-            </button>
-        </h1>
-        <Form
-                responseStatusClass="d-sm-block"
-                initialValues={filter}
-                setIsLoading={setIsLoading}
-        />
-    </div>;
-};
+                    onClick={refreshLogs}>
+                    <svg className="icons icon--24">
+                        <use xlinkHref="#update" />
+                    </svg>
+                </button>
+            </h1>
 
-Filters.propTypes = {
-    filter: PropTypes.object.isRequired,
-    processingGetLogs: PropTypes.bool.isRequired,
-    setIsLoading: PropTypes.func.isRequired,
+            <Form
+                // responseStatusClass="d-sm-block"
+                // setIsLoading={setIsLoading}
+                initialValues={filter}
+            />
+        </div>
+    );
 };
 
 export default Filters;

client/src/components/Logs/InfiniteTable.tsx

@@ -1,18 +1,27 @@
-import React, {
-    useCallback,
-    useEffect,
-    useRef,
-} from 'react';
+import React, { Dispatch, SetStateAction, useCallback, useEffect, useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
-import propTypes from 'prop-types';
 import throttle from 'lodash/throttle';
+
 import Loading from '../ui/Loading';
+
 import Header from './Cells/Header';
 import { getLogs } from '../../actions/queryLogs';
+
 import Row from './Cells';
+
 import { isScrolledIntoView } from '../../helpers/helpers';
 import { QUERY_LOGS_PAGE_LIMIT } from '../../helpers/constants';
+import { RootState } from '../../initialState';
+
+interface InfiniteTableProps {
+    isLoading: boolean;
+    items: unknown[];
+    isSmallScreen: boolean;
+    setDetailedDataCurrent: Dispatch<SetStateAction<any>>;
+    setButtonType: (...args: unknown[]) => unknown;
+    setModalOpened: (...args: unknown[]) => unknown;
+}
 
 const InfiniteTable = ({
     isLoading,
@@ -21,14 +30,15 @@ const InfiniteTable = ({
     setDetailedDataCurrent,
     setButtonType,
     setModalOpened,
-}) => {
+}: InfiniteTableProps) => {
     const { t } = useTranslation();
     const dispatch = useDispatch();
     const loader = useRef(null);
     const loadingRef = useRef(null);
 
-    const isEntireLog = useSelector((state) => state.queryLogs.isEntireLog);
-    const processingGetLogs = useSelector((state) => state.queryLogs.processingGetLogs);
+    const isEntireLog = useSelector((state: RootState) => state.queryLogs.isEntireLog);
+
+    const processingGetLogs = useSelector((state: RootState) => state.queryLogs.processingGetLogs);
     const loading = isLoading || processingGetLogs;
 
     const listener = useCallback(() => {
@@ -55,20 +65,23 @@ const InfiniteTable = ({
         };
     }, []);
 
-    const renderRow = (row, idx) => <Row
-        key={idx}
-        rowProps={row}
-        isSmallScreen={isSmallScreen}
-        setDetailedDataCurrent={setDetailedDataCurrent}
-        setButtonType={setButtonType}
-        setModalOpened={setModalOpened}
-    />;
+    const renderRow = (row: any, idx: any) => (
+        <Row
+            key={idx}
+            rowProps={row}
+            isSmallScreen={isSmallScreen}
+            setDetailedDataCurrent={setDetailedDataCurrent}
+            setButtonType={setButtonType}
+            setModalOpened={setModalOpened}
+        />
+    );
 
     const isNothingFound = items.length === 0 && !processingGetLogs;
 
     return (
         <div className="logs__table" role="grid">
             {loading && <Loading />}
+
             <Header />
             {isNothingFound ? (
                 <label className="logs__no-data">{t('nothing_found')}</label>
@@ -86,13 +99,4 @@ const InfiniteTable = ({
     );
 };
 
-InfiniteTable.propTypes = {
-    isLoading: propTypes.bool.isRequired,
-    items: propTypes.array.isRequired,
-    isSmallScreen: propTypes.bool.isRequired,
-    setDetailedDataCurrent: propTypes.func.isRequired,
-    setButtonType: propTypes.func.isRequired,
-    setModalOpened: propTypes.func.isRequired,
-};
-
 export default InfiniteTable;

client/src/components/Logs/Logs.css

@@ -24,7 +24,7 @@
     --option-border-radius: 4px;
 }
 
-[data-theme="dark"] {
+[data-theme='dark'] {
     --red: rgba(223, 56, 18, 0.25);
     --green-pale: rgba(103, 178, 121, 0.25);
     --yellow: rgba(247, 181, 0, 0.2);
@@ -42,11 +42,11 @@
     line-height: 1.5rem;
 }
 
-[data-theme="dark"] .logs__text a {
+[data-theme='dark'] .logs__text a {
     color: var(--gray-f3);
 }
 
-[data-theme="dark"] .logs__text a:hover {
+[data-theme='dark'] .logs__text a:hover {
     color: var(--gray-f3);
 }
 
@@ -74,9 +74,9 @@
     color: #295a9f;
 }
 
-[data-theme="dark"] .logs__text--link,
-[data-theme="dark"] .logs__text--link:hover,
-[data-theme="dark"] .logs__text--link:focus {
+[data-theme='dark'] .logs__text--link,
+[data-theme='dark'] .logs__text--link:hover,
+[data-theme='dark'] .logs__text--link:focus {
     color: var(--gray-f3);
 }
 
@@ -90,7 +90,7 @@
     border-radius: 4px;
 }
 
-[data-theme=dark] .icon--selected {
+[data-theme='dark'] .icon--selected {
     opacity: 0.75;
 }
 
@@ -131,7 +131,7 @@
 }
 
 .custom-select__arrow--left {
-    background: var(--white) url("../ui/svg/chevron-down.svg") no-repeat;
+    background: var(--white) url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM5YWEwYWMiCiAgICAgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItY2hldnJvbi1kb3duIj4KICAgIDxwb2x5bGluZSBwb2ludHM9IjYgOSAxMiAxNSAxOCA5Ij48L3BvbHlsaW5lPgo8L3N2Zz4K") no-repeat;
     background-position: 5px 9px;
     background-size: 22px;
 }
@@ -150,7 +150,7 @@
     background-color: transparent !important;
 }
 
-[data-theme="dark"] .form-control--transparent option {
+[data-theme='dark'] .form-control--transparent option {
     background-color: var(--card-bgcolor);
 }
 
@@ -351,7 +351,7 @@
     overflow: hidden;
 }
 
-[data-theme="dark"] .tooltip-custom__container .button-action--arrow-option:not(:disabled):hover {
+[data-theme='dark'] .tooltip-custom__container .button-action--arrow-option:not(:disabled):hover {
     background: var(--ctrl-dropdown-bgcolor-focus);
 }
 
@@ -387,7 +387,7 @@
     background-color: var(--logs__row--blue-bgcolor);
 }
 
-[data-theme="dark"] .logs__row--blue .logs__text--link {
+[data-theme='dark'] .logs__row--blue .logs__text--link {
     color: var(--white);
 }
 
@@ -465,13 +465,13 @@
 }
 
 .logs__whois::after {
-    content: "|";
+    content: '|';
     padding: 0 5px;
     opacity: 0.3;
 }
 
 .logs__whois:last-child::after {
-    content: "";
+    content: '';
 }
 
 .logs__whois-icon.icons {
@@ -501,7 +501,7 @@
     color: var(--green79);
 }
 
-[data-theme="dark"] .logs__question.icon--lightgray {
+[data-theme='dark'] .logs__question.icon--lightgray {
     color: var(--gray-f3);
 }
 
@@ -533,6 +533,6 @@
     clip: rect(0 0 0 0);
 }
 
-[data-theme="dark"] .button-action__icon {
+[data-theme='dark'] .button-action__icon {
     color: var(--gray-f3);
 }

client/src/components/Logs/index.tsx

@@ -1,35 +1,36 @@
 import React, { useEffect, useState } from 'react';
 import { Trans } from 'react-i18next';
+
 import Modal from 'react-modal';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
+
 import { useHistory } from 'react-router-dom';
 import queryString from 'query-string';
 import classNames from 'classnames';
-import {
-    BLOCK_ACTIONS,
-    MEDIUM_SCREEN_SIZE,
-} from '../../helpers/constants';
+import { BLOCK_ACTIONS, MEDIUM_SCREEN_SIZE } from '../../helpers/constants';
+
 import Loading from '../ui/Loading';
+
 import Filters from './Filters';
+
 import Disabled from './Disabled';
 import { getFilteringStatus } from '../../actions/filtering';
+
 import { getClients } from '../../actions';
 import { getDnsConfig } from '../../actions/dnsConfig';
 import { getAccessList } from '../../actions/access';
 import { getAllBlockedServices } from '../../actions/services';
-import {
-    getLogsConfig,
-    resetFilteredLogs,
-    setFilteredLogs,
-    toggleDetailedLogs,
-} from '../../actions/queryLogs';
+import { getLogsConfig, resetFilteredLogs, setFilteredLogs, toggleDetailedLogs } from '../../actions/queryLogs';
+
 import InfiniteTable from './InfiniteTable';
 import './Logs.css';
 import { BUTTON_PREFIX } from './Cells/helpers';
-import AnonymizerNotification from './AnonymizerNotification';
 
-const processContent = (data) => Object.entries(data)
-    .map(([key, value]) => {
+import AnonymizerNotification from './AnonymizerNotification';
+import { RootState } from '../../initialState';
+
+const processContent = (data: any, buttonType: string) =>
+    Object.entries(data).map(([key, value]) => {
         if (!value) {
             return null;
         }
@@ -53,12 +54,12 @@ const processContent = (data) => Object.entries(data)
                 <div
                     className={classNames(`key__${key}`, keyClass, {
                         'font-weight-bold': isBoolean && value === true,
-                    })}
-                >
+                    })}>
                     <Trans>{isButton ? value : key}</Trans>
                 </div>
+
                 <div className={`value__${key} text-pre text-truncate`}>
-                    <Trans>{(isTitle || isButton || isBoolean) ? '' : value || '—'}</Trans>
+                    <Trans>{isTitle || isButton || isBoolean ? '' : value || '—'}</Trans>
                 </div>
             </div>
         );
@@ -68,20 +69,21 @@ const Logs = () => {
     const dispatch = useDispatch();
     const history = useHistory();
 
-    const {
-        response_status: response_status_url_param,
-        search: search_url_param,
-    } = queryString.parse(history.location.search);
+    const { response_status: response_status_url_param, search: search_url_param } = queryString.parse(
+        history.location.search,
+    );
 
     const {
         enabled,
         processingGetConfig,
-        processingAdditionalLogs,
+        // processingAdditionalLogs,
         processingGetLogs,
         anonymize_client_ip: anonymizeClientIp,
-    } = useSelector((state) => state.queryLogs, shallowEqual);
-    const filter = useSelector((state) => state.queryLogs.filter, shallowEqual);
-    const logs = useSelector((state) => state.queryLogs.logs, shallowEqual);
+    } = useSelector((state: RootState) => state.queryLogs, shallowEqual);
+
+    const filter = useSelector((state: RootState) => state.queryLogs.filter, shallowEqual);
+
+    const logs = useSelector((state: RootState) => state.queryLogs.logs, shallowEqual);
 
     const search = search_url_param || filter?.search || '';
     const response_status = response_status_url_param || filter?.response_status || '';
@@ -97,16 +99,18 @@ const Logs = () => {
     useEffect(() => {
         (async () => {
             setIsLoading(true);
-            await dispatch(setFilteredLogs({
-                search,
-                response_status,
-            }));
+            await dispatch(
+                setFilteredLogs({
+                    search,
+                    response_status,
+                }),
+            );
             setIsLoading(false);
         })();
     }, [response_status, search]);
 
     const mediaQuery = window.matchMedia(`(max-width: ${MEDIUM_SCREEN_SIZE}px)`);
-    const mediaQueryHandler = (e) => {
+    const mediaQueryHandler = (e: any) => {
         setIsSmallScreen(e.matches);
         if (e.matches) {
             dispatch(toggleDetailedLogs(false));
@@ -133,11 +137,7 @@ const Logs = () => {
             dispatch(getClients());
             dispatch(getAllBlockedServices());
             try {
-                await Promise.all([
-                    dispatch(getLogsConfig()),
-                    dispatch(getDnsConfig()),
-                    dispatch(getAccessList()),
-                ]);
+                await Promise.all([dispatch(getLogsConfig()), dispatch(getDnsConfig()), dispatch(getAccessList())]);
             } catch (err) {
                 console.error(err);
             } finally {
@@ -165,70 +165,74 @@ const Logs = () => {
         if (!history.location.search) {
             (async () => {
                 setIsLoading(true);
+
                 await dispatch(setFilteredLogs());
                 setIsLoading(false);
             })();
         }
     }, [history.location.search]);
 
-    const renderPage = () => <>
-        <Filters
+    const renderPage = () => (
+        <>
+            <Filters
                 filter={{
                     response_status,
                     search,
                 }}
                 setIsLoading={setIsLoading}
                 processingGetLogs={processingGetLogs}
-                processingAdditionalLogs={processingAdditionalLogs}
-        />
-        <InfiniteTable
+                // processingAdditionalLogs={processingAdditionalLogs}
+            />
+
+            <InfiniteTable
                 isLoading={isLoading}
                 items={logs}
                 isSmallScreen={isSmallScreen}
                 setDetailedDataCurrent={setDetailedDataCurrent}
                 setButtonType={setButtonType}
                 setModalOpened={setModalOpened}
-        />
-        <Modal
-            portalClassName='grid'
-            isOpen={isSmallScreen && isModalOpened}
-            onRequestClose={closeModal}
-            style={{
-                content: {
-                    width: 'calc(100% - 32px)',
-                    height: 'fit-content',
-                    left: '50%',
-                    top: 47,
-                    padding: '0',
-                    maxWidth: '720px',
-                    transform: 'translateX(-50%)',
-                },
-                overlay: {
-                    backgroundColor: 'rgba(0,0,0,0.5)',
-                },
-            }}
-        >
-            <div className="logs__modal-wrap">
-                <svg
-                    className="icon icon--24 icon-cross d-block cursor--pointer"
-                    onClick={closeModal}
-                >
-                    <use xlinkHref="#cross" />
-                </svg>
-                {processContent(detailedDataCurrent, buttonType)}
-            </div>
-        </Modal>
-    </>;
+            />
+
+            <Modal
+                portalClassName="grid"
+                isOpen={isSmallScreen && isModalOpened}
+                onRequestClose={closeModal}
+                style={{
+                    content: {
+                        width: 'calc(100% - 32px)',
+                        height: 'fit-content',
+                        left: '50%',
+                        top: 47,
+                        padding: '0',
+                        maxWidth: '720px',
+                        transform: 'translateX(-50%)',
+                    },
+                    overlay: {
+                        backgroundColor: 'rgba(0,0,0,0.5)',
+                    },
+                }}>
+                <div className="logs__modal-wrap">
+                    <svg className="icon icon--24 icon-cross d-block cursor--pointer" onClick={closeModal}>
+                        <use xlinkHref="#cross" />
+                    </svg>
+
+                    {processContent(detailedDataCurrent, buttonType)}
+                </div>
+            </Modal>
+        </>
+    );
 
     return (
         <>
             {enabled && (
                 <>
                     {processingGetConfig && <Loading />}
+
                     {anonymizeClientIp && <AnonymizerNotification />}
                     {!processingGetConfig && renderPage()}
                 </>
             )}
+
             {!enabled && !processingGetConfig && <Disabled />}
         </>
     );