+ client: functional components for dashboard

client/src/__locales/en.json

@@ -66,19 +66,21 @@
     "disabled_protection": "Disabled protection",
     "refresh_statics": "Refresh statistics",
     "dns_query": "DNS Queries",
-    "blocked_by": "Blocked by Filters",
+    "blocked_by": "<0>Blocked by Filters</0>",
     "stats_malware_phishing": "Blocked malware/phishing",
     "stats_adult": "Blocked adult websites",
     "stats_query_domain": "Top queried domains",
     "for_last_24_hours": "for the last 24 hours",
-    "for_last_days": "for the last {{value}} days",
+    "for_last_days": "for the last {{count}} day",
+    "for_last_days_plural": "for the last {{count}} days",
     "no_domains_found": "No domains found",
     "requests_count": "Requests count",
     "top_blocked_domains": "Top blocked domains",
     "top_clients": "Top clients",
     "no_clients_found": "No clients found",
     "general_statistics": "General statistics",
-    "number_of_dns_query_days": "A number of DNS queries processed for the last {{value}} days",
+    "number_of_dns_query_days": "A number of DNS queries processed for the last {{count}} day",
+    "number_of_dns_query_days_plural": "A number of DNS queries processed for the last {{count}} days",
     "number_of_dns_query_24_hours": "A number of DNS queries processed for the last 24 hours",
     "number_of_dns_query_blocked_24_hours": "A number of DNS requests blocked by adblock filters and hosts blocklists",
     "number_of_dns_query_blocked_24_hours_by_sec": "A number of DNS requests blocked by the AdGuard browsing security module",
@@ -365,7 +367,8 @@
     "stats_params": "Statistics configuration",
     "config_successfully_saved": "Configuration successfully saved",
     "interval_24_hour": "24 hours",
-    "interval_days": "{{value}} days",
+    "interval_days": "{{count}} day",
+    "interval_days_plural": "{{count}} days",
     "time_period": "Time period",
     "domain": "Domain",
     "answer": "Answer",

client/src/api/Api.js

@@ -22,7 +22,6 @@ export default class Api {
     }
 
     // Global methods
-    GLOBAL_RESTART = { path: 'restart', method: 'POST' };
     GLOBAL_START = { path: 'start', method: 'POST' };
     GLOBAL_STATUS = { path: 'status', method: 'GET' };
     GLOBAL_STOP = { path: 'stop', method: 'POST' };
