+ client: functional components for dashboard

2019-08-27 16:43:58 +03:00 · 2019-08-27 16:43:58 +03:00 · 6bce41bb0a
parent 75df5e8292
commit 6bce41bb0a
14 changed files with 310 additions and 370 deletions
--- a/client/src/__locales/en.json
+++ b/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",
--- a/client/src/api/Api.js
+++ b/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);
--- a/client/src/components/Dashboard/BlockedDomains.js
+++ b/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 {
-    columns = [
-        {
-            Header: <Trans>domain</Trans>,
-            accessor: 'domain',
-            Cell: (row) => {
+const CountCell = totalBlocked =>
+    function 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 { blockedFiltering, replacedSafebrowsing, replacedParental } = this.props;
-                const blocked = blockedFiltering + replacedSafebrowsing + replacedParental;
-                const percent = getPercent(blocked, value);
+        const percent = getPercent(totalBlocked, value);

        return <Cell value={value} percent={percent} color={STATUS_COLORS.red} />;
-            },
-        },
-    ];
+    };

-    render() {
-        const {
-            t, refreshButton, topBlockedDomains, subtitle,
-        } = this.props;
+const BlockedDomains = ({
+    t,
+    refreshButton,
+    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 => ({
-                        domain: item.name,
-                        count: item.count,
+                data={topBlockedDomains.map(({ name: domain, count }) => ({
+                    domain,
+                    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,
--- a/client/src/components/Dashboard/Clients.js
+++ b/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,25 +9,20 @@ import Cell from '../ui/Cell';
 import { getPercent, getClientName } from '../../helpers/helpers';
 import { STATUS_COLORS } from '../../helpers/constants';

-class Clients extends Component {
-    getPercentColor = (percent) => {
+const getClientsPercentColor = (percent) => {
    if (percent > 50) {
        return STATUS_COLORS.green;
    } else if (percent > 10) {
        return STATUS_COLORS.yellow;
    }
    return STATUS_COLORS.red;
-    };
+};

-    columns = [
-        {
-            Header: 'IP',
-            accessor: 'ip',
-            Cell: ({ value }) => {
-                const clientName =
-                    getClientName(this.props.clients, value) ||
-                    getClientName(this.props.autoClients, value);
+const ipCell = (clients, autoClients) =>
+    function cell(row) {
        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),
-        },
-        {
-            Header: <Trans>requests_count</Trans>,
-            accessor: 'count',
-            Cell: ({ value }) => {
-                const percent = getPercent(this.props.dnsQueries, value);
-                const percentColor = this.getPercentColor(percent);
+    };
+
+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} />;
-            },
-        },
-    ];
+    };

-    render() {
-        const {
-            t, refreshButton, topClients, subtitle,
-        } = this.props;
-
-        return (
+const Clients = ({
+    t, refreshButton, topClients, subtitle, clients, autoClients, dnsQueries,
+}) => (
    <Card
        title={t('top_clients')}
        subtitle={subtitle}
@ -75,20 +62,31 @@ class Clients extends Component {
        refresh={refreshButton}
    >
        <ReactTable
-                    data={topClients.map(item => ({
-                        ip: item.name,
-                        count: item.count,
+            data={topClients.map(({ name: ip, count }) => ({
+                ip,
+                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}
            className="-striped -highlight card-table-overflow"
        />
    </Card>
-        );
-    }
-}
+);

 Clients.propTypes = {
    topClients: PropTypes.array.isRequired,
--- a/client/src/components/Dashboard/Counters.js
+++ b/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}
--- a/client/src/components/Dashboard/DomainCell.js
+++ b/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;
--- a/client/src/components/Dashboard/QueriedDomains.js
+++ b/client/src/components/Dashboard/QueriedDomains.js
@ -1,62 +1,36 @@
-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) => {
+const getQueriedPercentColor = (percent) => {
    if (percent > 10) {
        return STATUS_COLORS.red;
    } else if (percent > 5) {
        return STATUS_COLORS.yellow;
    }
    return STATUS_COLORS.green;
-    };
+};

-    columns = [
-        {
-            Header: <Trans>domain</Trans>,
-            accessor: 'domain',
-            Cell: (row) => {
+const countCell = dnsQueries =>
+    function 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);
+        const percent = getPercent(dnsQueries, value);
+        const percentColor = getQueriedPercentColor(percent);

        return <Cell value={value} percent={percent} color={percentColor} />;
-            },
-        },
-    ];
+    };

-    render() {
-        const {
-            t, refreshButton, topQueriedDomains, subtitle,
-        } = this.props;
-        return (
+const QueriedDomains = ({
+    t, refreshButton, topQueriedDomains, subtitle, dnsQueries,
+}) => (
    <Card
        title={t('stats_query_domain')}
        subtitle={subtitle}
@ -64,20 +38,30 @@ class QueriedDomains extends Component {
        refresh={refreshButton}
    >
        <ReactTable
-                    data={topQueriedDomains.map(item => ({
-                        domain: item.name,
-                        count: item.count,
+            data={topQueriedDomains.map(({ name: domain, count }) => ({
+                domain,
+                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}
            className="-striped -highlight card-table-overflow stats__table"
        />
    </Card>
-        );
-    }
-}
+);

 QueriedDomains.propTypes = {
    topQueriedDomains: PropTypes.array.isRequired,
--- a/client/src/components/Dashboard/Statistics.js
+++ b/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 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 {
+const Statistics = ({
    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">
-                        <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}
+            <StatsCard
+                total={numDnsQueries}
+                lineData={getNormalizedHistory(dnsQueries, interval, 'dnsQuery')}
+                title={<Trans>dns_query</Trans>}
+                color="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}
+            <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>
-                    </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(
+            <StatsCard
+                total={numReplacedSafebrowsing}
+                lineData={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">
-                        <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}
+            <StatsCard
+                total={numReplacedParental}
+                lineData={getNormalizedHistory(replacedParental, interval, 'replacedParental')}
+                percent={getPercent(numDnsQueries, numReplacedParental)}
+                title={<Trans>stats_adult</Trans>}
+                color="yellow"
            />
        </div>
-                    </Card>
    </div>
-            </div>
-        );
-    }
-}
+);

 Statistics.propTypes = {
    interval: PropTypes.number.isRequired,
--- a/client/src/components/Dashboard/StatsCard.js
+++ b/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;
--- a/client/src/components/Dashboard/index.js
+++ b/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
--- a/client/src/components/Settings/Clients/AutoClients.js
+++ b/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);
--- a/client/src/components/Settings/StatsConfig/Form.js
+++ b/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
--- a/client/src/components/ui/Cell.js
+++ b/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
--- a/client/src/helpers/constants.js
+++ b/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];