+ client: handle blocked by response in query log

client/src/__locales/en.json

@@ -405,5 +405,6 @@
     "netname": "Network name",
     "descr": "Description",
     "whois": "Whois",
-    "filtering_rules_learn_more": "<0>Learn more</0> about creating your own hosts blocklists."
-}
+    "filtering_rules_learn_more": "<0>Learn more</0> about creating your own hosts blocklists.",
+    "blocked_by_response": "Blocked by CNAME or IP in response"
+}

client/src/components/Logs/index.js

@@ -134,9 +134,16 @@ class Logs extends Component {
         );
     };
 
+    normalizeResponse = response => (
+        response.map((response) => {
+            const { value, type, ttl } = response;
+            return `${type}: ${value} (ttl=${ttl})`;
+        })
+    );
+
     getResponseCell = ({ value: responses, original }) => {
         const {
-            reason, filterId, rule, status,
+            reason, filterId, rule, status, originalAnswer,
         } = original;
         const { t, filtering } = this.props;
         const { filters } = filtering;
@@ -149,6 +156,7 @@ class Logs extends Component {
         const isBlockedService = reason === FILTERED_STATUS.FILTERED_BLOCKED_SERVICE;
         const currentService = SERVICES.find(service => service.id === original.serviceName);
         const serviceName = currentService && currentService.name;
+        const normalizedAnswer = originalAnswer && this.normalizeResponse(originalAnswer);
         let filterName = '';
 
         if (filterId === 0) {
@@ -168,7 +176,12 @@ class Logs extends Component {
         return (
             <div className="logs__row logs__row--column">
                 <div className="logs__text-wrap">
-                    {(isFiltered || isBlockedService) && (
+                    {originalAnswer && (
+                        <span className="logs__text">
+                            <Trans>blocked_by_response</Trans>
+                        </span>
+                    )}
+                    {!originalAnswer && (isFiltered || isBlockedService) && (
                         <span className="logs__text" title={parsedFilteredReason}>
                             {parsedFilteredReason}
                         </span>
@@ -183,7 +196,10 @@ class Logs extends Component {
                     )}
                 </div>
                 <div className="logs__list-wrap">
-                    {this.renderResponseList(responses, status)}
+                    {originalAnswer
+                        ? this.renderResponseList(normalizedAnswer, status)
+                        : this.renderResponseList(responses, status)
+                    }
                     {isWhiteList && this.renderTooltip(isWhiteList, rule, filterName)}
                 </div>
             </div>

client/src/helpers/helpers.js

@@ -50,6 +50,7 @@ export const normalizeLogs = logs => logs.map((log) => {
         rule,
         service_name,
         status,
+        original_answer,
     } = log;
     const { host: domain, type } = question;
     const responsesArray = response ? response.map((response) => {
@@ -65,8 +66,9 @@ export const normalizeLogs = logs => logs.map((log) => {
         client,
         filterId,
         rule,
-        serviceName: service_name,
         status,
+        serviceName: service_name,
+        originalAnswer: original_answer,
     };
 });