diff --git a/client/src/__locales/en.json b/client/src/__locales/en.json index d2d7bfe7..b800a9a8 100644 --- a/client/src/__locales/en.json +++ b/client/src/__locales/en.json @@ -392,5 +392,9 @@ "sign_in": "Sign in", "sign_out": "Sign out", "forgot_password": "Forgot password?", - "forgot_password_desc": "Please follow <0>these steps to create a new password for your user account." + "forgot_password_desc": "Please follow <0>these steps to create a new password for your user account.", + "city": "<0>City: {{value}}", + "country": "<0>Country: {{value}}", + "orgname": "<0>OrgName: {{value}}", + "whois": "Whois" } diff --git a/client/src/components/Logs/Logs.css b/client/src/components/Logs/Logs.css index a5c073af..e5178957 100644 --- a/client/src/components/Logs/Logs.css +++ b/client/src/components/Logs/Logs.css @@ -40,6 +40,10 @@ width: 100%; } +.logs__text--wrap { + white-space: normal; +} + .logs__row .tooltip-custom { top: 0; margin-left: 0; diff --git a/client/src/components/Settings/Clients/AutoClients.js b/client/src/components/Settings/Clients/AutoClients.js index 98b11a52..1e8a9bdf 100644 --- a/client/src/components/Settings/Clients/AutoClients.js +++ b/client/src/components/Settings/Clients/AutoClients.js @@ -4,6 +4,8 @@ import { withNamespaces } from 'react-i18next'; import ReactTable from 'react-table'; import Card from '../../ui/Card'; +import WhoisCell from './WhoisCell'; +import WrapCell from './WrapCell'; class AutoClients extends Component { getStats = (ip, stats) => { @@ -15,29 +17,26 @@ class AutoClients extends Component { return ''; }; - cellWrap = ({ value }) => ( -
- - {value} - -
- ); - columns = [ { Header: this.props.t('table_client'), accessor: 'ip', - Cell: this.cellWrap, + Cell: WrapCell, }, { Header: this.props.t('table_name'), accessor: 'name', - Cell: this.cellWrap, + Cell: WrapCell, }, { Header: this.props.t('source_label'), accessor: 'source', - Cell: this.cellWrap, + Cell: WrapCell, + }, + { + Header: this.props.t('whois'), + accessor: 'whois_info', + Cell: WhoisCell, }, { Header: this.props.t('requests_count'), diff --git a/client/src/components/Settings/Clients/ClientsTable.js b/client/src/components/Settings/Clients/ClientsTable.js index 27e4c738..a9ff94a6 100644 --- a/client/src/components/Settings/Clients/ClientsTable.js +++ b/client/src/components/Settings/Clients/ClientsTable.js @@ -6,6 +6,8 @@ import ReactTable from 'react-table'; import { MODAL_TYPE, CLIENT_ID } from '../../../helpers/constants'; import Card from '../../ui/Card'; import Modal from './Modal'; +import WrapCell from './WrapCell'; +import WhoisCell from './WhoisCell'; class ClientsTable extends Component { handleFormAdd = (values) => { @@ -33,14 +35,6 @@ class ClientsTable extends Component { } }; - cellWrap = ({ value }) => ( -
- - {value} - -
- ); - getClient = (name, clients) => { const client = clients.find(item => name === item.name); @@ -82,6 +76,7 @@ class ClientsTable extends Component { { Header: this.props.t('table_client'), accessor: 'ip', + minWidth: 150, Cell: (row) => { if (row.original && row.original.mac) { return ( @@ -107,11 +102,13 @@ class ClientsTable extends Component { { Header: this.props.t('table_name'), accessor: 'name', - Cell: this.cellWrap, + minWidth: 120, + Cell: WrapCell, }, { Header: this.props.t('settings'), accessor: 'use_global_settings', + minWidth: 120, Cell: ({ value }) => { const title = value ? ( settings_global @@ -131,6 +128,7 @@ class ClientsTable extends Component { { Header: this.props.t('blocked_services'), accessor: 'blocked_services', + minWidth: 210, Cell: (row) => { const { value, original } = row; @@ -149,6 +147,12 @@ class ClientsTable extends Component { ); }, }, + { + Header: this.props.t('whois'), + accessor: 'whois_info', + minWidth: 200, + Cell: WhoisCell, + }, { Header: this.props.t('requests_count'), accessor: 'statistics', @@ -172,7 +176,7 @@ class ClientsTable extends Component { { Header: this.props.t('actions_table_header'), accessor: 'actions', - maxWidth: 150, + maxWidth: 100, Cell: (row) => { const clientName = row.original.name; const { diff --git a/client/src/components/Settings/Clients/WhoisCell.js b/client/src/components/Settings/Clients/WhoisCell.js new file mode 100644 index 00000000..a41137fa --- /dev/null +++ b/client/src/components/Settings/Clients/WhoisCell.js @@ -0,0 +1,38 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { Trans } from 'react-i18next'; + +const getFormattedWhois = (value) => { + const keys = Object.keys(value); + + if (keys.length > 0) { + return ( + keys.map(key => ( +
+ text]} + > + {key} + +
+ )) + ); + } + + return '–'; +}; + +const WhoisCell = ({ value }) => ( +
+ + {getFormattedWhois(value)} + +
+); + +WhoisCell.propTypes = { + value: PropTypes.object.isRequired, +}; + +export default WhoisCell; diff --git a/client/src/components/Settings/Clients/WrapCell.js b/client/src/components/Settings/Clients/WrapCell.js new file mode 100644 index 00000000..efc3b100 --- /dev/null +++ b/client/src/components/Settings/Clients/WrapCell.js @@ -0,0 +1,19 @@ +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;