From ba62d42949db49fa049fdce41b16fcac629e0066 Mon Sep 17 00:00:00 2001
From: Ildar Kamalov <i.kamalov@adguard.com>
Date: Tue, 24 Sep 2019 15:28:59 +0300
Subject: [PATCH] + client: add icons to the whois info
---
client/src/__locales/en.json | 7 ++-
client/src/components/Dashboard/Clients.js | 8 ++-
client/src/components/Logs/Logs.css | 22 +++++++
client/src/components/Logs/index.js | 4 +-
.../Settings/Clients/AutoClients.js | 17 ++++--
.../Settings/Clients/ClientsTable.js | 24 +++++---
.../components/Settings/Clients/WhoisCell.js | 38 ------------
.../components/Settings/Clients/whoisCell.js | 43 +++++++++++++
.../Clients/{WrapCell.js => wrapCell.js} | 11 ++--
client/src/components/ui/Icons.js | Bin 27827 -> 29462 bytes
client/src/helpers/constants.js | 7 +++
client/src/helpers/formatClientCell.js | 57 ++++++++++++------
client/src/helpers/helpers.js | 44 ++++++++------
13 files changed, 180 insertions(+), 102 deletions(-)
delete mode 100644 client/src/components/Settings/Clients/WhoisCell.js
create mode 100644 client/src/components/Settings/Clients/whoisCell.js
rename client/src/components/Settings/Clients/{WrapCell.js => wrapCell.js} (57%)
diff --git a/client/src/__locales/en.json b/client/src/__locales/en.json
index b800a9a8..57938631 100644
--- a/client/src/__locales/en.json
+++ b/client/src/__locales/en.json
@@ -393,8 +393,9 @@
"sign_out": "Sign out",
"forgot_password": "Forgot password?",
"forgot_password_desc": "Please follow <0>these steps</0> to create a new password for your user account.",
- "city": "<0>City:</0> {{value}}",
- "country": "<0>Country:</0> {{value}}",
- "orgname": "<0>OrgName:</0> {{value}}",
+ "location": "Location",
+ "orgname": "Organisation name",
+ "netname": "Network name",
+ "descr": "Description",
"whois": "Whois"
}
diff --git a/client/src/components/Dashboard/Clients.js b/client/src/components/Dashboard/Clients.js
index 57308fd6..54ca8b7a 100644
--- a/client/src/components/Dashboard/Clients.js
+++ b/client/src/components/Dashboard/Clients.js
@@ -28,13 +28,13 @@ const countCell = dnsQueries =>
return <Cell value={value} percent={percent} color={percentColor} />;
};
-const clientCell = (clients, autoClients) =>
+const clientCell = (clients, autoClients, t) =>
function cell(row) {
const { value } = row;
return (
<div className="logs__row logs__row--overflow logs__row--column">
- {formatClientCell(value, clients, autoClients)}
+ {formatClientCell(value, clients, autoClients, t)}
</div>
);
};
@@ -59,11 +59,13 @@ const Clients = ({
accessor: 'ip',
sortMethod: (a, b) =>
parseInt(a.replace(/\./g, ''), 10) - parseInt(b.replace(/\./g, ''), 10),
- Cell: clientCell(clients, autoClients),
+ Cell: clientCell(clients, autoClients, t),
},
{
Header: <Trans>requests_count</Trans>,
accessor: 'count',
+ minWidth: 180,
+ maxWidth: 200,
Cell: countCell(dnsQueries),
},
]}
diff --git a/client/src/components/Logs/Logs.css b/client/src/components/Logs/Logs.css
index 86e03b2a..931e8694 100644
--- a/client/src/components/Logs/Logs.css
+++ b/client/src/components/Logs/Logs.css
@@ -129,3 +129,25 @@
white-space: nowrap;
overflow: hidden;
}
+
+.logs__whois {
+ display: inline;
+}
+
+.logs__whois::after {
+ content: "|";
+ padding: 0 5px;
+}
+
+.logs__whois:last-child::after {
+ content: "";
+}
+
+.logs__whois-icon.icons {
+ position: relative;
+ top: -2px;
+ width: 16px;
+ height: 16px;
+ margin-right: 2px;
+ opacity: 0.6;
+}
diff --git a/client/src/components/Logs/index.js b/client/src/components/Logs/index.js
index c2910b5e..994a4e18 100644
--- a/client/src/components/Logs/index.js
+++ b/client/src/components/Logs/index.js
@@ -191,7 +191,7 @@ class Logs extends Component {
};
getClientCell = ({ original, value }) => {
- const { dashboard } = this.props;
+ const { dashboard, t } = this.props;
const { clients, autoClients } = dashboard;
const { reason, domain } = original;
const isFiltered = this.checkFiltered(reason);
@@ -200,7 +200,7 @@ class Logs extends Component {
return (
<Fragment>
<div className="logs__row logs__row--overflow logs__row--column">
- {formatClientCell(value, clients, autoClients)}
+ {formatClientCell(value, clients, autoClients, t)}
</div>
{isRewrite ? (
<div className="logs__action">
diff --git a/client/src/components/Settings/Clients/AutoClients.js b/client/src/components/Settings/Clients/AutoClients.js
index 1e8a9bdf..4e6ea1a8 100644
--- a/client/src/components/Settings/Clients/AutoClients.js
+++ b/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);
diff --git a/client/src/components/Settings/Clients/ClientsTable.js b/client/src/components/Settings/Clients/ClientsTable.js
index 53b4414e..eefa1157 100644
--- a/client/src/components/Settings/Clients/ClientsTable.js
+++ b/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'),
diff --git a/client/src/components/Settings/Clients/WhoisCell.js b/client/src/components/Settings/Clients/WhoisCell.js
deleted file mode 100644
index a41137fa..00000000
--- a/client/src/components/Settings/Clients/WhoisCell.js
+++ /dev/null
@@ -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;
diff --git a/client/src/components/Settings/Clients/whoisCell.js b/client/src/components/Settings/Clients/whoisCell.js
new file mode 100644
index 00000000..45ad951b
--- /dev/null
+++ b/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>
+
+ </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;
diff --git a/client/src/components/Settings/Clients/WrapCell.js b/client/src/components/Settings/Clients/wrapCell.js
similarity index 57%
rename from client/src/components/Settings/Clients/WrapCell.js
rename to client/src/components/Settings/Clients/wrapCell.js
index efc3b100..54e13996 100644
--- a/client/src/components/Settings/Clients/WrapCell.js
+++ b/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;
diff --git a/client/src/components/ui/Icons.js b/client/src/components/ui/Icons.js
index ef2fbf854cd158a06a190be2a55db3f2c3f788a3..22346b9b300b07f24bbc269909991d832cb3dac5 100644
GIT binary patch
delta 1087
zcmYjQO>Px23|2RY3!uU-EZCHJRvafz!gjXPZIQaGo>){o^+~i+C4@Abpqr7n21vaC
z9D@sR4n8OEZ!wv~u|M12=RE&C`|<DW*VAVC`S#WG<LC1;+q}5@^zgX-vRvJMT)qvj
zXBU#oZgiZeMvh)_$|O=tjE+6U95ku(lncX^m2#FS#Z9nzHB+Xj(cCAOC{@YH1)(55
zYK2Wnf)^GS0wt+l#nLfJF4fO!@tUia;<%9K)Gz@7<OEM)LM;Z0qZHD>zM`~4R20%8
z3AST`$;C)$1|X-U#JX>CU-WEM!yLF+26U%22_tU|q-y0f7SygKl264l<xbnRyKHq<
z>!=bMZYb5Ukkn{EfhjcRaE(w97ZSyuZgOQNQGtUCO3ZCHS#<3l)_m&%#z-0)B#g!Z
zppf-Iekc^H8Z}7C-7~a0v5pScB_&e?M=>Rm^)?^FB$0HFV}i+vlJC-=)DoFgG&8_X
z%8s5YLrGW<EkZvf^*!;P3V|cIF@<My26t{pWuqQC_A$T-v|7_}LeakTvBZFOT1=4)
zHf_!z9!lEjlrgl3nG78R68mVQ9SGC)Kq#EX?gea6XG3;GMCqPTctbqo4w?EinznFf
zcfI_%c>i*<UEe(1Zts@wAFlAQ-ppYLV<DC}gdq*7?b1-!9;ZC8wB<gp%8*wqBiEe|
z9%4~N5Ch?>yTlKVC9PL@F@*=ef_B(5*S5pSt^MxuU>+cAvio~{Lo*My!#84(VDb&k
U<`kfo!1CFD`F(M|JZ;|n2bf~wvH$=8
delta 13
VcmbRCjB)c##tnTrlRp-z0st|M2G9Ti
diff --git a/client/src/helpers/constants.js b/client/src/helpers/constants.js
index 997002fd..8c227dac 100644
--- a/client/src/helpers/constants.js
+++ b/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: '',
+};
diff --git a/client/src/helpers/formatClientCell.js b/client/src/helpers/formatClientCell.js
index 1facf7c9..054b41f6 100644
--- a/client/src/helpers/formatClientCell.js
+++ b/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>
+ </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>
);
};
diff --git a/client/src/helpers/helpers.js b/client/src/helpers/helpers.js
index 9b35c635..7ded995a 100644
--- a/client/src/helpers/helpers.js
+++ b/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;
+};