From a52715e0863af0a9e1b26dbf96fc7cced02ae4f6 Mon Sep 17 00:00:00 2001 From: Ildar Kamalov Date: Mon, 23 Sep 2019 16:02:47 +0300 Subject: [PATCH] + client: add whois info to dashboard and logs --- client/src/components/Dashboard/Clients.js | 41 +++++++------------ client/src/components/Logs/Logs.css | 4 +- client/src/components/Logs/index.js | 24 ++++------- .../Settings/Clients/ClientsTable.js | 3 +- client/src/helpers/formatClientCell.js | 32 +++++++++++++++ client/src/helpers/helpers.js | 28 ++++++++++++- 6 files changed, 86 insertions(+), 46 deletions(-) create mode 100644 client/src/helpers/formatClientCell.js diff --git a/client/src/components/Dashboard/Clients.js b/client/src/components/Dashboard/Clients.js index d2e9d4a9..57308fd6 100644 --- a/client/src/components/Dashboard/Clients.js +++ b/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 = ( - - {clientName} ({value}) - - ); - } else { - client = value; - } - - return ( -
- - {client} - -
- ); - }; - const countCell = dnsQueries => function cell(row) { const { value } = row; @@ -52,6 +28,17 @@ const countCell = dnsQueries => return ; }; +const clientCell = (clients, autoClients) => + function cell(row) { + const { value } = row; + + return ( +
+ {formatClientCell(value, clients, autoClients)} +
+ ); + }; + 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: requests_count, diff --git a/client/src/components/Logs/Logs.css b/client/src/components/Logs/Logs.css index e5178957..86e03b2a 100644 --- a/client/src/components/Logs/Logs.css +++ b/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; } diff --git a/client/src/components/Logs/index.js b/client/src/components/Logs/index.js index 3f1493af..c2910b5e 100644 --- a/client/src/components/Logs/index.js +++ b/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 = ( - - {clientName} ({value}) - - ); - } return ( -
{client}
+
+ {formatClientCell(value, clients, autoClients)} +
{isRewrite ? (
@@ -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, }, ]; diff --git a/client/src/components/Settings/Clients/ClientsTable.js b/client/src/components/Settings/Clients/ClientsTable.js index a9ff94a6..53b4414e 100644 --- a/client/src/components/Settings/Clients/ClientsTable.js +++ b/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); diff --git a/client/src/helpers/formatClientCell.js b/client/src/helpers/formatClientCell.js new file mode 100644 index 00000000..1facf7c9 --- /dev/null +++ b/client/src/helpers/formatClientCell.js @@ -0,0 +1,32 @@ +import React, { Fragment } from 'react'; +import { getClientInfo } from './helpers'; + +export const formatClientCell = (value, clients, autoClients) => { + const clientInfo = getClientInfo(clients, value) || getClientInfo(autoClients, value); + const { name, whois } = clientInfo; + + if (whois && name) { + return ( + +
+ {name} ({value}) +
+
+ {whois} +
+ + ); + } else if (name) { + return ( + + {name} ({value}) + + ); + } + + return ( + + {value} + + ); +}; diff --git a/client/src/helpers/helpers.js b/client/src/helpers/helpers.js index 2c70d709..9b35c635 100644 --- a/client/src/helpers/helpers.js +++ b/client/src/helpers/helpers.js @@ -245,9 +245,33 @@ export const redirectToCurrentProtocol = (values, httpPort = 80) => { export const normalizeTextarea = text => text && text.replace(/[;, ]/g, '\n').split('\n').filter(n => n); -export const getClientName = (clients, ip) => { +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); - return (client && client.name) || ''; + + if (!client) { + return ''; + } + + const { name, whois_info } = client; + const formattedWhois = formatWhois(whois_info); + const whois = formattedWhois && formattedWhois.length > 0 && formattedWhois.join(' | '); + + return { name, whois }; }; export const sortClients = (clients) => {