+ client: add whois info to clients and auto clients table

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</0> to create a new password for your user account."
+    "forgot_password_desc": "Please follow <0>these steps</0> to create a new password for your user account.",
+    "city": "<0>City:</0> {{value}}",
+    "country": "<0>Country:</0> {{value}}",
+    "orgname": "<0>OrgName:</0> {{value}}",
+    "whois": "Whois"
 }

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;

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 }) => (
-        <div className="logs__row logs__row--overflow">
-            <span className="logs__text" title={value}>
-                {value}
-            </span>
-        </div>
-    );
-
     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'),

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 }) => (
-        <div className="logs__row logs__row--overflow">
-            <span className="logs__text" title={value}>
-                {value}
-            </span>
-        </div>
-    );
-
     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 ? (
                     <Trans>settings_global</Trans>
@@ -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 {

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 => (
+                <div key={key} title={value[key]}>
+                    <Trans
+                        values={{ value: value[key] }}
+                        components={[<small key="0">text</small>]}
+                    >
+                        {key}
+                    </Trans>
+                </div>
+            ))
+        );
+    }
+
+    return '–';
+};
+
+const WhoisCell = ({ value }) => (
+    <div className="logs__row logs__row--overflow">
+        <span className="logs__text logs__text--wrap">
+            {getFormattedWhois(value)}
+        </span>
+    </div>
+);
+
+WhoisCell.propTypes = {
+    value: PropTypes.object.isRequired,
+};
+
+export default WhoisCell;

client/src/components/Settings/Clients/WrapCell.js

@@ -0,0 +1,19 @@
+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;