@@ -36,11 +35,6 @@ export default class Api {
     GLOBAL_DISABLE_PROTECTION = { path: 'disable_protection', method: 'POST' };
     GLOBAL_UPDATE = { path: 'update', method: 'POST' };
 
-    restartGlobalFiltering() {
-        const { path, method } = this.GLOBAL_RESTART;
-        return this.makeRequest(path, method);
-    }
-
     startGlobalFiltering() {
         const { path, method } = this.GLOBAL_START;
         return this.makeRequest(path, method);

client/src/components/Dashboard/BlockedDomains.js

@@ -1,53 +1,33 @@
-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 {
+const CountCell = totalBlocked =>
-    columns = [
+    function cell(row) {
-        {
-            Header: <Trans>domain</Trans>,
-            accessor: 'domain',
-            Cell: (row) => {
         const { value } = row;
-                const trackerData = getTrackerData(value);
+        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} />;
-            },
+    };
-        },
-    ];
 
-    render() {
+const BlockedDomains = ({
-        const {
+    t,
-            t, refreshButton, topBlockedDomains, subtitle,
+    refreshButton,
-        } = this.props;
+    topBlockedDomains,
+    subtitle,
+    blockedFiltering,
+    replacedSafebrowsing,
+    replacedParental,
+}) => {
+    const totalBlocked = blockedFiltering + replacedSafebrowsing + replacedParental;
 
     return (
         <Card
@@ -57,11 +37,23 @@ class BlockedDomains extends Component {
             refresh={refreshButton}
         >
             <ReactTable
-                    data={topBlockedDomains.map(item => ({
+                data={topBlockedDomains.map(({ name: domain, count }) => ({
-                        domain: item.name,
+                    domain,
-                        count: item.count,
+                    count,
                 }))}
-                    columns={this.columns}
+                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}
@@ -69,8 +61,7 @@ class BlockedDomains extends Component {
             />
         </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,8 +9,7 @@ import Cell from '../ui/Cell';
 import { getPercent, getClientName } from '../../helpers/helpers';
 import { STATUS_COLORS } from '../../helpers/constants';
 
-class Clients extends Component {
+const getClientsPercentColor = (percent) => {
-    getPercentColor = (percent) => {
     if (percent > 50) {
         return STATUS_COLORS.green;
     } else if (percent > 10) {
@@ -19,15 +18,11 @@ class Clients extends Component {
     return STATUS_COLORS.red;
 };
 
-    columns = [
+const ipCell = (clients, autoClients) =>
-        {
+    function cell(row) {
-            Header: 'IP',
-            accessor: 'ip',
-            Cell: ({ value }) => {
-                const clientName =
-                    getClientName(this.props.clients, value) ||
-                    getClientName(this.props.autoClients, value);
         let client;
+        const { value } = row;
+        const clientName = getClientName(clients, value) || getClientName(autoClients, value);
 
         if (clientName) {
             client = (
@@ -46,28 +41,20 @@ class Clients extends Component {
                 </span>
             </div>
         );
-            },
+    };
-            sortMethod: (a, b) =>
+
-                parseInt(a.replace(/\./g, ''), 10) - parseInt(b.replace(/\./g, ''), 10),
+const countCell = dnsQueries =>
-        },
+    function cell(row) {
-        {
+        const { value } = row;
-            Header: <Trans>requests_count</Trans>,
+        const percent = getPercent(dnsQueries, value);
-            accessor: 'count',
+        const percentColor = getClientsPercentColor(percent);
-            Cell: ({ value }) => {
-                const percent = getPercent(this.props.dnsQueries, value);
-                const percentColor = this.getPercentColor(percent);
 
         return <Cell value={value} percent={percent} color={percentColor} />;
-            },
+    };
-        },
-    ];
 
-    render() {
+const Clients = ({
-        const {
+    t, refreshButton, topClients, subtitle, clients, autoClients, dnsQueries,
-            t, refreshButton, topClients, subtitle,
+}) => (
-        } = this.props;
-
-        return (
     <Card
         title={t('top_clients')}
         subtitle={subtitle}
@@ -75,11 +62,24 @@ class Clients extends Component {
         refresh={refreshButton}
     >
         <ReactTable
-                    data={topClients.map(item => ({
+            data={topClients.map(({ name: ip, count }) => ({
-                        ip: item.name,
+                ip,
-                        count: item.count,
+                count,
             }))}
-                    columns={this.columns}
+            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}
@@ -87,8 +87,6 @@ class Clients extends Component {
         />
     </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 components={[<a href="#filters" key="0">link</a>]}>
-                                <Trans>blocked_by</Trans>
+                                blocked_by
-                            </a>
+                            </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,18 +1,16 @@
-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 {
+const getQueriedPercentColor = (percent) => {
-    getPercentColor = (percent) => {
     if (percent > 10) {
         return STATUS_COLORS.red;
     } else if (percent > 5) {
@@ -21,42 +19,18 @@ class QueriedDomains extends Component {
     return STATUS_COLORS.green;
 };
 
-    columns = [
+const countCell = dnsQueries =>
-        {
+    function cell(row) {
-            Header: <Trans>domain</Trans>,
-            accessor: 'domain',
-            Cell: (row) => {
         const { value } = row;
-                const trackerData = getTrackerData(value);
+        const percent = getPercent(dnsQueries, value);
-
+        const percentColor = getQueriedPercentColor(percent);
-                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 QueriedDomains = ({
-        const {
+    t, refreshButton, topQueriedDomains, subtitle, dnsQueries,
-            t, refreshButton, topQueriedDomains, subtitle,
+}) => (
-        } = this.props;
-        return (
     <Card
         title={t('stats_query_domain')}
         subtitle={subtitle}
@@ -64,11 +38,23 @@ class QueriedDomains extends Component {
         refresh={refreshButton}
     >
         <ReactTable
-                    data={topQueriedDomains.map(item => ({
+            data={topQueriedDomains.map(({ name: domain, count }) => ({
-                        domain: item.name,
+                domain,
-                        count: item.count,
+                count,
             }))}
-                    columns={this.columns}
+            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}
@@ -76,8 +62,6 @@ class QueriedDomains extends Component {
         />
     </Card>
 );
-    }
-}
 
 QueriedDomains.propTypes = {
     topQueriedDomains: PropTypes.array.isRequired,

client/src/components/Dashboard/Statistics.js

@@ -1,18 +1,15 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { Trans, withNamespaces } from 'react-i18next';
+import { withNamespaces, Trans } from 'react-i18next';
-
-import Card from '../ui/Card';
-import Line from '../ui/Line';
 
+import StatsCard from './StatsCard';
 import { getPercent, normalizeHistory } from '../../helpers/helpers';
-import { STATUS_COLORS } from '../../helpers/constants';
 
-class Statistics extends Component {
+const getNormalizedHistory = (data, interval, id) => [
-    getNormalizedHistory = (data, interval, id) => [{ data: normalizeHistory(data, interval), id }];
+    { data: normalizeHistory(data, interval), id },
+];
 
-    render() {
+const Statistics = ({
-        const {
     interval,
     dnsQueries,
     blockedFiltering,
@@ -22,109 +19,49 @@ class Statistics extends Component {
     numBlockedFiltering,
     numReplacedSafebrowsing,
     numReplacedParental,
-        } = this.props;
+}) => (
-
-        return (
     <div className="row">
         <div className="col-sm-6 col-lg-3">
-                    <Card type="card--full" bodyType="card-wrap">
+            <StatsCard
-                        <div className="card-body-stats">
+                total={numDnsQueries}
-                            <div className="card-value card-value-stats text-blue">
+                lineData={getNormalizedHistory(dnsQueries, interval, 'dnsQuery')}
-                                {numDnsQueries}
+                title={<Trans>dns_query</Trans>}
-                            </div>
+                color="blue"
-                            <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">
+            <StatsCard
-                        <div className="card-body-stats">
+                total={numBlockedFiltering}
-                            <div className="card-value card-value-stats text-red">
+                lineData={getNormalizedHistory(blockedFiltering, interval, 'blockedFiltering')}
-                                {numBlockedFiltering}
+                percent={getPercent(numDnsQueries, numBlockedFiltering)}
-                            </div>
+                title={<Trans components={[<a href="#filters" key="0">link</a>]}>blocked_by</Trans>}
-                            <div className="card-value card-value-percent text-red">
+                color="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">
+            <StatsCard
-                        <div className="card-body-stats">
+                total={numReplacedSafebrowsing}
-                            <div className="card-value card-value-stats text-green">
+                lineData={getNormalizedHistory(
-                                {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}
+                percent={getPercent(numDnsQueries, numReplacedSafebrowsing)}
+                title={<Trans>stats_malware_phishing</Trans>}
+                color="green"
             />
         </div>
-                    </Card>
-                </div>
         <div className="col-sm-6 col-lg-3">
-                    <Card type="card--full" bodyType="card-wrap">
+            <StatsCard
-                        <div className="card-body-stats">
+                total={numReplacedParental}
-                            <div className="card-value card-value-stats text-yellow">
+                lineData={getNormalizedHistory(replacedParental, interval, 'replacedParental')}
-                                {numReplacedParental}
+                percent={getPercent(numDnsQueries, numReplacedParental)}
-                            </div>
+                title={<Trans>stats_adult</Trans>}
-                            <div className="card-value card-value-percent text-yellow">
+                color="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>
 );
-    }
-}
 
 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">
+            <small className="ml-3 text-muted">{props.percent}%</small>
-                {props.percent}%
-            </small>
         </div>
         <div className="progress progress-xs">
             <div

client/src/helpers/constants.js

@@ -261,4 +261,4 @@ export const FILTERED_STATUS = {
     REWRITE: 'Rewrite',
 };
 
-export const STATS_INTERVALS = [1, 7, 30, 90];
+export const STATS_INTERVALS_DAYS = [1, 7, 30, 90];