+ client: handle clients find

client/src/helpers/formatClientCell.js

@@ -1,5 +1,5 @@
 import React, { Fragment } from 'react';
-import { getClientInfo, getAutoClientInfo, normalizeWhois } from './helpers';
+import { normalizeWhois } from './helpers';
 import { WHOIS_ICONS } from './constants';
 
 const getFormattedWhois = (whois, t) => {
@@ -22,26 +22,29 @@ const getFormattedWhois = (whois, t) => {
     );
 };
 
-export const formatClientCell = (value, clients, autoClients, t) => {
-    const clientInfo = getClientInfo(clients, value) || getAutoClientInfo(autoClients, value);
-    const { name, whois } = clientInfo;
+export const formatClientCell = (row, t) => {
+    const { value, original: { info } } = row;
     let whoisContainer = '';
     let nameContainer = value;
 
-    if (name) {
-        nameContainer = (
-            <span className="logs__text logs__text--wrap" title={`${name} (${value})`}>
-                {name} <small>({value})</small>
-            </span>
-        );
-    }
+    if (info) {
+        const { name, whois } = info;
 
-    if (whois) {
-        whoisContainer = (
-            <div className="logs__text logs__text--wrap logs__text--whois">
-                {getFormattedWhois(whois, t)}
-            </div>
-        );
+        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 logs__text--whois">
+                    {getFormattedWhois(whois, t)}
+                </div>
+            );
+        }
     }
 
     return (

client/src/helpers/helpers.js

@@ -8,6 +8,7 @@ import subDays from 'date-fns/sub_days';
 import round from 'lodash/round';
 import axios from 'axios';
 import i18n from 'i18next';
+import uniqBy from 'lodash/uniqBy';
 import versionCompare from './versionCompare';
 
 import {
@@ -92,6 +93,17 @@ export const normalizeTopStats = stats => (
     }))
 );
 
+export const addClientInfo = (data, clients, param) => (
+    data.map((row) => {
+        const clientIp = row[param];
+        const info = clients.find(item => item[clientIp]) || '';
+        return {
+            ...row,
+            info: (info && info[clientIp]) || '',
+        };
+    })
+);
+
 export const normalizeFilteringStatus = (filteringStatus) => {
     const {
         enabled, filters, user_rules: userRules, interval,
@@ -342,3 +354,13 @@ export const getPathWithQueryString = (path, params) => {
 
     return `${path}?${searchParams.toString()}`;
 };
+
+export const getParamsForClientsSearch = (data, param) => {
+    const uniqueClients = uniqBy(data, param);
+    return uniqueClients
+        .reduce((acc, item, idx) => {
+            const key = `ip${idx}`;
+            acc[key] = item[param];
+            return acc;
+        }, {});
+};