+ {formatClientCell(value, clients, autoClients)}
+
{isRewrite ? (
@@ -273,8 +267,8 @@ class Logs extends Component {
{
Header: t('client_table_header'),
accessor: 'client',
- maxWidth: 220,
- minWidth: 220,
+ maxWidth: 240,
+ minWidth: 240,
Cell: this.getClientCell,
},
];
diff --git a/client/src/components/Settings/Clients/ClientsTable.js b/client/src/components/Settings/Clients/ClientsTable.js
index a9ff94a6..53b4414e 100644
--- a/client/src/components/Settings/Clients/ClientsTable.js
+++ b/client/src/components/Settings/Clients/ClientsTable.js
@@ -128,7 +128,7 @@ class ClientsTable extends Component {
{
Header: this.props.t('blocked_services'),
accessor: 'blocked_services',
- minWidth: 210,
+ minWidth: 180,
Cell: (row) => {
const { value, original } = row;
@@ -156,6 +156,7 @@ class ClientsTable extends Component {
{
Header: this.props.t('requests_count'),
accessor: 'statistics',
+ minWidth: 120,
Cell: (row) => {
const clientIP = row.original.ip;
const clientStats = clientIP && this.getStats(clientIP, this.props.topClients);
diff --git a/client/src/helpers/formatClientCell.js b/client/src/helpers/formatClientCell.js
new file mode 100644
index 00000000..1facf7c9
--- /dev/null
+++ b/client/src/helpers/formatClientCell.js
@@ -0,0 +1,32 @@
+import React, { Fragment } from 'react';
+import { getClientInfo } from './helpers';
+
+export const formatClientCell = (value, clients, autoClients) => {
+ const clientInfo = getClientInfo(clients, value) || getClientInfo(autoClients, value);
+ const { name, whois } = clientInfo;
+
+ if (whois && name) {
+ return (
+
+
+ {name} ({value})
+
+
+ {whois}
+
+
+ );
+ } else if (name) {
+ return (
+
+ {name} ({value})
+
+ );
+ }
+
+ return (
+
+ {value}
+
+ );
+};
diff --git a/client/src/helpers/helpers.js b/client/src/helpers/helpers.js
index 2c70d709..9b35c635 100644
--- a/client/src/helpers/helpers.js
+++ b/client/src/helpers/helpers.js
@@ -245,9 +245,33 @@ export const redirectToCurrentProtocol = (values, httpPort = 80) => {
export const normalizeTextarea = text => text && text.replace(/[;, ]/g, '\n').split('\n').filter(n => n);
-export const getClientName = (clients, ip) => {
+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);
- return (client && client.name) || '';
+
+ if (!client) {
+ return '';
+ }
+
+ const { name, whois_info } = client;
+ const formattedWhois = formatWhois(whois_info);
+ const whois = formattedWhois && formattedWhois.length > 0 && formattedWhois.join(' | ');
+
+ return { name, whois };
};
export const sortClients = (clients) => {