diff --git a/client/src/__locales/en.json b/client/src/__locales/en.json index b800a9a8..57938631 100644 --- a/client/src/__locales/en.json +++ b/client/src/__locales/en.json @@ -393,8 +393,9 @@ "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.", - "city": "<0>City: {{value}}", - "country": "<0>Country: {{value}}", - "orgname": "<0>OrgName: {{value}}", + "location": "Location", + "orgname": "Organisation name", + "netname": "Network name", + "descr": "Description", "whois": "Whois" } diff --git a/client/src/components/Dashboard/Clients.js b/client/src/components/Dashboard/Clients.js index 57308fd6..54ca8b7a 100644 --- a/client/src/components/Dashboard/Clients.js +++ b/client/src/components/Dashboard/Clients.js @@ -28,13 +28,13 @@ const countCell = dnsQueries => return ; }; -const clientCell = (clients, autoClients) => +const clientCell = (clients, autoClients, t) => function cell(row) { const { value } = row; return (
- {formatClientCell(value, clients, autoClients)} + {formatClientCell(value, clients, autoClients, t)}
); }; @@ -59,11 +59,13 @@ const Clients = ({ accessor: 'ip', sortMethod: (a, b) => parseInt(a.replace(/\./g, ''), 10) - parseInt(b.replace(/\./g, ''), 10), - Cell: clientCell(clients, autoClients), + Cell: clientCell(clients, autoClients, t), }, { Header: requests_count, accessor: 'count', + minWidth: 180, + maxWidth: 200, Cell: countCell(dnsQueries), }, ]} diff --git a/client/src/components/Logs/Logs.css b/client/src/components/Logs/Logs.css index 86e03b2a..931e8694 100644 --- a/client/src/components/Logs/Logs.css +++ b/client/src/components/Logs/Logs.css @@ -129,3 +129,25 @@ white-space: nowrap; overflow: hidden; } + +.logs__whois { + display: inline; +} + +.logs__whois::after { + content: "|"; + padding: 0 5px; +} + +.logs__whois:last-child::after { + content: ""; +} + +.logs__whois-icon.icons { + position: relative; + top: -2px; + width: 16px; + height: 16px; + margin-right: 2px; + opacity: 0.6; +} diff --git a/client/src/components/Logs/index.js b/client/src/components/Logs/index.js index c2910b5e..994a4e18 100644 --- a/client/src/components/Logs/index.js +++ b/client/src/components/Logs/index.js @@ -191,7 +191,7 @@ class Logs extends Component { }; getClientCell = ({ original, value }) => { - const { dashboard } = this.props; + const { dashboard, t } = this.props; const { clients, autoClients } = dashboard; const { reason, domain } = original; const isFiltered = this.checkFiltered(reason); @@ -200,7 +200,7 @@ class Logs extends Component { return (
- {formatClientCell(value, clients, autoClients)} + {formatClientCell(value, clients, autoClients, t)}
{isRewrite ? (
diff --git a/client/src/components/Settings/Clients/AutoClients.js b/client/src/components/Settings/Clients/AutoClients.js index 1e8a9bdf..4e6ea1a8 100644 --- a/client/src/components/Settings/Clients/AutoClients.js +++ b/client/src/components/Settings/Clients/AutoClients.js @@ -4,8 +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'; +import whoisCell from './whoisCell'; +import wrapCell from './wrapCell'; class AutoClients extends Component { getStats = (ip, stats) => { @@ -21,26 +21,31 @@ class AutoClients extends Component { { Header: this.props.t('table_client'), accessor: 'ip', - Cell: WrapCell, + minWidth: 200, + Cell: wrapCell, }, { Header: this.props.t('table_name'), accessor: 'name', - Cell: WrapCell, + minWidth: 200, + Cell: wrapCell, }, { Header: this.props.t('source_label'), accessor: 'source', - Cell: WrapCell, + minWidth: 200, + Cell: wrapCell, }, { Header: this.props.t('whois'), accessor: 'whois_info', - Cell: WhoisCell, + minWidth: 200, + Cell: whoisCell(this.props.t), }, { Header: this.props.t('requests_count'), accessor: 'statistics', + minWidth: 200, Cell: (row) => { const clientIP = row.original.ip; const clientStats = clientIP && this.getStats(clientIP, this.props.topClients); diff --git a/client/src/components/Settings/Clients/ClientsTable.js b/client/src/components/Settings/Clients/ClientsTable.js index 53b4414e..eefa1157 100644 --- a/client/src/components/Settings/Clients/ClientsTable.js +++ b/client/src/components/Settings/Clients/ClientsTable.js @@ -6,8 +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'; +import wrapCell from './wrapCell'; +import whoisCell from './whoisCell'; class ClientsTable extends Component { handleFormAdd = (values) => { @@ -103,7 +103,7 @@ class ClientsTable extends Component { Header: this.props.t('table_name'), accessor: 'name', minWidth: 120, - Cell: WrapCell, + Cell: wrapCell, }, { Header: this.props.t('settings'), @@ -138,11 +138,17 @@ class ClientsTable extends Component { return (
- {value && value.length > 0 ? value.map(service => ( - - - - )) : '–'} + {value && value.length > 0 + ? value.map(service => ( + + + + )) + : '–'}
); }, @@ -151,7 +157,7 @@ class ClientsTable extends Component { Header: this.props.t('whois'), accessor: 'whois_info', minWidth: 200, - Cell: WhoisCell, + Cell: whoisCell(this.props.t), }, { Header: this.props.t('requests_count'), diff --git a/client/src/components/Settings/Clients/WhoisCell.js b/client/src/components/Settings/Clients/WhoisCell.js deleted file mode 100644 index a41137fa..00000000 --- a/client/src/components/Settings/Clients/WhoisCell.js +++ /dev/null @@ -1,38 +0,0 @@ -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/whoisCell.js b/client/src/components/Settings/Clients/whoisCell.js new file mode 100644 index 00000000..45ad951b --- /dev/null +++ b/client/src/components/Settings/Clients/whoisCell.js @@ -0,0 +1,43 @@ +import React, { Fragment } from 'react'; + +import { normalizeWhois } from '../../../helpers/helpers'; +import { WHOIS_ICONS } from '../../../helpers/constants'; + +const getFormattedWhois = (value, t) => { + const whoisInfo = normalizeWhois(value); + const whoisKeys = Object.keys(whoisInfo); + + if (whoisKeys.length > 0) { + return whoisKeys.map((key) => { + const icon = WHOIS_ICONS[key]; + return ( +
+ {icon && ( + + + + +   + + )} + {whoisInfo[key]} +
+ ); + }); + } + + return '–'; +}; + +const whoisCell = t => + function cell(row) { + const { value } = row; + + return ( +
+ {getFormattedWhois(value, t)} +
+ ); + }; + +export default whoisCell; diff --git a/client/src/components/Settings/Clients/WrapCell.js b/client/src/components/Settings/Clients/wrapCell.js similarity index 57% rename from client/src/components/Settings/Clients/WrapCell.js rename to client/src/components/Settings/Clients/wrapCell.js index efc3b100..54e13996 100644 --- a/client/src/components/Settings/Clients/WrapCell.js +++ b/client/src/components/Settings/Clients/wrapCell.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -const WrapCell = ({ value }) => ( +const wrapCell = ({ value }) => (
{value || '–'} @@ -9,11 +9,8 @@ const WrapCell = ({ value }) => (
); -WrapCell.propTypes = { - value: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.number, - ]), +wrapCell.propTypes = { + value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), }; -export default WrapCell; +export default wrapCell; diff --git a/client/src/components/ui/Icons.js b/client/src/components/ui/Icons.js index ef2fbf85..22346b9b 100644 --- a/client/src/components/ui/Icons.js +++ b/client/src/components/ui/Icons.js @@ -131,6 +131,18 @@ const Icons = () => ( + + + + + + + + + + + + ); diff --git a/client/src/helpers/constants.js b/client/src/helpers/constants.js index 997002fd..8c227dac 100644 --- a/client/src/helpers/constants.js +++ b/client/src/helpers/constants.js @@ -267,3 +267,10 @@ export const STATS_INTERVALS_DAYS = [1, 7, 30, 90]; export const QUERY_LOG_INTERVALS_DAYS = [1, 7, 30, 90]; export const FILTERS_INTERVALS_HOURS = [0, 1, 12, 24, 72, 168]; + +export const WHOIS_ICONS = { + location: 'location', + orgname: 'network', + netname: 'network', + descr: '', +}; diff --git a/client/src/helpers/formatClientCell.js b/client/src/helpers/formatClientCell.js index 1facf7c9..054b41f6 100644 --- a/client/src/helpers/formatClientCell.js +++ b/client/src/helpers/formatClientCell.js @@ -1,32 +1,55 @@ import React, { Fragment } from 'react'; -import { getClientInfo } from './helpers'; +import { getClientInfo, normalizeWhois } from './helpers'; +import { WHOIS_ICONS } from './constants'; -export const formatClientCell = (value, clients, autoClients) => { +const getFormattedWhois = (whois, t) => { + const whoisInfo = normalizeWhois(whois); + return ( + Object.keys(whoisInfo).map((key) => { + const icon = WHOIS_ICONS[key]; + return ( + + {icon && ( + + + +   + + )}{whoisInfo[key]} + + ); + }) + ); +}; + +export const formatClientCell = (value, clients, autoClients, t) => { const clientInfo = getClientInfo(clients, value) || getClientInfo(autoClients, value); const { name, whois } = clientInfo; + let whoisContainer = ''; + let nameContainer = value; - if (whois && name) { - return ( - -
- {name} ({value}) -
-
- {whois} -
- - ); - } else if (name) { - return ( + if (name) { + nameContainer = ( {name} ({value}) ); } + if (whois) { + whoisContainer = ( +
+ {getFormattedWhois(whois, t)} +
+ ); + } + return ( - - {value} + + + {nameContainer} + {whoisContainer} + ); }; diff --git a/client/src/helpers/helpers.js b/client/src/helpers/helpers.js index 9b35c635..7ded995a 100644 --- a/client/src/helpers/helpers.js +++ b/client/src/helpers/helpers.js @@ -245,21 +245,6 @@ export const redirectToCurrentProtocol = (values, httpPort = 80) => { export const normalizeTextarea = text => text && text.replace(/[;, ]/g, '\n').split('\n').filter(n => n); -const formatWhois = (whois) => { - if (!whois) { - return ''; - } - - const keys = Object.keys(whois); - if (keys.length > 0) { - return ( - keys.map(key => whois[key]) - ); - } - - return ''; -}; - export const getClientInfo = (clients, ip) => { const client = clients.find(item => ip === item.ip); @@ -268,8 +253,7 @@ export const getClientInfo = (clients, ip) => { } const { name, whois_info } = client; - const formattedWhois = formatWhois(whois_info); - const whois = formattedWhois && formattedWhois.length > 0 && formattedWhois.join(' | '); + const whois = Object.keys(whois_info).length > 0 ? whois_info : ''; return { name, whois }; }; @@ -308,3 +292,29 @@ export const normalizeRulesTextarea = text => text && text.replace(/^\n/g, '').r export const isVersionGreater = (currentVersion, previousVersion) => ( versionCompare(currentVersion, previousVersion) === -1 ); + +export const normalizeWhois = (whois) => { + if (Object.keys(whois).length > 0) { + const { + city, country, ...values + } = whois; + let location = (country && country) || ''; + + if (city && location) { + location = `${location}, ${city}`; + } else if (city) { + location = city; + } + + if (location) { + return { + location, + ...values, + }; + } + + return { ...values }; + } + + return whois; +};