From 95eeccde8f43ac258386369cab6d0226ca1eef42 Mon Sep 17 00:00:00 2001 From: Simon Zolin <s.zolin@adguard.com> Date: Mon, 23 Sep 2019 20:41:14 +0300 Subject: [PATCH 1/5] + whois: use "descr" or "netname" in case there's no "orgname" --- home/clients.go | 2 ++ home/whois.go | 41 +++++++++++++++++++++++++++++++++++------ 2 files changed, 37 insertions(+), 6 deletions(-) diff --git a/home/clients.go b/home/clients.go index 7fcfeed3..061a8935 100644 --- a/home/clients.go +++ b/home/clients.go @@ -287,12 +287,14 @@ func (clients *clientsContainer) SetWhoisInfo(ip string, info [][]string) { if ok { c.WhoisInfo = info log.Debug("Clients: set WHOIS info for client %s: %v", c.Name, c.WhoisInfo) + return } ch, ok := clients.ipHost[ip] if ok { ch.WhoisInfo = info log.Debug("Clients: set WHOIS info for auto-client %s: %v", ch.Host, ch.WhoisInfo) + return } ch = ClientHost{ diff --git a/home/whois.go b/home/whois.go index f5dd2ab2..ccd5e51e 100644 --- a/home/whois.go +++ b/home/whois.go @@ -8,6 +8,8 @@ import ( whois "github.com/likexian/whois-go" ) +const maxValueLength = 250 + // Whois - module context type Whois struct { clients *clientsContainer @@ -26,9 +28,19 @@ func initWhois(clients *clientsContainer) *Whois { return &w } +// If the value is too large - cut it and append "..." +func trimValue(s string) string { + if len(s) <= maxValueLength { + return s + } + return s[:maxValueLength-3] + "..." +} + // Parse plain-text data from the response func whoisParse(data string) map[string]string { m := map[string]string{} + descr := "" + netname := "" lines := strings.Split(data, "\n") for _, ln := range lines { ln = strings.TrimSpace(ln) @@ -45,14 +57,31 @@ func whoisParse(data string) map[string]string { k = strings.ToLower(k) v := strings.TrimSpace(kv[1]) - if k == "orgname" || k == "org-name" { - m["orgname"] = v - } else if k == "city" { - m["city"] = v - } else if k == "country" { - m["country"] = v + switch k { + case "org-name": + m["orgname"] = trimValue(v) + case "orgname": + fallthrough + case "city": + fallthrough + case "country": + m[k] = trimValue(v) + + case "descr": + descr = v + case "netname": + netname = v } } + + // descr or netname -> orgname + _, ok := m["orgname"] + if !ok && len(descr) != 0 { + m["orgname"] = trimValue(descr) + } else if !ok && len(netname) != 0 { + m["orgname"] = trimValue(netname) + } + return m } From fcf37da3125aa613b96dd1ef08aee5a8d7cbb29f Mon Sep 17 00:00:00 2001 From: Simon Zolin <s.zolin@adguard.com> Date: Mon, 23 Sep 2019 21:25:17 +0300 Subject: [PATCH 2/5] * clients: remove an auto-client if a client with the same IP was added manually --- home/clients.go | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/home/clients.go b/home/clients.go index 061a8935..ad246171 100644 --- a/home/clients.go +++ b/home/clients.go @@ -206,6 +206,12 @@ func (clients *clientsContainer) Add(c Client) (bool, error) { } } + ch, ok := clients.ipHost[c.IP] + if ok { + c.WhoisInfo = ch.WhoisInfo + delete(clients.ipHost, c.IP) + } + clients.list[c.Name] = &c if len(c.IP) != 0 { clients.ipIndex[c.IP] = &c @@ -312,6 +318,12 @@ func (clients *clientsContainer) AddHost(ip, host string, source clientSource) ( clients.lock.Lock() defer clients.lock.Unlock() + // check index + _, ok := clients.ipIndex[ip] + if ok { + return false, nil + } + // check index c, ok := clients.ipHost[ip] if ok && c.Source > source { 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 3/5] + 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; +}; From 63efce0309f5569d743c817313ce22912d42874d Mon Sep 17 00:00:00 2001 From: Ildar Kamalov <i.kamalov@adguard.com> Date: Wed, 25 Sep 2019 16:08:54 +0300 Subject: [PATCH 4/5] - client: fix typo in translations --- client/src/__locales/en.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/__locales/en.json b/client/src/__locales/en.json index 57938631..e4e1c1af 100644 --- a/client/src/__locales/en.json +++ b/client/src/__locales/en.json @@ -394,7 +394,7 @@ "forgot_password": "Forgot password?", "forgot_password_desc": "Please follow <0>these steps</0> to create a new password for your user account.", "location": "Location", - "orgname": "Organisation name", + "orgname": "Organization name", "netname": "Network name", "descr": "Description", "whois": "Whois" From 563f8031dce889b076c91a4b3b6489241cd2b322 Mon Sep 17 00:00:00 2001 From: Ildar Kamalov <i.kamalov@adguard.com> Date: Thu, 26 Sep 2019 12:17:58 +0300 Subject: [PATCH 5/5] - client: fix naming --- .../Settings/Clients/AutoClients.js | 21 +++++++++++-------- .../Settings/Clients/ClientsTable.js | 5 +++-- .../Clients/{wrapCell.js => WrapCell.js} | 6 +++--- 3 files changed, 18 insertions(+), 14 deletions(-) rename client/src/components/Settings/Clients/{wrapCell.js => WrapCell.js} (78%) diff --git a/client/src/components/Settings/Clients/AutoClients.js b/client/src/components/Settings/Clients/AutoClients.js index 4e6ea1a8..abfe8a0d 100644 --- a/client/src/components/Settings/Clients/AutoClients.js +++ b/client/src/components/Settings/Clients/AutoClients.js @@ -4,8 +4,11 @@ import { withNamespaces } from 'react-i18next'; import ReactTable from 'react-table'; import Card from '../../ui/Card'; +import WrapCell from './WrapCell'; + import whoisCell from './whoisCell'; -import wrapCell from './wrapCell'; + +const COLUMN_MIN_WIDTH = 200; class AutoClients extends Component { getStats = (ip, stats) => { @@ -21,31 +24,31 @@ class AutoClients extends Component { { Header: this.props.t('table_client'), accessor: 'ip', - minWidth: 200, - Cell: wrapCell, + minWidth: COLUMN_MIN_WIDTH, + Cell: WrapCell, }, { Header: this.props.t('table_name'), accessor: 'name', - minWidth: 200, - Cell: wrapCell, + minWidth: COLUMN_MIN_WIDTH, + Cell: WrapCell, }, { Header: this.props.t('source_label'), accessor: 'source', - minWidth: 200, - Cell: wrapCell, + minWidth: COLUMN_MIN_WIDTH, + Cell: WrapCell, }, { Header: this.props.t('whois'), accessor: 'whois_info', - minWidth: 200, + minWidth: COLUMN_MIN_WIDTH, Cell: whoisCell(this.props.t), }, { Header: this.props.t('requests_count'), accessor: 'statistics', - minWidth: 200, + minWidth: COLUMN_MIN_WIDTH, 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 eefa1157..6fee7217 100644 --- a/client/src/components/Settings/Clients/ClientsTable.js +++ b/client/src/components/Settings/Clients/ClientsTable.js @@ -6,7 +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 WrapCell from './WrapCell'; + import whoisCell from './whoisCell'; class ClientsTable extends Component { @@ -103,7 +104,7 @@ class ClientsTable extends Component { Header: this.props.t('table_name'), accessor: 'name', minWidth: 120, - Cell: wrapCell, + Cell: WrapCell, }, { Header: this.props.t('settings'), diff --git a/client/src/components/Settings/Clients/wrapCell.js b/client/src/components/Settings/Clients/WrapCell.js similarity index 78% rename from client/src/components/Settings/Clients/wrapCell.js rename to client/src/components/Settings/Clients/WrapCell.js index 54e13996..2a5413b7 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,8 +9,8 @@ const wrapCell = ({ value }) => ( </div> ); -wrapCell.propTypes = { +WrapCell.propTypes = { value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), }; -export default wrapCell; +export default WrapCell;