Merge: - client: sort clients table by requests count by default

fix #1253

* commit 'ca79fc98f5d43a5ca1955e8b0056edc3a6ee9b61':
  change code style in reduce
  - client: sort clients table by requests count by default
This commit is contained in:
Andrey Meshkov 2019-12-23 12:35:07 +03:00
commit 482e9fd6f3
5 changed files with 40 additions and 35 deletions

View File

@ -11,15 +11,6 @@ import whoisCell from './whoisCell';
const COLUMN_MIN_WIDTH = 200;
class AutoClients extends Component {
getStats = (ip, stats) => {
if (stats) {
const statsForCurrentIP = stats.find(item => item.name === ip);
return statsForCurrentIP && statsForCurrentIP.count;
}
return '';
};
columns = [
{
Header: this.props.t('table_client'),
@ -47,11 +38,12 @@ class AutoClients extends Component {
},
{
Header: this.props.t('requests_count'),
accessor: 'statistics',
accessor: row => this.props.normalizedTopClients[row.ip] || 0,
sortMethod: (a, b) => b - a,
id: 'statistics',
minWidth: COLUMN_MIN_WIDTH,
Cell: (row) => {
const clientIP = row.original.ip;
const clientStats = clientIP && this.getStats(clientIP, this.props.topClients);
const { value: clientStats } = row;
if (clientStats) {
return (
@ -80,6 +72,12 @@ class AutoClients extends Component {
<ReactTable
data={autoClients || []}
columns={this.columns}
defaultSorted={[
{
id: 'statistics',
asc: true,
},
]}
className="-striped -highlight card-table-overflow"
showPagination={true}
defaultPageSize={10}
@ -100,7 +98,7 @@ class AutoClients extends Component {
AutoClients.propTypes = {
t: PropTypes.func.isRequired,
autoClients: PropTypes.array.isRequired,
topClients: PropTypes.array.isRequired,
normalizedTopClients: PropTypes.object.isRequired,
};
export default withNamespaces()(AutoClients);

View File

@ -60,15 +60,6 @@ class ClientsTable extends Component {
};
};
getStats = (name, stats) => {
if (stats) {
const currentStats = stats.find(item => item.info && item.info.name === name);
return currentStats && currentStats.count;
}
return '';
};
handleDelete = (data) => {
// eslint-disable-next-line no-alert
if (window.confirm(this.props.t('client_confirm_delete', { key: data.name }))) {
@ -136,13 +127,13 @@ class ClientsTable extends Component {
<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>
<svg
className="service__icon service__icon--table"
title={service}
key={service}
>
<use xlinkHref={`#service_${service}`} />
</svg>
))
: ''}
</div>
@ -169,11 +160,12 @@ class ClientsTable extends Component {
},
{
Header: this.props.t('requests_count'),
accessor: 'statistics',
id: 'statistics',
accessor: row => this.props.normalizedTopClients[row.name] || 0,
sortMethod: (a, b) => b - a,
minWidth: 120,
Cell: (row) => {
const { name } = row.original;
const clientStats = this.getStats(name, this.props.topClients);
const { value: clientStats } = row;
if (clientStats) {
return (
@ -257,6 +249,12 @@ class ClientsTable extends Component {
<ReactTable
data={clients || []}
columns={this.columns}
defaultSorted={[
{
id: 'statistics',
asc: true,
},
]}
className="-striped -highlight card-table-overflow"
showPagination={true}
defaultPageSize={10}
@ -296,7 +294,7 @@ class ClientsTable extends Component {
ClientsTable.propTypes = {
t: PropTypes.func.isRequired,
clients: PropTypes.array.isRequired,
topClients: PropTypes.array.isRequired,
normalizedTopClients: PropTypes.object.isRequired,
toggleClientModal: PropTypes.func.isRequired,
deleteClient: PropTypes.func.isRequired,
addClient: PropTypes.func.isRequired,

View File

@ -33,7 +33,7 @@ class Clients extends Component {
<Fragment>
<ClientsTable
clients={dashboard.clients}
topClients={stats.topClients}
normalizedTopClients={stats.normalizedTopClients}
isModalOpen={clients.isModalOpen}
modalClientName={clients.modalClientName}
modalType={clients.modalType}
@ -47,7 +47,7 @@ class Clients extends Component {
/>
<AutoClients
autoClients={dashboard.autoClients}
topClients={stats.topClients}
normalizedTopClients={stats.normalizedTopClients}
/>
</Fragment>
)}

View File

@ -261,6 +261,13 @@ export const redirectToCurrentProtocol = (values, httpPort = 80) => {
export const normalizeTextarea = text => text && text.replace(/[;, ]/g, '\n').split('\n').filter(n => n);
export const normalizeTopClients = clients => clients.reduce((accumulator, clientObj) => {
const { name, count } = clientObj;
// eslint-disable-next-line no-param-reassign
accumulator[name] = count;
return accumulator;
}, {});
export const getClientInfo = (clients, ip) => {
const client = clients
.find(item => item.ip_addrs && item.ip_addrs.find(clientIp => clientIp === ip));

View File

@ -1,4 +1,5 @@
import { handleActions } from 'redux-actions';
import { normalizeTopClients } from '../helpers/helpers';
import * as actions from '../actions/stats';
@ -64,6 +65,7 @@ const stats = handleActions(
replacedSafebrowsing,
topBlockedDomains,
topClients,
normalizedTopClients: normalizeTopClients(topClients),
topQueriedDomains,
numBlockedFiltering,
numDnsQueries,