+ client: functional components for dashboard

client/src/components/Dashboard/BlockedDomains.js

@@ -1,76 +1,67 @@
-import React, { Component } from 'react';
+import React from 'react';
 import ReactTable from 'react-table';
 import PropTypes from 'prop-types';
 import { withNamespaces, Trans } from 'react-i18next';
 
 import Card from '../ui/Card';
 import Cell from '../ui/Cell';
-import Popover from '../ui/Popover';
+import DomainCell from './DomainCell';
 
-import { getTrackerData } from '../../helpers/trackers/trackers';
 import { getPercent } from '../../helpers/helpers';
 import { STATUS_COLORS } from '../../helpers/constants';
 
-class BlockedDomains extends Component {
-    columns = [
-        {
-            Header: <Trans>domain</Trans>,
-            accessor: 'domain',
-            Cell: (row) => {
-                const { value } = row;
-                const trackerData = getTrackerData(value);
+const CountCell = totalBlocked =>
+    function cell(row) {
+        const { value } = row;
+        const percent = getPercent(totalBlocked, value);
 
-                return (
-                    <div className="logs__row">
-                        <div className="logs__text" title={value}>
-                            {value}
-                        </div>
-                        {trackerData && <Popover data={trackerData} />}
-                    </div>
-                );
-            },
-        },
-        {
-            Header: <Trans>requests_count</Trans>,
-            accessor: 'count',
-            maxWidth: 190,
-            Cell: ({ value }) => {
-                const { blockedFiltering, replacedSafebrowsing, replacedParental } = this.props;
-                const blocked = blockedFiltering + replacedSafebrowsing + replacedParental;
-                const percent = getPercent(blocked, value);
+        return <Cell value={value} percent={percent} color={STATUS_COLORS.red} />;
+    };
 
-                return <Cell value={value} percent={percent} color={STATUS_COLORS.red} />;
-            },
-        },
-    ];
+const BlockedDomains = ({
+    t,
+    refreshButton,
+    topBlockedDomains,
+    subtitle,
+    blockedFiltering,
+    replacedSafebrowsing,
+    replacedParental,
+}) => {
+    const totalBlocked = blockedFiltering + replacedSafebrowsing + replacedParental;
 
-    render() {
-        const {
-            t, refreshButton, topBlockedDomains, subtitle,
-        } = this.props;
-
-        return (
-            <Card
-                title={t('top_blocked_domains')}
-                subtitle={subtitle}
-                bodyType="card-table"
-                refresh={refreshButton}
-            >
-                <ReactTable
-                    data={topBlockedDomains.map(item => ({
-                        domain: item.name,
-                        count: item.count,
-                    }))}
-                    columns={this.columns}
-                    showPagination={false}
-                    noDataText={t('no_domains_found')}
-                    minRows={6}
-                    className="-striped -highlight card-table-overflow stats__table"
-                />
-            </Card>
-        );
-    }
-}
+    return (
+        <Card
+            title={t('top_blocked_domains')}
+            subtitle={subtitle}
+            bodyType="card-table"
+            refresh={refreshButton}
+        >
+            <ReactTable
+                data={topBlockedDomains.map(({ name: domain, count }) => ({
+                    domain,
+                    count,
+                }))}
+                columns={[
+                    {
+                        Header: <Trans>domain</Trans>,
+                        accessor: 'domain',
+                        Cell: DomainCell,
+                    },
+                    {
+                        Header: <Trans>requests_count</Trans>,
+                        accessor: 'count',
+                        maxWidth: 190,
+                        Cell: CountCell(totalBlocked),
+                    },
+                ]}
+                showPagination={false}
+                noDataText={t('no_domains_found')}
+                minRows={6}
+                className="-striped -highlight card-table-overflow stats__table"
+            />
+        </Card>
+    );
+};
 
 BlockedDomains.propTypes = {
     topBlockedDomains: PropTypes.array.isRequired,

client/src/components/Dashboard/Clients.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 import ReactTable from 'react-table';
 import PropTypes from 'prop-types';
 import { Trans, withNamespaces } from 'react-i18next';
@@ -9,86 +9,84 @@ import Cell from '../ui/Cell';
 import { getPercent, getClientName } from '../../helpers/helpers';
 import { STATUS_COLORS } from '../../helpers/constants';
 
-class Clients extends Component {
-    getPercentColor = (percent) => {
-        if (percent > 50) {
-            return STATUS_COLORS.green;
-        } else if (percent > 10) {
-            return STATUS_COLORS.yellow;
+const getClientsPercentColor = (percent) => {
+    if (percent > 50) {
+        return STATUS_COLORS.green;
+    } else if (percent > 10) {
+        return STATUS_COLORS.yellow;
+    }
+    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 = (
+                <span>
+                    {clientName} <small>({value})</small>
+                </span>
+            );
+        } else {
+            client = value;
         }
-        return STATUS_COLORS.red;
-    };
-
-    columns = [
-        {
-            Header: 'IP',
-            accessor: 'ip',
-            Cell: ({ value }) => {
-                const clientName =
-                    getClientName(this.props.clients, value) ||
-                    getClientName(this.props.autoClients, value);
-                let client;
-
-                if (clientName) {
-                    client = (
-                        <span>
-                            {clientName} <small>({value})</small>
-                        </span>
-                    );
-                } else {
-                    client = value;
-                }
-
-                return (
-                    <div className="logs__row logs__row--overflow">
-                        <span className="logs__text" title={value}>
-                            {client}
-                        </span>
-                    </div>
-                );
-            },
-            sortMethod: (a, b) =>
-                parseInt(a.replace(/\./g, ''), 10) - parseInt(b.replace(/\./g, ''), 10),
-        },
-        {
-            Header: <Trans>requests_count</Trans>,
-            accessor: 'count',
-            Cell: ({ value }) => {
-                const percent = getPercent(this.props.dnsQueries, value);
-                const percentColor = this.getPercentColor(percent);
-
-                return <Cell value={value} percent={percent} color={percentColor} />;
-            },
-        },
-    ];
-
-    render() {
-        const {
-            t, refreshButton, topClients, subtitle,
-        } = this.props;
 
         return (
-            <Card
-                title={t('top_clients')}
-                subtitle={subtitle}
-                bodyType="card-table"
-                refresh={refreshButton}
-            >
-                <ReactTable
-                    data={topClients.map(item => ({
-                        ip: item.name,
-                        count: item.count,
-                    }))}
-                    columns={this.columns}
-                    showPagination={false}
-                    noDataText={t('no_clients_found')}
-                    minRows={6}
-                    className="-striped -highlight card-table-overflow"
-                />
-            </Card>
+            <div className="logs__row logs__row--overflow">
+                <span className="logs__text" title={value}>
+                    {client}
+                </span>
+            </div>
         );
-    }
-}
+    };
+
+const countCell = dnsQueries =>
+    function cell(row) {
+        const { value } = row;
+        const percent = getPercent(dnsQueries, value);
+        const percentColor = getClientsPercentColor(percent);
+
+        return <Cell value={value} percent={percent} color={percentColor} />;
+    };
+
+const Clients = ({
+    t, refreshButton, topClients, subtitle, clients, autoClients, dnsQueries,
+}) => (
+    <Card
+        title={t('top_clients')}
+        subtitle={subtitle}
+        bodyType="card-table"
+        refresh={refreshButton}
+    >
+        <ReactTable
+            data={topClients.map(({ name: ip, count }) => ({
+                ip,
+                count,
+            }))}
+            columns={[
+                {
+                    Header: 'IP',
+                    accessor: 'ip',
+                    sortMethod: (a, b) =>
+                        parseInt(a.replace(/\./g, ''), 10) - parseInt(b.replace(/\./g, ''), 10),
+                    Cell: ipCell(clients, autoClients),
+                },
+                {
+                    Header: <Trans>requests_count</Trans>,
+                    accessor: 'count',
+                    Cell: countCell(dnsQueries),
+                },
+            ]}
+            showPagination={false}
+            noDataText={t('no_clients_found')}
+            minRows={6}
+            className="-striped -highlight card-table-overflow"
+        />
+    </Card>
+);
 
 Clients.propTypes = {
     topClients: PropTypes.array.isRequired,

client/src/components/Dashboard/Counters.js

@@ -25,7 +25,7 @@ const Counters = (props) => {
     const tooltipTitle =
         interval === 1
             ? t('number_of_dns_query_24_hours')
-            : t('number_of_dns_query_days', { value: interval });
+            : t('number_of_dns_query_days', { count: interval });
 
     return (
         <Card
@@ -47,9 +47,9 @@ const Counters = (props) => {
                     </tr>
                     <tr>
                         <td>
-                            <a href="#filters">
-                                <Trans>blocked_by</Trans>
-                            </a>
+                            <Trans components={[<a href="#filters" key="0">link</a>]}>
+                                blocked_by
+                            </Trans>
                             <Tooltip
                                 text={t('number_of_dns_query_blocked_24_hours')}
                                 type={tooltipType}

client/src/components/Dashboard/DomainCell.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { getTrackerData } from '../../helpers/trackers/trackers';
+import Popover from '../ui/Popover';
+
+const DomainCell = ({ value }) => {
+    const trackerData = getTrackerData(value);
+
+    return (
+        <div className="logs__row">
+            <div className="logs__text" title={value}>
+                {value}
+            </div>
+            {trackerData && <Popover data={trackerData} />}
+        </div>
+    );
+};
+
+DomainCell.propTypes = {
+    value: PropTypes.string.isRequired,
+};
+
+export default DomainCell;

client/src/components/Dashboard/QueriedDomains.js

@@ -1,83 +1,67 @@
-import React, { Component } from 'react';
+import React from 'react';
 import ReactTable from 'react-table';
 import PropTypes from 'prop-types';
 import { withNamespaces, Trans } from 'react-i18next';
 
 import Card from '../ui/Card';
 import Cell from '../ui/Cell';
-import Popover from '../ui/Popover';
+import DomainCell from './DomainCell';
 
-import { getTrackerData } from '../../helpers/trackers/trackers';
-import { getPercent } from '../../helpers/helpers';
 import { STATUS_COLORS } from '../../helpers/constants';
+import { getPercent } from '../../helpers/helpers';
 
-class QueriedDomains extends Component {
-    getPercentColor = (percent) => {
-        if (percent > 10) {
-            return STATUS_COLORS.red;
-        } else if (percent > 5) {
-            return STATUS_COLORS.yellow;
-        }
-        return STATUS_COLORS.green;
+const getQueriedPercentColor = (percent) => {
+    if (percent > 10) {
+        return STATUS_COLORS.red;
+    } else if (percent > 5) {
+        return STATUS_COLORS.yellow;
+    }
+    return STATUS_COLORS.green;
+};
+
+const countCell = dnsQueries =>
+    function cell(row) {
+        const { value } = row;
+        const percent = getPercent(dnsQueries, value);
+        const percentColor = getQueriedPercentColor(percent);
+
+        return <Cell value={value} percent={percent} color={percentColor} />;
     };
 
-    columns = [
-        {
-            Header: <Trans>domain</Trans>,
-            accessor: 'domain',
-            Cell: (row) => {
-                const { value } = row;
-                const trackerData = getTrackerData(value);
-
-                return (
-                    <div className="logs__row">
-                        <div className="logs__text" title={value}>
-                            {value}
-                        </div>
-                        {trackerData && <Popover data={trackerData} />}
-                    </div>
-                );
-            },
-        },
-        {
-            Header: <Trans>requests_count</Trans>,
-            accessor: 'count',
-            maxWidth: 190,
-            Cell: ({ value }) => {
-                const percent = getPercent(this.props.dnsQueries, value);
-                const percentColor = this.getPercentColor(percent);
-
-                return <Cell value={value} percent={percent} color={percentColor} />;
-            },
-        },
-    ];
-
-    render() {
-        const {
-            t, refreshButton, topQueriedDomains, subtitle,
-        } = this.props;
-        return (
-            <Card
-                title={t('stats_query_domain')}
-                subtitle={subtitle}
-                bodyType="card-table"
-                refresh={refreshButton}
-            >
-                <ReactTable
-                    data={topQueriedDomains.map(item => ({
-                        domain: item.name,
-                        count: item.count,
-                    }))}
-                    columns={this.columns}
-                    showPagination={false}
-                    noDataText={t('no_domains_found')}
-                    minRows={6}
-                    className="-striped -highlight card-table-overflow stats__table"
-                />
-            </Card>
-        );
-    }
-}
+const QueriedDomains = ({
+    t, refreshButton, topQueriedDomains, subtitle, dnsQueries,
+}) => (
+    <Card
+        title={t('stats_query_domain')}
+        subtitle={subtitle}
+        bodyType="card-table"
+        refresh={refreshButton}
+    >
+        <ReactTable
+            data={topQueriedDomains.map(({ name: domain, count }) => ({
+                domain,
+                count,
+            }))}
+            columns={[
+                {
+                    Header: <Trans>domain</Trans>,
+                    accessor: 'domain',
+                    Cell: DomainCell,
+                },
+                {
+                    Header: <Trans>requests_count</Trans>,
+                    accessor: 'count',
+                    maxWidth: 190,
+                    Cell: countCell(dnsQueries),
+                },
+            ]}
+            showPagination={false}
+            noDataText={t('no_domains_found')}
+            minRows={6}
+            className="-striped -highlight card-table-overflow stats__table"
+        />
+    </Card>
+);
 
 QueriedDomains.propTypes = {
     topQueriedDomains: PropTypes.array.isRequired,

client/src/components/Dashboard/Statistics.js

@@ -1,130 +1,67 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { Trans, withNamespaces } from 'react-i18next';
-
-import Card from '../ui/Card';
-import Line from '../ui/Line';
+import { withNamespaces, Trans } from 'react-i18next';
 
+import StatsCard from './StatsCard';
 import { getPercent, normalizeHistory } from '../../helpers/helpers';
-import { STATUS_COLORS } from '../../helpers/constants';
 
-class Statistics extends Component {
-    getNormalizedHistory = (data, interval, id) => [{ data: normalizeHistory(data, interval), id }];
+const getNormalizedHistory = (data, interval, id) => [
+    { data: normalizeHistory(data, interval), id },
+];
 
-    render() {
-        const {
-            interval,
-            dnsQueries,
-            blockedFiltering,
-            replacedSafebrowsing,
-            replacedParental,
-            numDnsQueries,
-            numBlockedFiltering,
-            numReplacedSafebrowsing,
-            numReplacedParental,
-        } = this.props;
-
-        return (
-            <div className="row">
-                <div className="col-sm-6 col-lg-3">
-                    <Card type="card--full" bodyType="card-wrap">
-                        <div className="card-body-stats">
-                            <div className="card-value card-value-stats text-blue">
-                                {numDnsQueries}
-                            </div>
-                            <div className="card-title-stats">
-                                <Trans>dns_query</Trans>
-                            </div>
-                        </div>
-                        <div className="card-chart-bg">
-                            <Line
-                                data={this.getNormalizedHistory(dnsQueries, interval, 'dnsQueries')}
-                                color={STATUS_COLORS.blue}
-                            />
-                        </div>
-                    </Card>
-                </div>
-                <div className="col-sm-6 col-lg-3">
-                    <Card type="card--full" bodyType="card-wrap">
-                        <div className="card-body-stats">
-                            <div className="card-value card-value-stats text-red">
-                                {numBlockedFiltering}
-                            </div>
-                            <div className="card-value card-value-percent text-red">
-                                {getPercent(numDnsQueries, numBlockedFiltering)}
-                            </div>
-                            <div className="card-title-stats">
-                                <a href="#filters">
-                                    <Trans>blocked_by</Trans>
-                                </a>
-                            </div>
-                        </div>
-                        <div className="card-chart-bg">
-                            <Line
-                                data={this.getNormalizedHistory(
-                                    blockedFiltering,
-                                    interval,
-                                    'blockedFiltering',
-                                )}
-                                color={STATUS_COLORS.red}
-                            />
-                        </div>
-                    </Card>
-                </div>
-                <div className="col-sm-6 col-lg-3">
-                    <Card type="card--full" bodyType="card-wrap">
-                        <div className="card-body-stats">
-                            <div className="card-value card-value-stats text-green">
-                                {numReplacedSafebrowsing}
-                            </div>
-                            <div className="card-value card-value-percent text-green">
-                                {getPercent(numDnsQueries, numReplacedSafebrowsing)}
-                            </div>
-                            <div className="card-title-stats">
-                                <Trans>stats_malware_phishing</Trans>
-                            </div>
-                        </div>
-                        <div className="card-chart-bg">
-                            <Line
-                                data={this.getNormalizedHistory(
-                                    replacedSafebrowsing,
-                                    interval,
-                                    'replacedSafebrowsing',
-                                )}
-                                color={STATUS_COLORS.green}
-                            />
-                        </div>
-                    </Card>
-                </div>
-                <div className="col-sm-6 col-lg-3">
-                    <Card type="card--full" bodyType="card-wrap">
-                        <div className="card-body-stats">
-                            <div className="card-value card-value-stats text-yellow">
-                                {numReplacedParental}
-                            </div>
-                            <div className="card-value card-value-percent text-yellow">
-                                {getPercent(numDnsQueries, numReplacedParental)}
-                            </div>
-                            <div className="card-title-stats">
-                                <Trans>stats_adult</Trans>
-                            </div>
-                        </div>
-                        <div className="card-chart-bg">
-                            <Line
-                                data={this.getNormalizedHistory(
-                                    replacedParental,
-                                    interval,
-                                    'replacedParental',
-                                )}
-                                color={STATUS_COLORS.yellow}
-                            />
-                        </div>
-                    </Card>
-                </div>
-            </div>
-        );
-    }
-}
+const Statistics = ({
+    interval,
+    dnsQueries,
+    blockedFiltering,
+    replacedSafebrowsing,
+    replacedParental,
+    numDnsQueries,
+    numBlockedFiltering,
+    numReplacedSafebrowsing,
+    numReplacedParental,
+}) => (
+    <div className="row">
+        <div className="col-sm-6 col-lg-3">
+            <StatsCard
+                total={numDnsQueries}
+                lineData={getNormalizedHistory(dnsQueries, interval, 'dnsQuery')}
+                title={<Trans>dns_query</Trans>}
+                color="blue"
+            />
+        </div>
+        <div className="col-sm-6 col-lg-3">
+            <StatsCard
+                total={numBlockedFiltering}
+                lineData={getNormalizedHistory(blockedFiltering, interval, 'blockedFiltering')}
+                percent={getPercent(numDnsQueries, numBlockedFiltering)}
+                title={<Trans components={[<a href="#filters" key="0">link</a>]}>blocked_by</Trans>}
+                color="red"
+            />
+        </div>
+        <div className="col-sm-6 col-lg-3">
+            <StatsCard
+                total={numReplacedSafebrowsing}
+                lineData={getNormalizedHistory(
+                    replacedSafebrowsing,
+                    interval,
+                    'replacedSafebrowsing',
+                )}
+                percent={getPercent(numDnsQueries, numReplacedSafebrowsing)}
+                title={<Trans>stats_malware_phishing</Trans>}
+                color="green"
+            />
+        </div>
+        <div className="col-sm-6 col-lg-3">
+            <StatsCard
+                total={numReplacedParental}
+                lineData={getNormalizedHistory(replacedParental, interval, 'replacedParental')}
+                percent={getPercent(numDnsQueries, numReplacedParental)}
+                title={<Trans>stats_adult</Trans>}
+                color="yellow"
+            />
+        </div>
+    </div>
+);
 
 Statistics.propTypes = {
     interval: PropTypes.number.isRequired,

client/src/components/Dashboard/StatsCard.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { STATUS_COLORS } from '../../helpers/constants';
+import Card from '../ui/Card';
+import Line from '../ui/Line';
+
+const StatsCard = ({
+    total, lineData, percent, title, color,
+}) => (
+    <Card type="card--full" bodyType="card-wrap">
+        <div className="card-body-stats">
+            <div className={`card-value card-value-stats text-${color}`}>{total}</div>
+            <div className="card-title-stats">{title}</div>
+        </div>
+        {percent >= 0 && (<div className={`card-value card-value-percent text-${color}`}>{percent}</div>)}
+        <div className="card-chart-bg">
+            <Line data={lineData} color={STATUS_COLORS[color]} />
+        </div>
+    </Card>
+);
+
+StatsCard.propTypes = {
+    total: PropTypes.number.isRequired,
+    lineData: PropTypes.array.isRequired,
+    title: PropTypes.object.isRequired,
+    color: PropTypes.string.isRequired,
+    percent: PropTypes.number,
+};
+
+export default StatsCard;

client/src/components/Dashboard/index.js

@@ -51,7 +51,7 @@ class Dashboard extends Component {
         const subtitle =
             stats.interval === 1
                 ? t('for_last_24_hours')
-                : t('for_last_days', { value: stats.interval });
+                : t('for_last_days', { count: stats.interval });
 
         const refreshFullButton = (
             <button

client/src/components/Settings/Clients/AutoClients.js

@@ -3,29 +3,9 @@ import PropTypes from 'prop-types';
 import { withNamespaces } from 'react-i18next';
 import ReactTable from 'react-table';
 
-import { CLIENT_ID } from '../../../helpers/constants';
 import Card from '../../ui/Card';
 
 class AutoClients extends Component {
-    getClient = (name, clients) => {
-        const client = clients.find(item => name === item.name);
-
-        if (client) {
-            const identifier = client.mac ? CLIENT_ID.MAC : CLIENT_ID.IP;
-
-            return {
-                identifier,
-                use_global_settings: true,
-                ...client,
-            };
-        }
-
-        return {
-            identifier: 'ip',
-            use_global_settings: true,
-        };
-    };
-
     getStats = (ip, stats) => {
         if (stats) {
             const statsForCurrentIP = stats.find(item => item.name === ip);

client/src/components/Settings/StatsConfig/Form.js

@@ -5,13 +5,13 @@ import { Trans, withNamespaces } from 'react-i18next';
 import flow from 'lodash/flow';
 
 import { renderRadioField, toNumber } from '../../../helpers/form';
-import { STATS_INTERVALS } from '../../../helpers/constants';
+import { STATS_INTERVALS_DAYS } from '../../../helpers/constants';
 
 const getIntervalFields = (processing, t, handleChange, toNumber) =>
-    STATS_INTERVALS.map((interval) => {
+    STATS_INTERVALS_DAYS.map((interval) => {
         const title = interval === 1
             ? t('interval_24_hour')
-            : t('interval_days', { value: interval });
+            : t('interval_days', { count: interval });
 
         return (
             <Field

client/src/components/ui/Cell.js

@@ -5,9 +5,7 @@ const Cell = props => (
     <div className="stats__row">
         <div className="stats__row-value mb-1">
             <strong>{props.value}</strong>
-            <small className="ml-3 text-muted">
-                {props.percent}%
-            </small>
+            <small className="ml-3 text-muted">{props.percent}%</small>
         </div>
         <div className="progress progress-xs">
             <div