Update modal content

client/src/__locales/en.json

@@ -242,6 +242,7 @@
     "blocking_mode_null_ip": "Null IP: Respond with zero IP address (0.0.0.0 for A; :: for AAAA)",
     "blocking_mode_custom_ip": "Custom IP: Respond with a manually set IP address",
     "upstream_dns_client_desc": "If you keep this field empty, AdGuard Home will use the servers configured in the <0>DNS settings</0>.",
+    "tracker_source": "Tracker source",
     "source_label": "Source",
     "found_in_known_domain_db": "Found in the known domains database.",
     "category_label": "Category",
@@ -526,4 +527,4 @@
     "safe_search": "Safe search",
     "blocklist": "Blocklist",
     "milliseconds_abbreviation": "ms"
-}
+}

client/src/components/Logs/Table.js

@@ -12,6 +12,7 @@ import {
     FILTERED_STATUS_TO_META_MAP,
     TABLE_DEFAULT_PAGE_SIZE,
     TRANSITION_TIMEOUT,
+    SCHEME_TO_PROTOCOL_MAP,
 } from '../../helpers/constants';
 import getDateCell from './Cells/getDateCell';
 import getDomainCell from './Cells/getDomainCell';
@@ -265,6 +266,8 @@ const Table = (props) => {
                             time,
                             tracker,
                             upstream,
+                            type,
+                            client_proto,
                         } = rowInfo.original;
 
                         const hasTracker = !!tracker;
@@ -278,6 +281,12 @@ const Table = (props) => {
 
                         const network = autoClient && autoClient.whois_info
                             && autoClient.whois_info.orgname;
+
+                        const city = autoClient && autoClient.whois_info
+                            && autoClient.whois_info.city;
+
+                        const source = autoClient && autoClient.source;
+
                         const formattedElapsedMs = formatElapsedMs(elapsedMs, t);
                         const isFiltered = checkFiltered(reason);
 
@@ -286,45 +295,58 @@ const Table = (props) => {
                             toggleBlocking(buttonType, domain);
                         };
 
-                        const source = tracker && tracker.sourceData && tracker.sourceData.name;
+                        const tracker_source = tracker && tracker.sourceData
+                            && tracker.sourceData.name;
 
                         const status = t((FILTERED_STATUS_TO_META_MAP[reason]
                             && FILTERED_STATUS_TO_META_MAP[reason].label) || reason);
                         const statusBlocked = <div className="bg--danger">{status}</div>;
 
+                        const protocol = t(SCHEME_TO_PROTOCOL_MAP[client_proto]) || '';
+
                         const detailedData = {
                             time_table_header: formatTime(time, LONG_TIME_FORMAT),
                             date: formatDateTime(time, DEFAULT_SHORT_DATE_FORMAT_OPTIONS),
                             encryption_status: status,
                             domain,
-                            details: 'title',
+                            type_table_header: type,
+                            protocol,
+                            known_tracker: hasTracker && 'title',
+                            table_name: hasTracker && tracker.name,
+                            category_label: hasTracker && tracker.category,
+                            tracker_source: hasTracker && tracker_source && <a href={`//${source}`} className="link--green">{tracker_source}</a>,
+                            response_details: 'title',
                             install_settings_dns: upstream,
                             elapsed: formattedElapsedMs,
-                            request_table_header: response && response.join('\n'),
+                            response_table_header: response && response.join('\n'),
                             client_details: 'title',
-                            name: info && info.name,
                             ip_address: client,
+                            name: info && info.name,
                             country,
+                            city,
                             network,
+                            source_label: source,
                             validated_with_dnssec: dnssec_enabled ? Boolean(answer_dnssec) : false,
                             [buttonType]: <div onClick={onToggleBlock}
                                                className="title--border bg--danger">{t(buttonType)}</div>,
                         };
 
                         const detailedDataBlocked = {
                             time_table_header: formatTime(time, LONG_TIME_FORMAT),
-                            data: formatDateTime(time, DEFAULT_SHORT_DATE_FORMAT_OPTIONS),
+                            date: formatDateTime(time, DEFAULT_SHORT_DATE_FORMAT_OPTIONS),
                             encryption_status: statusBlocked,
                             domain,
+                            type_table_header: type,
+                            protocol,
                             known_tracker: 'title',
                             table_name: hasTracker && tracker.name,
                             category_label: hasTracker && tracker.category,
-                            source_label: source
+                            source_label: hasTracker && source
                                 && <a href={`//${source}`} className="link--green">{source}</a>,
-                            details: 'title',
+                            response_details: 'title',
                             install_settings_dns: upstream,
                             elapsed: formattedElapsedMs,
-                            request_table_header: response && response.join('\n'),
+                            response_table_header: response && response.join('\n'),
                             [buttonType]: <div onClick={onToggleBlock}
                                                className="title--border">{t(buttonType)}</div>,
                         };