Pull request: querylog: search clients by name, enrich http resp

Updates #1273.

Squashed commit of the following:

commit 55b78153b1b775c855e759011141bbbe6d4b962c
Author: Artem Baskal <a.baskal@adguard.com>
Date:   Fri Apr 2 16:55:39 2021 +0300

    Update client_info in case of null

commit 5c80c1438ed9d961af11617831b704d6ae15cc34
Author: Ainar Garipov <A.Garipov@AdGuard.COM>
Date:   Fri Apr 2 16:24:14 2021 +0300

    querylog: always set client_info

commit b48efd64d757cc0bcf5b34de22fdd0b0464d98a6
Merge: 4ed7eab5 23c9f528
Author: Ainar Garipov <A.Garipov@AdGuard.COM>
Date:   Fri Apr 2 16:22:08 2021 +0300

    Merge branch 'master' into 1273-querylog-client-name

commit 4ed7eab52b6b5b0c0ddb5aa5a3225a62d1f9265b
Merge: dbf990eb 70d4c70e
Author: Ainar Garipov <A.Garipov@AdGuard.COM>
Date:   Fri Apr 2 12:57:17 2021 +0300

    Merge branch 'master' into 1273-querylog-client-name

commit dbf990eb881116754554270e7b691b5db8e9ee34
Author: Ainar Garipov <A.Garipov@AdGuard.COM>
Date:   Fri Apr 2 12:56:13 2021 +0300

    home: imp names

commit c2cfdef494ca26fff62b9fa008f1b389d9d4d46b
Author: Artem Baskal <a.baskal@adguard.com>
Date:   Thu Apr 1 19:26:04 2021 +0300

    Rename to whois

commit e3cc4a68ee576770b1922680155308e33bed31e8
Author: Ainar Garipov <A.Garipov@AdGuard.COM>
Date:   Thu Apr 1 19:03:42 2021 +0300

    home: imp whois more

commit 3b8ef8691c298aff35946b35923ef2e5b1f9bbbe
Author: Ainar Garipov <A.Garipov@AdGuard.COM>
Date:   Thu Apr 1 18:51:14 2021 +0300

    home: imp whois resp

commit fb97e0d74976723a512d6ff4c69e830fe59c8df8
Author: Artem Baskal <a.baskal@adguard.com>
Date:   Thu Apr 1 18:00:03 2021 +0300

    Fix client_info ids prop types

commit 298005189e372651ceff453e88aca19ee925a138
Author: Artem Baskal <a.baskal@adguard.com>
Date:   Thu Apr 1 17:58:14 2021 +0300

    Adapt changes on client

commit aa1769f64197d865478a66271da483babfc5dfd0
Author: Ainar Garipov <A.Garipov@AdGuard.COM>
Date:   Thu Apr 1 17:18:36 2021 +0300

    all: add more fields to querylog client

commit 4b2a2dbd380ec410f3068d15ea16430912e03e33
Merge: cda92c3f 2e4e2f62
Author: Ainar Garipov <A.Garipov@AdGuard.COM>
Date:   Thu Apr 1 16:57:26 2021 +0300

    Merge branch 'master' into 1273-querylog-client-name

commit cda92c3f0331cbac252f3163d31457f716bc7f2c
Author: Ainar Garipov <A.Garipov@AdGuard.COM>
Date:   Mon Mar 29 18:03:51 2021 +0300

    querylog: fix windows tests

commit 5a56f0a32608869ed93a38f18f63ea3a20f7bde2
Merge: 627e4958 e710ce11
Author: Ainar Garipov <A.Garipov@AdGuard.COM>
Date:   Mon Mar 29 17:45:53 2021 +0300

    Merge branch 'master' into 1273-querylog-client-name

commit 627e495828e82d44cc77aa393536479f23cc68b7
Author: Ainar Garipov <A.Garipov@AdGuard.COM>
Date:   Mon Mar 29 17:44:49 2021 +0300

    querylog: add tests, imp code, docs

