+ client: add whois info to dashboard and logs

client/src/components/Dashboard/Clients.js

@@ -6,8 +6,9 @@ import { Trans, withNamespaces } from 'react-i18next';
 import Card from '../ui/Card';
 import Cell from '../ui/Cell';
 
-import { getPercent, getClientName } from '../../helpers/helpers';
+import { getPercent } from '../../helpers/helpers';
 import { STATUS_COLORS } from '../../helpers/constants';
+import { formatClientCell } from '../../helpers/formatClientCell';
 
 const getClientsPercentColor = (percent) => {
     if (percent > 50) {
@@ -18,31 +19,6 @@ const getClientsPercentColor = (percent) => {
     return STATUS_COLORS.red;
 };
 
-const ipCell = (clients, autoClients) =>
-    function cell(row) {
-        let client;
-        const { value } = row;
-        const clientName = getClientName(clients, value) || getClientName(autoClients, value);
-
-        if (clientName) {
-            client = (
-                <span>
-                    {clientName} <small>({value})</small>
-                </span>
-            );
-        } else {
-            client = value;
-        }
-
-        return (
-            <div className="logs__row logs__row--overflow">
-                <span className="logs__text" title={value}>
-                    {client}
-                </span>
-            </div>
-        );
-    };
-
 const countCell = dnsQueries =>
     function cell(row) {
         const { value } = row;
@@ -52,6 +28,17 @@ const countCell = dnsQueries =>
         return <Cell value={value} percent={percent} color={percentColor} />;
     };
 
+const clientCell = (clients, autoClients) =>
+    function cell(row) {
+        const { value } = row;
+
+        return (
+            <div className="logs__row logs__row--overflow logs__row--column">
+                {formatClientCell(value, clients, autoClients)}
+            </div>
+        );
+    };
+
 const Clients = ({
     t, refreshButton, topClients, subtitle, clients, autoClients, dnsQueries,
 }) => (
@@ -72,7 +59,7 @@ const Clients = ({
                     accessor: 'ip',
                     sortMethod: (a, b) =>
                         parseInt(a.replace(/\./g, ''), 10) - parseInt(b.replace(/\./g, ''), 10),
-                    Cell: ipCell(clients, autoClients),
+                    Cell: clientCell(clients, autoClients),
                 },
                 {
                     Header: <Trans>requests_count</Trans>,

client/src/components/Logs/Logs.css

@@ -10,8 +10,9 @@
 }
 
 .logs__row--column {
-    align-items: flex-start;
     flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
 }
 
 .logs__row--overflow {
@@ -41,6 +42,7 @@
 }
 
 .logs__text--wrap {
+    line-height: 1.4;
     white-space: normal;
 }
 

client/src/components/Logs/index.js

@@ -6,9 +6,11 @@ import endsWith from 'lodash/endsWith';
 import { Trans, withNamespaces } from 'react-i18next';
 import { HashLink as Link } from 'react-router-hash-link';
 
-import { formatTime, formatDateTime, getClientName } from '../../helpers/helpers';
+import { formatTime, formatDateTime } from '../../helpers/helpers';
 import { SERVICES, FILTERED_STATUS } from '../../helpers/constants';
 import { getTrackerData } from '../../helpers/trackers/trackers';
+import { formatClientCell } from '../../helpers/formatClientCell';
+
 import PageTitle from '../ui/PageTitle';
 import Card from '../ui/Card';
 import Loading from '../ui/Loading';
@@ -190,24 +192,16 @@ class Logs extends Component {
 
     getClientCell = ({ original, value }) => {
         const { dashboard } = this.props;
+        const { clients, autoClients } = dashboard;
         const { reason, domain } = original;
         const isFiltered = this.checkFiltered(reason);
         const isRewrite = this.checkRewrite(reason);
-        const clientName =
-            getClientName(dashboard.clients, value) || getClientName(dashboard.autoClients, value);
-        let client = value;
-
-        if (clientName) {
-            client = (
-                <span>
-                    {clientName} <small>({value})</small>
-                </span>
-            );
-        }
 
         return (
             <Fragment>
-                <div className="logs__row">{client}</div>
+                <div className="logs__row logs__row--overflow logs__row--column">
+                    {formatClientCell(value, clients, autoClients)}
+                </div>
                 {isRewrite ? (
                     <div className="logs__action">
                         <Link to="/dns#rewrites" className="btn btn-sm btn-outline-primary">
@@ -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,
             },
         ];

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