+ client: add icons to the whois info

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);

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 (
                     <div className="logs__row logs__row--icons">
-                        {value && value.length > 0 ? value.map(service => (
-                            <svg className="service__icon service__icon--table" title={service} key={service}>
-                                <use xlinkHref={`#service_${service}`} />
-                            </svg>
-                        )) : '–'}
+                        {value && value.length > 0
+                            ? value.map(service => (
+                                  <svg
+                                      className="service__icon service__icon--table"
+                                      title={service}
+                                      key={service}
+                                  >
+                                      <use xlinkHref={`#service_${service}`} />
+                                  </svg>
+                            ))
+                            : '–'}
                     </div>
                 );
             },
@@ -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'),

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

@@ -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 => (
-                <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/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 (
+                <div key={key} title={t(key)}>
+                    {icon && (
+                        <Fragment>
+                            <svg className="logs__whois-icon text-muted-dark icons">
+                                <use xlinkHref={`#${icon}`} />
+                            </svg>
+                            &nbsp;
+                        </Fragment>
+                    )}
+                    {whoisInfo[key]}
+                </div>
+            );
+        });
+    }
+
+    return '–';
+};
+
+const whoisCell = t =>
+    function cell(row) {
+        const { value } = row;
+
+        return (
+            <div className="logs__row logs__row--overflow">
+                <span className="logs__text logs__text--wrap">{getFormattedWhois(value, t)}</span>
+            </div>
+        );
+    };
+
+export default whoisCell;

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 }) => (
     <div className="logs__row logs__row--overflow">
         <span className="logs__text" title={value}>
             {value || '–'}
@@ -9,11 +9,8 @@ const WrapCell = ({ value }) => (
     </div>
 );
 
-WrapCell.propTypes = {
-    value: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.number,
-    ]),
+wrapCell.propTypes = {
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 };
 
-export default WrapCell;
+export default wrapCell;