commit 6dec468a2f0c29357875ff99458e0e8f8e580e6d
Author: Ainar Garipov <A.Garipov@AdGuard.COM>
Date:   Fri Mar 26 16:10:47 2021 +0300

    querylog: search clients by name, enrich http resp

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

@@ -17,11 +17,8 @@ import { updateLogs } from '../../../actions/queryLogs';
 const ClientCell = ({
     client,
     client_id,
+    client_info,
     domain,
-    info,
-    info: {
-        name, whois_info, disallowed, disallowed_rule,
-    },
     reason,
 }) => {
     const { t } = useTranslation();
@@ -33,18 +30,22 @@ const ClientCell = ({
 
     const autoClient = autoClients.find((autoClient) => autoClient.name === client);
     const source = autoClient?.source;
-    const whoisAvailable = whois_info && Object.keys(whois_info).length > 0;
-    const clientName = name || client_id;
-    const clientInfo = { ...info, name: clientName };
+    const whoisAvailable = client_info && Object.keys(client_info.whois).length > 0;
+    const clientName = client_info?.name || client_id;
+    const clientInfo = client_info && {
+        ...client_info,
+        whois_info: client_info?.whois,
+        name: clientName,
+    };
 
     const id = nanoid();
 
     const data = {
         address: client,
         name: clientName,
-        country: whois_info?.country,
-        city: whois_info?.city,
-        network: whois_info?.orgname,
+        country: client_info?.whois?.country,
+        city: client_info?.whois?.city,
+        network: client_info?.whois?.orgname,
         source_label: source,
     };
 
@@ -53,7 +54,7 @@ const ClientCell = ({
     const isFiltered = checkFiltered(reason);
 
     const nameClass = classNames('w-90 o-hidden d-flex flex-column', {
-        'mt-2': isDetailed && !name && !whoisAvailable,
+        'mt-2': isDetailed && !client_info?.name && !whoisAvailable,
         'white-space--nowrap': isDetailed,
     });
 
@@ -69,7 +70,11 @@ const ClientCell = ({
             confirmMessage,
             buttonKey: blockingClientKey,
             isNotInAllowedList,
-        } = getBlockClientInfo(client, disallowed, disallowed_rule);
+        } = getBlockClientInfo(
+            client,
+            client_info?.disallowed || false,
+            client_info?.disallowed_rule || '',
+        );
 
         const blockingForClientKey = isFiltered ? 'unblock_for_this_client_only' : 'block_for_this_client_only';
         const clientNameBlockingFor = getBlockingClientName(clients, client);
@@ -85,7 +90,11 @@ const ClientCell = ({
                 name: blockingClientKey,
                 onClick: async () => {
                     if (window.confirm(confirmMessage)) {
-                        await dispatch(toggleClientBlock(client, disallowed, disallowed_rule));
+                        await dispatch(toggleClientBlock(
+                            client,
+                            client_info?.disallowed || false,
+                            client_info?.disallowed_rule || '',
+                        ));
                         await dispatch(updateLogs());
                     }
                 },
@@ -199,20 +208,18 @@ const ClientCell = ({
 ClientCell.propTypes = {
     client: propTypes.string.isRequired,
     client_id: propTypes.string,
+    client_info: propTypes.shape({
+        ids: propTypes.arrayOf(propTypes.string).isRequired,
+        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,
-    info: propTypes.oneOfType([
-        propTypes.string,
-        propTypes.shape({
-            name: propTypes.string.isRequired,
-            whois_info: propTypes.shape({
-                country: propTypes.string,
-                city: propTypes.string,
-                orgname: propTypes.string,
-            }),
-            disallowed: propTypes.bool.isRequired,
-            disallowed_rule: propTypes.string.isRequired,
-        }),
-    ]),
     reason: propTypes.string.isRequired,
 };