Pull request 743: + client: Query Logs Infinite Scroll
Merge in DNS/adguard-home from feature/infinite_scroll_query_logs to master
Squashed commit of the following:
commit 4407ef2e7c055066257da791fbd65e6b0a495729
Merge: 40b74522 0a4781be
Author: ArtemBaskal <a.baskal@adguard.com>
Date: Tue Sep 1 16:20:23 2020 +0300
Merge branch 'master' into feature/infinite_scroll_query_logs
commit 40b745225112cf8d664220ed8f484b0aa16e997c
Author: ArtemBaskal <a.baskal@adguard.com>
Date: Tue Sep 1 15:46:27 2020 +0300
Remove dynamic translation of toasts
commit f08fa7b8c6a243f6b10e924aebccc183ce7814fd
Author: ArtemBaskal <a.baskal@adguard.com>
Date: Tue Sep 1 13:59:53 2020 +0300
Remove renderLimitIdx, update isEntireLog
commit 0f1b02616faaa5759c0a3f6d8257117fa22094d9
Author: ArtemBaskal <a.baskal@adguard.com>
Date: Tue Sep 1 11:11:14 2020 +0300
Rename variables
commit 0928570c689c1fa704af775382620d68893e7c1c
Author: ArtemBaskal <a.baskal@adguard.com>
Date: Tue Sep 1 11:06:50 2020 +0300
Make query logs short polling function more expressive
commit 9e773cbd6c287a1c799fa2680f3462508462ea7a
Author: ArtemBaskal <a.baskal@adguard.com>
Date: Tue Sep 1 11:06:19 2020 +0300
Fix Toast translation interface
commit f9c57033e5adc5788954cf086b2f114dd8938bcb
Author: ArtemBaskal <a.baskal@adguard.com>
Date: Mon Aug 31 17:01:36 2020 +0300
Do not hide loader
commit b86ba48613437f5559a748ad9aa4cf79d15db082
Author: ArtemBaskal <a.baskal@adguard.com>
Date: Mon Aug 31 16:56:34 2020 +0300
Add dynamic translation for all toasts
commit b9d1d9b447ca90a3c179e503fa5d4abd3516321e
Author: ArtemBaskal <a.baskal@adguard.com>
Date: Mon Aug 31 16:39:29 2020 +0300
Prevent getting query logs recursion if query is not changed
commit e25189749f7912648cca4503cfa8d0ad898c4bb6
Author: ArtemBaskal <a.baskal@adguard.com>
Date: Mon Aug 31 10:13:20 2020 +0300
Decrease page limit to 20
commit 8b248ac5276899de838abf2dc9a69e47599cfc12
Author: ArtemBaskal <a.baskal@adguard.com>
Date: Fri Aug 28 18:47:12 2020 +0300
Return checkFilteredLogs
commit bf2d65c4a3dca0da6b15f632ae11042b7c8e2045
Author: ArtemBaskal <a.baskal@adguard.com>
Date: Fri Aug 28 18:33:51 2020 +0300
Review changes
commit 01b5250f9d9136a1f334086d3e2f00d1a928b37b
Author: ArtemBaskal <a.baskal@adguard.com>
Date: Fri Aug 28 15:29:59 2020 +0300
Remove checkFilteredLogs
commit 25b364c41e6a1489d930c8b3b39b1ab43723f29d
Merge: 1dc66034 2c666cbd
Author: Andrey Meshkov <am@adguard.com>
Date: Fri Aug 28 14:28:47 2020 +0300
Merge branch 'feature/infinite_scroll_query_logs' of ssh://bit.adguard.com:7999/dns/adguard-home into feature/infinite_scroll_query_logs
commit 1dc6603421cde9847e792bfe77ff6546e53fbc2a
Author: Andrey Meshkov <am@adguard.com>
Date: Fri Aug 28 14:28:01 2020 +0300
disregard maxFileScanEntries only if offset is set
commit bad741ed7f1dccf6959d43d000b8c0150f526f9e
Author: Andrey Meshkov <am@adguard.com>
Date: Fri Aug 28 11:57:45 2020 +0300
Fix search behavior when limit is specified
commit 2c666cbdde465cf17434126830dd99ceedfc4cbc
Author: ArtemBaskal <a.baskal@adguard.com>
Date: Thu Aug 27 18:50:28 2020 +0300
Hide table ref loader during data loading
commit 8b4f7fe642ef9e87a979813dcdbd7817d64c27f9
Author: ArtemBaskal <a.baskal@adguard.com>
Date: Thu Aug 27 18:43:24 2020 +0300
Repair search
commit 26fae1ae01a789999b8a2181d60b35663a20460a
Author: ArtemBaskal <a.baskal@adguard.com>
Date: Thu Aug 27 17:59:27 2020 +0300
Resetting initial render index, change loader position on search
commit e2c97ae1a288438267eef9aec71b979319674a71
Author: ArtemBaskal <a.baskal@adguard.com>
Date: Thu Aug 27 16:02:03 2020 +0300
Change isScrolledIntoView
... and 32 more commits
This commit is contained in:
118
client/src/components/Logs/Cells/DomainCell.js
Normal file
118
client/src/components/Logs/Cells/DomainCell.js
Normal file
@@ -0,0 +1,118 @@
|
||||
import React from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import classNames from 'classnames';
|
||||
import propTypes from 'prop-types';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
DEFAULT_SHORT_DATE_FORMAT_OPTIONS,
|
||||
LONG_TIME_FORMAT,
|
||||
SCHEME_TO_PROTOCOL_MAP,
|
||||
} from '../../../helpers/constants';
|
||||
import { captitalizeWords, formatDateTime, formatTime } from '../../../helpers/helpers';
|
||||
import { getSourceData } from '../../../helpers/trackers/trackers';
|
||||
import IconTooltip from './IconTooltip';
|
||||
|
||||
const DomainCell = ({
|
||||
answer_dnssec,
|
||||
client_proto,
|
||||
domain,
|
||||
time,
|
||||
tracker,
|
||||
type,
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const dnssec_enabled = useSelector((state) => state.dnsConfig.dnssec_enabled);
|
||||
const isDetailed = useSelector((state) => state.queryLogs.isDetailed);
|
||||
|
||||
const hasTracker = !!tracker;
|
||||
|
||||
const lockIconClass = classNames('icons icon--24 d-none d-sm-block', {
|
||||
'icon--green': answer_dnssec,
|
||||
'icon--disabled': !answer_dnssec,
|
||||
'my-3': isDetailed,
|
||||
});
|
||||
|
||||
const privacyIconClass = classNames('icons mx-2 icon--24 d-none d-sm-block', {
|
||||
'icon--green': hasTracker,
|
||||
'icon--disabled': !hasTracker,
|
||||
'my-3': isDetailed,
|
||||
});
|
||||
|
||||
const protocol = t(SCHEME_TO_PROTOCOL_MAP[client_proto]) || '';
|
||||
const ip = type ? `${t('type_table_header')}: ${type}` : '';
|
||||
|
||||
const requestDetailsObj = {
|
||||
time_table_header: formatTime(time, LONG_TIME_FORMAT),
|
||||
date: formatDateTime(time, DEFAULT_SHORT_DATE_FORMAT_OPTIONS),
|
||||
domain,
|
||||
type_table_header: type,
|
||||
protocol,
|
||||
};
|
||||
|
||||
const sourceData = getSourceData(tracker);
|
||||
|
||||
const knownTrackerDataObj = {
|
||||
name_table_header: tracker?.name,
|
||||
category_label: hasTracker && captitalizeWords(tracker.category),
|
||||
source_label: sourceData
|
||||
&& <a href={sourceData.url} target="_blank" rel="noopener noreferrer"
|
||||
className="link--green">{sourceData.name}</a>,
|
||||
};
|
||||
|
||||
const renderGrid = (content, idx) => {
|
||||
const preparedContent = typeof content === 'string' ? t(content) : content;
|
||||
const className = classNames('text-truncate o-hidden', {
|
||||
'overflow-break': preparedContent.length > 100,
|
||||
});
|
||||
return <div key={idx} className={className}>{preparedContent}</div>;
|
||||
};
|
||||
|
||||
const getGrid = (contentObj, title, className) => [
|
||||
<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>,
|
||||
];
|
||||
|
||||
const requestDetails = getGrid(requestDetailsObj, 'request_details');
|
||||
|
||||
const renderContent = hasTracker ? requestDetails.concat(getGrid(knownTrackerDataObj, 'known_tracker', 'pt-4')) : requestDetails;
|
||||
|
||||
const valueClass = classNames('w-100 text-truncate', {
|
||||
'px-2 d-flex justify-content-center flex-column': isDetailed,
|
||||
});
|
||||
|
||||
const details = [ip, protocol].filter(Boolean)
|
||||
.join(', ');
|
||||
|
||||
return <div className="d-flex o-hidden logs__cell logs__cell logs__cell--domain" role="gridcell">
|
||||
{dnssec_enabled && <IconTooltip
|
||||
className={lockIconClass}
|
||||
tooltipClass='py-4 px-5 pb-45'
|
||||
canShowTooltip={!!answer_dnssec}
|
||||
xlinkHref='lock'
|
||||
columnClass='w-100'
|
||||
content='validated_with_dnssec'
|
||||
placement='bottom'
|
||||
/>}
|
||||
<IconTooltip className={privacyIconClass} tooltipClass='pt-4 pb-5 px-5 mw-75'
|
||||
xlinkHref='privacy' contentItemClass='key-colon' renderContent={renderContent}
|
||||
place='bottom' />
|
||||
<div className={valueClass}>
|
||||
<div className="text-truncate" title={domain}>{domain}</div>
|
||||
{details && isDetailed
|
||||
&& <div className="detailed-info d-none d-sm-block text-truncate"
|
||||
title={details}>{details}</div>}
|
||||
</div>
|
||||
</div>;
|
||||
};
|
||||
|
||||
DomainCell.propTypes = {
|
||||
answer_dnssec: propTypes.bool.isRequired,
|
||||
client_proto: propTypes.string.isRequired,
|
||||
domain: propTypes.string.isRequired,
|
||||
time: propTypes.string.isRequired,
|
||||
type: propTypes.string.isRequired,
|
||||
tracker: propTypes.object,
|
||||
};
|
||||
|
||||
export default DomainCell;
|
||||
Reference in New Issue
Block a user