- client: Fix client tracker source links

Close #1813

Squashed commit of the following:

commit 7f2286cb6e36f90ca19f2830b341d34af513c9a3
Merge: e9f2e08b 9640752d
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Fri Jul 3 11:55:46 2020 +0300

    Merge branch 'master' into fix/1813

commit e9f2e08b608ad14e5b327ab86d8faa66784bae44
Merge: ecee0977 f5a1f311
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Fri Jul 3 11:49:52 2020 +0300

    Merge branch 'master' into fix/1813

commit ecee0977ab5439d3be2a99447a771871f0340a2e
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Fri Jul 3 11:35:10 2020 +0300

    Capitalize category names

commit b4b47ce0177369fb4da5ad2e10a78b2d96bd81c6
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Thu Jul 2 18:11:40 2020 +0300

    - client: Fix client tracker source links
This commit is contained in:
Artem Baskal 2020-07-03 12:01:03 +03:00
parent 9640752d20
commit 9df7aba9e1
2 changed files with 22 additions and 15 deletions

View file

@ -7,7 +7,8 @@ import {
LONG_TIME_FORMAT, LONG_TIME_FORMAT,
SCHEME_TO_PROTOCOL_MAP, SCHEME_TO_PROTOCOL_MAP,
} from '../../../helpers/constants'; } from '../../../helpers/constants';
import { formatDateTime, formatTime } from '../../../helpers/helpers'; import { captitalizeWords, formatDateTime, formatTime } from '../../../helpers/helpers';
import { getSourceData } from '../../../helpers/trackers/trackers';
const getDomainCell = (props) => { const getDomainCell = (props) => {
const { const {
@ -20,8 +21,6 @@ const getDomainCell = (props) => {
const hasTracker = !!tracker; const hasTracker = !!tracker;
const source = tracker && tracker.sourceData && tracker.sourceData.name;
const lockIconClass = classNames('icons', 'icon--small', 'd-none', 'd-sm-block', 'cursor--pointer', { const lockIconClass = classNames('icons', 'icon--small', 'd-none', 'd-sm-block', 'cursor--pointer', {
'icon--active': answer_dnssec, 'icon--active': answer_dnssec,
'icon--disabled': !answer_dnssec, 'icon--disabled': !answer_dnssec,
@ -55,10 +54,14 @@ const getDomainCell = (props) => {
protocol, protocol,
}; };
const sourceData = getSourceData(tracker);
const knownTrackerDataObj = { const knownTrackerDataObj = {
name_table_header: tracker && tracker.name, name_table_header: tracker && tracker.name,
category_label: tracker && tracker.category, category_label: tracker && captitalizeWords(tracker.category),
source_label: source && <a href={`//${source}`} className="link--green">{source}</a>, source_label: sourceData
&& <a href={sourceData.url} target="_blank" rel="noopener noreferrer"
className="link--green">{sourceData.name}</a>,
}; };
const renderGrid = (content, idx) => { const renderGrid = (content, idx) => {
@ -71,7 +74,8 @@ const getDomainCell = (props) => {
const getGrid = (contentObj, title, className) => [ const getGrid = (contentObj, title, className) => [
<div key={title} className={classNames('pb-2 grid--title', className)}>{t(title)}</div>, <div key={title} className={classNames('pb-2 grid--title', className)}>{t(title)}</div>,
<div key={`${title}-1`} className="grid grid--limited">{React.Children.map(Object.entries(contentObj), renderGrid)}</div>, <div key={`${title}-1`}
className="grid grid--limited">{React.Children.map(Object.entries(contentObj), renderGrid)}</div>,
]; ];
const requestDetails = getGrid(requestDetailsObj, 'request_details'); const requestDetails = getGrid(requestDetailsObj, 'request_details');

View file

@ -19,6 +19,7 @@ import getClientCell from './Cells/getClientCell';
import getResponseCell from './Cells/getResponseCell'; import getResponseCell from './Cells/getResponseCell';
import { import {
captitalizeWords,
checkFiltered, checkFiltered,
formatDateTime, formatDateTime,
formatElapsedMs, formatElapsedMs,
@ -26,6 +27,7 @@ import {
} from '../../helpers/helpers'; } from '../../helpers/helpers';
import Loading from '../ui/Loading'; import Loading from '../ui/Loading';
import { getSourceData } from '../../helpers/trackers/trackers';
const Table = (props) => { const Table = (props) => {
const { const {
@ -300,15 +302,14 @@ const Table = (props) => {
toggleBlocking(buttonType, domain); toggleBlocking(buttonType, domain);
}; };
const tracker_source = tracker && tracker.sourceData
&& tracker.sourceData.name;
const status = t((FILTERED_STATUS_TO_META_MAP[reason] const status = t((FILTERED_STATUS_TO_META_MAP[reason]
&& FILTERED_STATUS_TO_META_MAP[reason].label) || reason); && FILTERED_STATUS_TO_META_MAP[reason].label) || reason);
const statusBlocked = <div className="bg--danger">{status}</div>; const statusBlocked = <div className="bg--danger">{status}</div>;
const protocol = t(SCHEME_TO_PROTOCOL_MAP[client_proto]) || ''; const protocol = t(SCHEME_TO_PROTOCOL_MAP[client_proto]) || '';
const sourceData = getSourceData(tracker);
const detailedData = { const detailedData = {
time_table_header: formatTime(time, LONG_TIME_FORMAT), time_table_header: formatTime(time, LONG_TIME_FORMAT),
date: formatDateTime(time, DEFAULT_SHORT_DATE_FORMAT_OPTIONS), date: formatDateTime(time, DEFAULT_SHORT_DATE_FORMAT_OPTIONS),
@ -318,9 +319,10 @@ const Table = (props) => {
protocol, protocol,
known_tracker: hasTracker && 'title', known_tracker: hasTracker && 'title',
table_name: hasTracker && tracker.name, table_name: hasTracker && tracker.name,
category_label: hasTracker && tracker.category, category_label: hasTracker && captitalizeWords(tracker.category),
tracker_source: hasTracker && tracker_source && <a href={`//${source}`} tracker_source: hasTracker && sourceData
className="link--green">{tracker_source}</a>, && <a href={sourceData.url} target="_blank" rel="noopener noreferrer"
className="link--green">{sourceData.name}</a>,
response_details: 'title', response_details: 'title',
install_settings_dns: upstream, install_settings_dns: upstream,
elapsed: formattedElapsedMs, elapsed: formattedElapsedMs,
@ -346,9 +348,10 @@ const Table = (props) => {
protocol, protocol,
known_tracker: 'title', known_tracker: 'title',
table_name: hasTracker && tracker.name, table_name: hasTracker && tracker.name,
category_label: hasTracker && tracker.category, category_label: hasTracker && captitalizeWords(tracker.category),
source_label: hasTracker && source source_label: hasTracker && sourceData
&& <a href={`//${source}`} className="link--green">{source}</a>, && <a href={sourceData.url} target="_blank" rel="noopener noreferrer"
className="link--green">{sourceData.name}</a>,
response_details: 'title', response_details: 'title',
install_settings_dns: upstream, install_settings_dns: upstream,
elapsed: formattedElapsedMs, elapsed: formattedElapsedMs,