+ client: add icons to the whois info

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: '',
+};

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 (
+                <span className="logs__whois text-muted" key={key} title={t(key)}>
+                    {icon && (
+                        <Fragment>
+                            <svg className="logs__whois-icon icons">
+                                <use xlinkHref={`#${icon}`} />
+                            </svg>&nbsp;
+                        </Fragment>
+                    )}{whoisInfo[key]}
+                </span>
+            );
+        })
+    );
+};
+
+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 (
-            <Fragment>
-                <div className="logs__text logs__text--wrap" title={`${name} (${value})`}>
-                    {name} <small className="text-muted-dark">({value})</small>
-                </div>
-                <div className="logs__text logs__text--wrap" title={whois}>
-                    <small className="text-muted">{whois}</small>
-                </div>
-            </Fragment>
-        );
-    } else if (name) {
-        return (
+    if (name) {
+        nameContainer = (
             <span className="logs__text logs__text--wrap" title={`${name} (${value})`}>
                 {name} <small>({value})</small>
             </span>
         );
     }
 
+    if (whois) {
+        whoisContainer = (
+            <div className="logs__text logs__text--wrap mt-1">
+                {getFormattedWhois(whois, t)}
+            </div>
+        );
+    }
+
     return (
-        <span className="logs__text" title={value}>
-            {value}
+        <span className="logs__text">
+            <Fragment>
+                {nameContainer}
+                {whoisContainer}
+            </Fragment>
         </span>
     );
 };

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;
+};