daxi20/AdGuardHome
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- client: Clear input field when switching from logs page

Browse Source 
Close #1523

Squashed commit of the following:

commit 9ae9b0e480c2ec6bd835faf4caccacd8c1fdfe9f
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Fri Jul 3 17:56:34 2020 +0300

    Setup babel and apply everywhere nullish coalescing and optional chaining operators

commit 0966063842a79078e1d61a54c271e18c9427b2b1
Merge: 42a54f2b 21dfb5ff
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Fri Jul 3 16:59:34 2020 +0300

    Merge branch 'master' into fix/1523

commit 42a54f2ba0d8f5f4e4c04f16abc507b5d9009035
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Fri Jul 3 13:30:25 2020 +0300

    Center mobile tooltip buttons

commit 9cdd501a863b596f1d903f8dd3c449ffbe4c1604
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Fri Jul 3 13:21:37 2020 +0300

    Add cross icon to clear input on click

commit 1308b93c42ffea2ffb7457c34aef96e5cdaccaf2
Merge: 265fec7c da546790
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Mon Jun 29 19:42:04 2020 +0300

    Merge branch 'master' of ssh://bit.adguard.com:7999/dns/adguard-home

commit 265fec7c72656b0c4738623cb470f1c14736230a
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Mon Jun 29 19:41:37 2020 +0300

    - client: Clear input field when switching from logs page
This commit is contained in:
Artem Baskal
2020-07-03 19:17:58 +03:00
parent 21dfb5ffe8
commit 6b134469d4
22 changed files with 144 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/components/Filters/Services/index.js
View File

