diff --git a/client/src/components/Filters/index.js b/client/src/components/Filters/index.js index 318b9b95..0fb4efdf 100644 --- a/client/src/components/Filters/index.js +++ b/client/src/components/Filters/index.js @@ -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: actions_table_header, diff --git a/client/src/components/Logs/index.js b/client/src/components/Logs/index.js index 1569075e..c511edc7 100644 --- a/client/src/components/Logs/index.js +++ b/client/src/components/Logs/index.js @@ -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 }) => ( -
- - {isToday(value) ? formatTime(value) : formatDateTime(value)} - -
+ + 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'), diff --git a/client/src/components/Settings/Clients/AutoClients.js b/client/src/components/Settings/Clients/AutoClients.js index 295c0466..0bee8fbb 100644 --- a/client/src/components/Settings/Clients/AutoClients.js +++ b/client/src/components/Settings/Clients/AutoClients.js @@ -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'), diff --git a/client/src/components/Settings/Clients/ClientsTable.js b/client/src/components/Settings/Clients/ClientsTable.js index b1a806f4..82cdeebe 100644 --- a/client/src/components/Settings/Clients/ClientsTable.js +++ b/client/src/components/Settings/Clients/ClientsTable.js @@ -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 ( -
-
- {clientStats} -
-
- ); - } - - return '–'; - }, + Cell: CellWrap, }, { Header: this.props.t('actions_table_header'), diff --git a/client/src/components/Settings/Clients/WrapCell.js b/client/src/components/Settings/Clients/WrapCell.js deleted file mode 100644 index 2a5413b7..00000000 --- a/client/src/components/Settings/Clients/WrapCell.js +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -const WrapCell = ({ value }) => ( -
- - {value || '–'} - -
-); - -WrapCell.propTypes = { - value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), -}; - -export default WrapCell; diff --git a/client/src/components/ui/CellWrap.js b/client/src/components/ui/CellWrap.js index 93904fa5..b23bceff 100644 --- a/client/src/components/ui/CellWrap.js +++ b/client/src/components/ui/CellWrap.js @@ -1,19 +1,29 @@ import React from 'react'; import PropTypes from 'prop-types'; -const CellWrap = ({ value }) => ( -
- - {value} - -
-); +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 ( +
+ + {cellValue} + +
+ ); +}; CellWrap.propTypes = { value: PropTypes.oneOfType([ PropTypes.string, PropTypes.number, ]), + formatValue: PropTypes.func, + formatTitle: PropTypes.func, }; export default CellWrap; diff --git a/client/src/helpers/constants.js b/client/src/helpers/constants.js index d015eec6..218d8e43 100644 --- a/client/src/helpers/constants.js +++ b/client/src/helpers/constants.js @@ -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', +}; diff --git a/client/src/helpers/helpers.js b/client/src/helpers/helpers.js index 62fe3b66..fefd27fa 100644 --- a/client/src/helpers/helpers.js +++ b/client/src/helpers/helpers.js @@ -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, };