Merge: + client: show filter name for blocked items in the query log

Closes #993

Squashed commit of the following:

commit 4c5e17226c6efa8a7847a8c565c491a7bae2db59
Author: Ildar Kamalov <i.kamalov@adguard.com>
Date:   Wed Jan 29 12:21:40 2020 +0300

    - client: use constant

commit 818c07d1cfb210965a6413dc8370fc8867979c7b
Author: Ildar Kamalov <i.kamalov@adguard.com>
Date:   Wed Jan 29 12:18:31 2020 +0300

    - client: fix filter find

commit 1f9132151c843dacbf26f814faeeea3cfdff9b73
Author: Ildar Kamalov <i.kamalov@adguard.com>
Date:   Tue Jan 28 15:52:29 2020 +0300

    + client: show filter name for blocked items in the query log

client/src/components/Logs/index.js

@@ -11,7 +11,7 @@ import {
     formatDateTime,
     isToday,
 } from '../../helpers/helpers';
-import { SERVICES, FILTERED_STATUS, TABLE_DEFAULT_PAGE_SIZE } from '../../helpers/constants';
+import { SERVICES, FILTERED_STATUS, TABLE_DEFAULT_PAGE_SIZE, CUSTOM_FILTERING_RULES_ID } from '../../helpers/constants';
 import { getTrackerData } from '../../helpers/trackers/trackers';
 import { formatClientCell } from '../../helpers/formatClientCell';
 
@@ -116,6 +116,9 @@ class Logs extends Component {
 
     checkWhiteList = reason => reason === FILTERED_STATUS.NOT_FILTERED_WHITE_LIST;
 
+    checkBlackList = reason => reason === FILTERED_STATUS.FILTERED_BLACK_LIST;
+
+    checkBlockedService = reason => reason === FILTERED_STATUS.FILTERED_BLOCKED_SERVICE;
 
     getDateCell = row => CellWrap(
         row,
@@ -142,6 +145,25 @@ class Logs extends Component {
         })
     );
 
+    getFilterName = (filters, filterId, t) => {
+        if (filterId === CUSTOM_FILTERING_RULES_ID) {
+            return t('custom_filter_rules');
+        }
+
+        const filter = filters.find(filter => filter.id === filterId);
+        let filterName = '';
+
+        if (filter) {
+            filterName = filter.name;
+        }
+
+        if (!filterName) {
+            filterName = t('unknown_filter', { filterId });
+        }
+
+        return filterName;
+    }
+
     getResponseCell = ({ value: responses, original }) => {
         const {
             reason, filterId, rule, status, originalAnswer,
@@ -150,43 +172,50 @@ class Logs extends Component {
         const { filters } = filtering;
 
         const isFiltered = this.checkFiltered(reason);
-        const filterKey = reason.replace(FILTERED_REASON, '');
+        const isBlackList = this.checkBlackList(reason);
-        const parsedFilteredReason = t('query_log_filtered', { filter: filterKey });
         const isRewrite = this.checkRewrite(reason);
         const isWhiteList = this.checkWhiteList(reason);
-        const isBlockedService = reason === FILTERED_STATUS.FILTERED_BLOCKED_SERVICE;
+        const isBlockedService = this.checkBlockedService(reason);
+        const isBlockedCnameIp = originalAnswer;
+
+        const filterKey = reason.replace(FILTERED_REASON, '');
+        const parsedFilteredReason = t('query_log_filtered', { filter: filterKey });
         const currentService = SERVICES.find(service => service.id === original.serviceName);
         const serviceName = currentService && currentService.name;
-        const normalizedAnswer = originalAnswer && this.normalizeResponse(originalAnswer);
+        const filterName = this.getFilterName(filters, filterId, t);
-        let filterName = '';
 
-        if (filterId === 0) {
+        if (isBlockedCnameIp) {
-            filterName = t('custom_filter_rules');
+            const normalizedAnswer = this.normalizeResponse(originalAnswer);
-        } else {
-            const filterItem = Object.keys(filters).filter(key => filters[key].id === filterId)[0];
 
-            if (typeof filterItem !== 'undefined' && typeof filters[filterItem] !== 'undefined') {
+            return (
-                filterName = filters[filterItem].name;
+                <div className="logs__row logs__row--column">
-            }
+                    <div className="logs__text-wrap">
-
+                        <span className="logs__text">
-            if (!filterName) {
+                            <Trans>blocked_by_response</Trans>
-                filterName = t('unknown_filter', { filterId });
+                        </span>
-            }
+                    </div>
+                    <div className="logs__list-wrap">
+                        {this.renderResponseList(normalizedAnswer, status)}
+                    </div>
+                </div>
+            );
         }
 
         return (
             <div className="logs__row logs__row--column">
                 <div className="logs__text-wrap">
-                    {originalAnswer && (
+                    {(isFiltered || isBlockedService) && !isBlackList && (
-                        <span className="logs__text">
-                            <Trans>blocked_by_response</Trans>
-                        </span>
-                    )}
-                    {!originalAnswer && (isFiltered || isBlockedService) && (
                         <span className="logs__text" title={parsedFilteredReason}>
                             {parsedFilteredReason}
                         </span>
                     )}
+                    {isBlackList && (
+                        <span className="logs__text">
+                            <Trans values={{ filter: filterName }}>
+                                query_log_filtered
+                            </Trans>
+                        </span>
+                    )}
                     {isBlockedService
                         ? this.renderTooltip(isFiltered, '', '', serviceName)
                         : this.renderTooltip(isFiltered, rule, filterName)}
@@ -197,10 +226,7 @@ class Logs extends Component {
                     )}
                 </div>
                 <div className="logs__list-wrap">
-                    {originalAnswer
+                    {this.renderResponseList(responses, status)}
-                        ? this.renderResponseList(normalizedAnswer, status)
-                        : this.renderResponseList(responses, status)
-                    }
                     {isWhiteList && this.renderTooltip(isWhiteList, rule, filterName)}
                 </div>
             </div>

client/src/helpers/constants.js

@@ -450,3 +450,5 @@ export const DETAILED_DATE_FORMAT_OPTIONS = {
     ...DEFAULT_DATE_FORMAT_OPTIONS,
     month: 'long',
 };
+
+export const CUSTOM_FILTERING_RULES_ID = 0;