@@ -17,7 +17,7 @@ const getInitialDataForServices = (initial) => (initial ? initial.reduce(
const Services = () => {
const [t] = useTranslation();
const dispatch = useDispatch();
const services = useSelector((store) => store && store.services);
const services = useSelector((store) => store?.services);
useEffect(() => {
dispatch(getBlockedServices());

13
client/src/components/Logs/Cells/getClientCell.js
View File

@@ -11,23 +11,20 @@ const getClientCell = ({
row, t, isDetailed, toggleBlocking, autoClients, processingRules,
}) => {
const {
reason, client, domain, info: { name },
reason, client, domain, info: { name, whois_info },
} = row.original;
const autoClient = autoClients.find((autoClient) => autoClient.name === client);
const country = autoClient && autoClient.whois_info && autoClient.whois_info.country;
const city = autoClient && autoClient.whois_info && autoClient.whois_info.city;
const network = autoClient && autoClient.whois_info && autoClient.whois_info.orgname;
const source = autoClient && autoClient.source;
const source = autoClient?.source;
const id = nanoid();
const data = {
address: client,
name,
country,
city,
network,
country: whois_info?.country,
city: whois_info?.city,
network: whois_info?.orgname,
source_label: source,
};

4
client/src/components/Logs/Cells/getDomainCell.js
View File

@@ -57,8 +57,8 @@ const getDomainCell = (props) => {
const sourceData = getSourceData(tracker);
const knownTrackerDataObj = {
name_table_header: tracker && tracker.name,
category_label: tracker && captitalizeWords(tracker.category),
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>,

3
client/src/components/Logs/Cells/getResponseCell.js
View File

@@ -36,8 +36,7 @@ const getResponseCell = (row, filtering, t, isDetailed) => {
const { filters, whitelistFilters } = filtering;
const formattedElapsedMs = formatElapsedMs(elapsedMs, t);
const statusLabel = t((FILTERED_STATUS_TO_META_MAP[reason]
&& FILTERED_STATUS_TO_META_MAP[reason].label) || reason);
const statusLabel = t(FILTERED_STATUS_TO_META_MAP[reason]?.label || reason);
const boldStatusLabel = <span className="font-weight-bold">{statusLabel}</span>;
const filter = getFilterName(filters, whitelistFilters, filterId, t);

53
client/src/components/Logs/Filters/Form.js
View File

@@ -1,10 +1,18 @@
import React from 'react';
import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import { Field, reduxForm } from 'redux-form';
import { useTranslation } from 'react-i18next';
import debounce from 'lodash/debounce';
import { DEBOUNCE_FILTER_TIMEOUT, FORM_NAME, RESPONSE_FILTER } from '../../../helpers/constants';
import { useDispatch } from 'react-redux';
import classNames from 'classnames';
import {
DEBOUNCE_FILTER_TIMEOUT,
DEFAULT_LOGS_FILTER,
FORM_NAME,
RESPONSE_FILTER,
} from '../../../helpers/constants';
import Tooltip from '../../ui/Tooltip';
import { setLogsFilter } from '../../../actions/queryLogs';
const renderFilterField = ({
input,
@@ -16,8 +24,9 @@ const renderFilterField = ({
autoComplete,
tooltip,
meta: { touched, error },
onClearInputClick,
}) => <>
<div className="input-group-search">
<div className="input-group-search input-group-search__icon--magnifier">
<svg className="icons icon--small icon--gray">
<use xlinkHref="#magnifier" />
</svg>
@@ -31,9 +40,15 @@ const renderFilterField = ({
disabled={disabled}
autoComplete={autoComplete}
aria-label={placeholder} />
<span className="logs__notice">
<Tooltip text={tooltip} type='tooltip-custom--logs' />
</span>
<div
className={classNames('input-group-search input-group-search__icon--cross', { invisible: input.value.length < 1 })}>
<svg className="icons icon--smallest icon--gray" onClick={onClearInputClick}>
<use xlinkHref="#cross" />
</svg>
</div>
<span className="input-group-search input-group-search__icon--tooltip">
<Tooltip text={tooltip} type='tooltip-custom--logs' />
</span>
{!disabled
&& touched
&& (error && <span className="form__message form__message--error">{error}</span>)}
@@ -42,6 +57,7 @@ const renderFilterField = ({
renderFilterField.propTypes = {
input: PropTypes.object.isRequired,
id: PropTypes.string.isRequired,
onClearInputClick: PropTypes.func.isRequired,
className: PropTypes.string,
placeholder: PropTypes.string,
type: PropTypes.string,
@@ -59,13 +75,29 @@ const Form = (props) => {
className = '',
responseStatusClass,
submit,
reset,
setIsLoading,
} = props;
const [t] = useTranslation();
const { t } = useTranslation();
const dispatch = useDispatch();
const debouncedSubmit = debounce(submit, DEBOUNCE_FILTER_TIMEOUT);
const zeroDelaySubmit = () => setTimeout(submit, 0);
const clearInput = async () => {
await dispatch(setLogsFilter(DEFAULT_LOGS_FILTER));
await reset();
};
const onInputClear = async () => {
setIsLoading(true);
await clearInput();
setIsLoading(false);
};
useEffect(() => clearInput, []);
return (
<form className="d-flex flex-wrap form-control--container"
onSubmit={(e) => {
@@ -79,16 +111,17 @@ const Form = (props) => {
name="search"
component={renderFilterField}
type="text"
className={`form-control--search form-control--transparent ${className}`}
className={classNames('form-control--search form-control--transparent', className)}
placeholder={t('domain_or_client')}
tooltip={t('query_log_strict_search')}
onChange={debouncedSubmit}
onClearInputClick={onInputClear}
/>
<div className="field__select">
<Field
name="response_status"
component="select"
className={`form-control custom-select custom-select--logs custom-select__arrow--left ml-small form-control--transparent ${responseStatusClass}`}
className={classNames('form-control custom-select custom-select--logs custom-select__arrow--left ml-small form-control--transparent', responseStatusClass)}
onChange={zeroDelaySubmit}
>
{Object.values(RESPONSE_FILTER)
@@ -107,6 +140,8 @@ Form.propTypes = {
className: PropTypes.string,
responseStatusClass: PropTypes.string,
submit: PropTypes.func.isRequired,
reset: PropTypes.func.isRequired,
setIsLoading: PropTypes.func.isRequired,
};
export default reduxForm({

3
client/src/components/Logs/Filters/index.js
View File

@@ -33,7 +33,8 @@ const Filters = ({ filter, refreshLogs, setIsLoading }) => {
responseStatusClass="d-sm-block"
initialValues={filter}
onSubmit={onSubmit}
/>
setIsLoading={setIsLoading}
/>
</div>
);
};

27
client/src/components/Logs/Logs.css
View File

@@ -199,17 +199,6 @@
position: relative;
}
.logs__notice {
position: relative;
z-index: 1;
top: 0.5rem;
right: 2rem;
margin-top: 0.1875rem;
font-size: 0.75rem;
text-align: left;
color: var(--gray-a5);
}
.logs__whois {
display: inline;
font-size: 12px;
@@ -485,10 +474,22 @@
.input-group-search {
background-color: transparent;
position: relative;
left: 2rem;
top: 0.4rem;
width: 1.5rem;
height: 1.5rem;
top: 0.4rem;
}
.input-group-search__icon--magnifier {
left: 2rem;
}
.input-group-search__icon--cross {
left: -4.5rem;
cursor: pointer;
}
.input-group-search__icon--tooltip {
left: -4rem;
}
.form-control--container {

37
client/src/components/Logs/Table.js
View File

@@ -180,6 +180,7 @@ const Table = (props) => {
minWidth: 123,
maxHeight: 60,
headerClassName: 'logs__text',
className: 'pb-0',
},
];
@@ -279,20 +280,15 @@ const Table = (props) => {
const hasTracker = !!tracker;
const autoClient = autoClients.find(
(autoClient) => autoClient.name === client,
);
const autoClient = autoClients
.find((autoClient) => autoClient.name === client);
const country = autoClient && autoClient.whois_info
&& autoClient.whois_info.country;
const { whois_info } = info;
const country = whois_info?.country;
const city = whois_info?.city;
const network = whois_info?.orgname;
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 source = autoClient?.source;
const formattedElapsedMs = formatElapsedMs(elapsedMs, t);
const isFiltered = checkFiltered(reason);
@@ -302,8 +298,7 @@ const Table = (props) => {
toggleBlocking(buttonType, domain);
};
const status = t((FILTERED_STATUS_TO_META_MAP[reason]
&& FILTERED_STATUS_TO_META_MAP[reason].label) || reason);
const status = t(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]) || '';
@@ -318,7 +313,7 @@ const Table = (props) => {
type_table_header: type,
protocol,
known_tracker: hasTracker && 'title',
table_name: hasTracker && tracker.name,
table_name: tracker?.name,
category_label: hasTracker && captitalizeWords(tracker.category),
tracker_source: hasTracker && sourceData
&& <a href={sourceData.url} target="_blank" rel="noopener noreferrer"
@@ -326,17 +321,17 @@ const Table = (props) => {
response_details: 'title',
install_settings_dns: upstream,
elapsed: formattedElapsedMs,
response_table_header: response && response.join('\n'),
response_table_header: response?.join('\n'),
client_details: 'title',
ip_address: client,
name: info && info.name,
name: 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>,
className="title--border bg--danger text-center">{t(buttonType)}</div>,
};
const detailedDataBlocked = {
@@ -347,7 +342,7 @@ const Table = (props) => {
type_table_header: type,
protocol,
known_tracker: 'title',
table_name: hasTracker && tracker.name,
table_name: tracker?.name,
category_label: hasTracker && captitalizeWords(tracker.category),
source_label: hasTracker && sourceData
&& <a href={sourceData.url} target="_blank" rel="noopener noreferrer"
@@ -355,9 +350,9 @@ const Table = (props) => {
response_details: 'title',
install_settings_dns: upstream,
elapsed: formattedElapsedMs,
response_table_header: response && response.join('\n'),
response_table_header: response?.join('\n'),
[buttonType]: <div onClick={onToggleBlock}
className="title--border">{t(buttonType)}</div>,
className="title--border text-center">{t(buttonType)}</div>,
};
const detailedDataCurrent = isFiltered ? detailedDataBlocked : detailedData;

2
client/src/components/Logs/index.js
View File

@@ -12,12 +12,12 @@ import Loading from '../ui/Loading';
import Filters from './Filters';
import Table from './Table';
import Disabled from './Disabled';
import './Logs.css';
import { getFilteringStatus } from '../../actions/filtering';
import { getClients } from '../../actions';
import { getDnsConfig } from '../../actions/dnsConfig';
import { getLogsConfig } from '../../actions/queryLogs';
import { addSuccessToast } from '../../actions/toasts';
import './Logs.css';
const INITIAL_REQUEST = true;
const INITIAL_REQUEST_DATA = ['', TABLE_FIRST_PAGE, INITIAL_REQUEST];

2
client/src/components/Settings/Dhcp/index.js
View File

@@ -32,7 +32,7 @@ class Dhcp extends Component {
const {
config, check, processingDhcp, processingConfig,
} = this.props.dhcp;
const otherDhcpFound = check && check.otherServer
const otherDhcpFound = check?.otherServer
&& check.otherServer.found === DHCP_STATUS_RESPONSE.YES;
const filledConfig = Object.keys(config).every((key) => {
if (key === 'enabled' || key === 'icmp_timeout_msec') {

2
client/src/components/Toasts/index.js
View File

@@ -9,7 +9,7 @@ import './Toast.css';
const Toasts = (props) => (
<TransitionGroup className="toasts">
{props.toasts.notices && props.toasts.notices.map((toast) => {
{props.toasts.notices?.map((toast) => {
const { id } = toast;
return (
<CSSTransition

6
client/src/components/ui/Guide.js
View File

@@ -120,7 +120,7 @@ const renderDnsPrivacyList = ({ title, list }) => <div className="tab__paragraph
<strong><Trans>{title}</Trans></strong>
<ul>{list.map(({ label, components }) => <li key={label}>
<Trans
components={components && components.map((props) => {
components={components?.map((props) => {
if (React.isValidElement(props)) {
return props;
}
@@ -198,7 +198,7 @@ const getTabs = ({
// eslint-disable-next-line react/display-name
getTitle: () => <div label="dns_privacy" title={t('dns_privacy')}>
<div className="tab__text">
{tlsAddress && tlsAddress.length > 0 && (
{tlsAddress?.length > 0 && (
<div className="tab__paragraph">
<Trans
values={{ address: tlsAddress[0] }}
@@ -211,7 +211,7 @@ const getTabs = ({
</Trans>
</div>
)}
{httpsAddress && httpsAddress.length > 0 && (
{httpsAddress?.length > 0 && (
<div className="tab__paragraph">
<Trans
values={{ address: httpsAddress[0] }}

5
client/src/components/ui/Icons.css
View File

@@ -9,6 +9,11 @@
height: 1.5rem;
}
.icon--smallest {
width: 1.2rem;
height: 1.2rem;
}
.icon--gray {
color: var(--gray-a5);
}