client: 2451 Support multiple matched rules in the UI

Close #2451

Squashed commit of the following:

commit f6d0a8fe4fa575dff67b2d2f4c9f6aaf6a6414d3
Merge: 3b13e529d 955b735c8
Author: Artem Baskal <a.baskal@adguard.com>
Date:   Fri Dec 25 14:53:16 2020 +0300

    Merge branch 'master' into feature/2451

commit 3b13e529da01823cbc674d81be065b68cd08bbd3
Author: Artem Baskal <a.baskal@adguard.com>
Date:   Thu Dec 24 12:53:13 2020 +0300

    Update JSXElement in jsdocs

commit f0749cd0466ef69d964b1c2575dffacb33f71b31
Author: Artem Baskal <a.baskal@adguard.com>
Date:   Mon Dec 21 13:23:48 2020 +0300

    minor

commit bd014b00e762a1895c132bc962c06f107c50fe17
Author: Artem Baskal <a.baskal@adguard.com>
Date:   Mon Dec 21 12:49:29 2020 +0300

    Minor helper update

commit 260a66b7b78eb80596b88fec14f409838727e4bb
Author: Artem Baskal <a.baskal@adguard.com>
Date:   Mon Dec 21 12:31:08 2020 +0300

    Rule locale update

commit c960cf9f658e52cb587676dceb97506880a9db94
Author: Artem Baskal <a.baskal@adguard.com>
Date:   Mon Dec 21 12:27:50 2020 +0300

    Add styles for filters list

commit 6f3b2176fd52598cddb147ad7828adb95abf08f0
Author: Artem Baskal <a.baskal@adguard.com>
Date:   Fri Dec 18 18:34:17 2020 +0300

    client: 2451 Support multiple matched rules in the UI

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

@@ -4,8 +4,9 @@ import classNames from 'classnames';
 import React from 'react';
 import propTypes from 'prop-types';
 import {
+    getRulesToFilterList,
     formatElapsedMs,
-    getFilterName,
+    getFilterNames,
     getServiceName,
 } from '../../../helpers/helpers';
 import { FILTERED_STATUS, FILTERED_STATUS_TO_META_MAP } from '../../../helpers/constants';
@@ -18,8 +19,7 @@ const ResponseCell = ({
     response,
     status,
     upstream,
-    rule,
-    filterId,
+    rules,
     service_name,
 }) => {
     const { t } = useTranslation();
@@ -36,7 +36,6 @@ const ResponseCell = ({
 
     const statusLabel = t(isBlockedByResponse ? 'blocked_by_cname_or_ip' : FILTERED_STATUS_TO_META_MAP[reason]?.LABEL || reason);
     const boldStatusLabel = <span className="font-weight-bold">{statusLabel}</span>;
-    const filter = getFilterName(filters, whitelistFilters, filterId);
 
     const renderResponses = (responseArr) => {
         if (!responseArr || responseArr.length === 0) {
@@ -52,18 +51,23 @@ const ResponseCell = ({
         })}</div>;
     };
 
+    const rulesList = getRulesToFilterList(rules, filters, whitelistFilters);
+
     const COMMON_CONTENT = {
         encryption_status: boldStatusLabel,
         install_settings_dns: upstream,
         elapsed: formattedElapsedMs,
         response_code: status,
-        ...(service_name ? { service_name: getServiceName(service_name) } : { filter }),
-        rule_label: rule,
+        ...(service_name
+            ? { service_name: getServiceName(service_name) }
+            : { }
+        ),
+        rule_label: rulesList,
         response_table_header: renderResponses(response),
         original_response: renderResponses(originalResponse),
     };
 
-    const content = rule
+    const content = rules.length > 0
         ? Object.entries(COMMON_CONTENT)
         : Object.entries({
             ...COMMON_CONTENT,
@@ -78,7 +82,8 @@ const ResponseCell = ({
                 }
                 return getServiceName(service_name);
             case FILTERED_STATUS.FILTERED_BLACK_LIST:
-                return filter;
+            case FILTERED_STATUS.NOT_FILTERED_WHITE_LIST:
+                return getFilterNames(rules, filters, whitelistFilters).join(', ');
             default:
                 return formattedElapsedMs;
         }
@@ -113,8 +118,10 @@ ResponseCell.propTypes = {
     response: propTypes.array.isRequired,
     status: propTypes.string.isRequired,
     upstream: propTypes.string.isRequired,
-    rule: propTypes.string,
-    filterId: propTypes.number,
+    rules: propTypes.arrayOf(propTypes.shape({
+        text: propTypes.string.isRequired,
+        filter_list_id: propTypes.number.isRequired,
+    })),
     service_name: propTypes.string,
 };
 

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

@@ -6,11 +6,11 @@ import propTypes from 'prop-types';
 import {
     captitalizeWords,
     checkFiltered,
+    getRulesToFilterList,
     formatDateTime,
     formatElapsedMs,
     formatTime,
     getBlockingClientName,
-    getFilterName,
     getServiceName,
     processContent,
 } from '../../../helpers/helpers';
@@ -70,8 +70,7 @@ const Row = memo(({
             upstream,
             type,
             client_proto,
-            filterId,
-            rule,
+            rules,
             originalResponse,
             status,
             service_name,
@@ -107,8 +106,6 @@ const Row = memo(({
 
         const sourceData = getSourceData(tracker);
 
-        const filter = getFilterName(filters, whitelistFilters, filterId);
-
         const {
             confirmMessage,
             buttonKey: blockingClientKey,
@@ -172,8 +169,8 @@ const Row = memo(({
             response_details: 'title',
             install_settings_dns: upstream,
             elapsed: formattedElapsedMs,
-            filter: rule ? filter : null,
-            rule_label: rule,
+            rule_label: rules.length > 0
+                    && getRulesToFilterList(rules, filters, whitelistFilters),
             response_table_header: response?.join('\n'),
             response_code: status,
             client_details: 'title',
@@ -235,8 +232,10 @@ Row.propTypes = {
         upstream: propTypes.string.isRequired,
         type: propTypes.string.isRequired,
         client_proto: propTypes.string.isRequired,
-        filterId: propTypes.number,
-        rule: propTypes.string,
+        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,

client/src/components/Logs/Logs.css

@@ -428,3 +428,13 @@
     margin-right: 1px;
     opacity: 0.5;
 }
+
+.filteringRules__rule {
+    margin-bottom: 0;
+}
+
+.filteringRules__filter {
+    font-style: italic;
+    font-weight: normal;
+    margin-bottom: 1rem;
+}