a
/
badguardhome
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge: + client: add detailed date format for filters 

Close #624

Squashed commit of the following:

commit 5a66d8ca350880abd0a7a146b75df385aa8f97b4
Author: Artem Baskal <a.baskal@adguard.com>
Date:   Mon Jan 20 19:16:27 2020 +0300

    update CellWrap logic

commit 072586493ef2cb73ba514a01d8b7f8904d4f5754
Author: Artem Baskal <a.baskal@adguard.com>
Date:   Mon Jan 20 15:37:26 2020 +0300

    fix invalid date case

commit bd2a21f2c788b2835485f4697dac1b797d5559c0
Author: Artem Baskal <a.baskal@adguard.com>
Date:   Fri Jan 17 18:44:23 2020 +0300

    + client: add detailed date format for filters
This commit is contained in:
Artem Baskal 2020-01-24 18:59:38 +03:00
parent ce7f1e231b
commit ac156b9612
8 changed files with 62 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
client/src/components/Filters/index.js
View File

@ -8,6 +8,7 @@ import Card from '../ui/Card';
import CellWrap from '../ui/CellWrap';
import UserRules from './UserRules';
import Modal from './Modal';
import { formatDetailedDateTime } from '../../helpers/helpers';
import { MODAL_TYPE } from '../../helpers/constants';
@ -62,6 +63,8 @@ class Filters extends Component {
}
};
getDateCell = row => CellWrap(row, formatDetailedDateTime);
getFilter = (url, filters) => {
const filter = filters.find(item => url === item.url);
@ -116,7 +119,7 @@ class Filters extends Component {
accessor: 'lastUpdated',
className: 'text-center',
minWidth: 150,
Cell: CellWrap,
Cell: this.getDateCell,
},
{
Header: <Trans>actions_table_header</Trans>,

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

@ -22,6 +22,7 @@ import Loading from '../ui/Loading';
import PopoverFiltered from '../ui/PopoverFilter';
import Popover from '../ui/Popover';
import './Logs.css';
import CellWrap from '../ui/CellWrap';
const TABLE_FIRST_PAGE = 0;
const INITIAL_REQUEST_DATA = ['', TABLE_FIRST_PAGE, TABLE_DEFAULT_PAGE_SIZE];
@ -115,12 +116,11 @@ class Logs extends Component {
checkWhiteList = reason => reason === FILTERED_STATUS.NOT_FILTERED_WHITE_LIST;
getTimeCell = ({ value }) => (
<div className="logs__row">
<span className="logs__text" title={formatDateTime(value)}>
{isToday(value) ? formatTime(value) : formatDateTime(value)}
</span>
</div>
getDateCell = row => CellWrap(
row,
(isToday(row.value) ? formatTime : formatDateTime),
formatDateTime,
);
getDomainCell = (row) => {
@ -259,7 +259,7 @@ class Logs extends Component {
Header: t('time_table_header'),
accessor: 'time',
minWidth: 105,
Cell: this.getTimeCell,
Cell: this.getDateCell,
},
{
Header: t('domain_name_table_header'),

8
client/src/components/Settings/Clients/AutoClients.js
View File

@ -4,7 +4,7 @@ import { withNamespaces } from 'react-i18next';
import ReactTable from 'react-table';
import Card from '../../ui/Card';
import WrapCell from './WrapCell';
import CellWrap from '../../ui/CellWrap';
import whoisCell from './whoisCell';
@ -16,19 +16,19 @@ class AutoClients extends Component {
Header: this.props.t('table_client'),
accessor: 'ip',
minWidth: COLUMN_MIN_WIDTH,
Cell: WrapCell,
Cell: CellWrap,
},
{
Header: this.props.t('table_name'),
accessor: 'name',
minWidth: COLUMN_MIN_WIDTH,
Cell: WrapCell,
Cell: CellWrap,
},
{
Header: this.props.t('source_label'),
accessor: 'source',
minWidth: COLUMN_MIN_WIDTH,
Cell: WrapCell,
Cell: CellWrap,
},
{
Header: this.props.t('whois'),

20
client/src/components/Settings/Clients/ClientsTable.js
View File

@ -7,7 +7,7 @@ import { MODAL_TYPE } from '../../../helpers/constants';
import { normalizeTextarea } from '../../../helpers/helpers';
import Card from '../../ui/Card';
import Modal from './Modal';
import WrapCell from './WrapCell';
import CellWrap from '../../ui/CellWrap';
class ClientsTable extends Component {
handleFormAdd = (values) => {
@ -94,7 +94,7 @@ class ClientsTable extends Component {
Header: this.props.t('table_name'),
accessor: 'name',
minWidth: 120,
Cell: WrapCell,
Cell: CellWrap,
},
{
Header: this.props.t('settings'),
@ -166,21 +166,7 @@ class ClientsTable extends Component {
accessor: row => this.props.normalizedTopClients.configured[row.name] || 0,
sortMethod: (a, b) => b - a,
minWidth: 120,
Cell: (row) => {
const { value: clientStats } = row;
if (clientStats) {
return (
<div className="logs__row">
<div className="logs__text" title={clientStats}>
{clientStats}
</div>
</div>
);
}
return '–';
},
Cell: CellWrap,
},
{
Header: this.props.t('actions_table_header'),

16
client/src/components/Settings/Clients/WrapCell.js
View File

@ -1,16 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
const WrapCell = ({ value }) => (
<div className="logs__row logs__row--overflow">
<span className="logs__text" title={value}>
{value || '–'}
</span>
</div>
);
WrapCell.propTypes = {
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
};
export default WrapCell;

24
client/src/components/ui/CellWrap.js
View File

@ -1,19 +1,29 @@
import React from 'react';
import PropTypes from 'prop-types';
const CellWrap = ({ value }) => (
<div className="logs__row logs__row--overflow">
<span className="logs__text logs__text--full" title={value}>
{value}
</span>
</div>
);
const CellWrap = ({ value }, formatValue, formatTitle = formatValue) => {
if (!value) {
return '–';
}
const cellValue = typeof formatValue === 'function' ? formatValue(value) : value;
const cellTitle = typeof formatTitle === 'function' ? formatTitle(value) : value;
return (
<div className="logs__row logs__row--overflow">
<span className="logs__text logs__text--full" title={cellTitle}>
{cellValue}
</span>
</div>
);
};
CellWrap.propTypes = {
value: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
]),
formatValue: PropTypes.func,
formatTitle: PropTypes.func,
};
export default CellWrap;

16
client/src/helpers/constants.js
View File

@ -434,3 +434,19 @@ export const RESPONSE_FILTER = {
ALL: 'all',
FILTERED: 'filtered',
};
export const DEFAULT_TIME_FORMAT = 'HH:mm:ss';
export const DEFAULT_DATE_FORMAT_OPTIONS = {
year: 'numeric',
month: 'numeric',
day: 'numeric',
hour: 'numeric',
minute: 'numeric',
hour12: false,
};
export const DETAILED_DATE_FORMAT_OPTIONS = {
...DEFAULT_DATE_FORMAT_OPTIONS,
month: 'long',
};

23
client/src/helpers/helpers.js
View File

@ -18,6 +18,10 @@ import {
STANDARD_HTTPS_PORT,
CHECK_TIMEOUT,
DNS_RECORD_TYPES,
DEFAULT_TIME_FORMAT,
DEFAULT_DATE_FORMAT_OPTIONS,
DETAILED_DATE_FORMAT_OPTIONS,
DEFAULT_LANGUAGE,
} from './constants';
/**
@ -26,28 +30,23 @@ import {
*/
export const formatTime = (time) => {
const parsedTime = dateParse(time);
return dateFormat(parsedTime, 'HH:mm:ss');
return dateFormat(parsedTime, DEFAULT_TIME_FORMAT);
};
/**
* @param string The date to format
* @returns string Returns the date and time in the format DD/MM/YYYY, HH:mm
*/
export const formatDateTime = (dateTime) => {
const currentLanguage = i18n.languages[0] || 'en';
export const formatDateTime = (dateTime, options = DEFAULT_DATE_FORMAT_OPTIONS) => {
const currentLanguage = i18n.languages[0] || DEFAULT_LANGUAGE;
const parsedTime = dateParse(dateTime);
const options = {
year: 'numeric',
month: 'numeric',
day: 'numeric',
hour: 'numeric',
minute: 'numeric',
hour12: false,
};
return parsedTime.toLocaleString(currentLanguage, options);
};
export const formatDetailedDateTime = dateTime =>
formatDateTime(dateTime, DETAILED_DATE_FORMAT_OPTIONS);
/**
* @param string
* @returns boolean
@ -140,7 +139,7 @@ export const normalizeFilteringStatus = (filteringStatus) => {
id,
url,
enabled,
lastUpdated: last_updated ? formatDateTime(last_updated) : '–',
lastUpdated: last_updated,
name,
rulesCount: rules_count,
};