Pull request 1928: 1453-stats-tests

Updates #1453. Squashed commit of the following: commit f08f68ef5493dad03d3eb120d886f2df1af28be6 Merge: b70b088af 54aee2272 Author: Stanislav Chzhen <s.chzhen@adguard.com> Date: Tue Aug 8 19:04:06 2023 +0300 Merge branch 'master' into 1453-stats-tests commit b70b088af0fdc7d6d048d688160048bad1fceb12 Author: Stanislav Chzhen <s.chzhen@adguard.com> Date: Thu Aug 3 19:32:04 2023 +0300 stats: imp code commit c341012ba61894c255c1868624be1cac0d26a6fa Merge: a2ac8c34e 5eb3cd0f9 Author: Stanislav Chzhen <s.chzhen@adguard.com> Date: Thu Aug 3 13:36:24 2023 +0300 Merge branch 'master' into 1453-stats-tests commit a2ac8c34ee32606ca5e259c3e2a47db0dd5858de Author: Ildar Kamalov <ik@adguard.com> Date: Thu Aug 3 13:25:12 2023 +0300 client: add top upstreams and average processing time tables commit 11118947f9bf945be0b056f8475cf3b848c6e66e Author: Stanislav Chzhen <s.chzhen@adguard.com> Date: Tue Aug 1 17:24:57 2023 +0300 stats: imp docs commit 904cf81d02a1f327b9647fa7ad9e181cfabb68a4 Author: Stanislav Chzhen <s.chzhen@adguard.com> Date: Mon Jul 31 17:34:06 2023 +0300 stats: imp code commit 34f0c96dd5865d1470385322a88842dd0b3d996d Author: Stanislav Chzhen <s.chzhen@adguard.com> Date: Mon Jul 31 15:43:46 2023 +0300 all: imp docs commit 2cb2d0d8bef3580f64bc25c414fe9b5ea6b9f997 Author: Stanislav Chzhen <s.chzhen@adguard.com> Date: Fri Jul 28 17:24:31 2023 +0300 all: imp code commit 5251a899fecc21e50a0ba06042f96f5b404e196a Merge: b6c2b12d4 300821a7f Author: Stanislav Chzhen <s.chzhen@adguard.com> Date: Thu Jul 27 20:34:39 2023 +0300 Merge branch 'master' into 1453-stats-tests commit b6c2b12d4425012efd73549c3a426735f3a677cd Author: Stanislav Chzhen <s.chzhen@adguard.com> Date: Thu Jul 27 20:32:18 2023 +0300 stats: imp code commit 5546b82a78326f9cc6d8c87df5083f8fc66a0178 Merge: 8a3d6b1b4 5f8fa006c Author: Stanislav Chzhen <s.chzhen@adguard.com> Date: Thu Jul 27 14:24:01 2023 +0300 Merge branch 'master' into 1453-stats-tests commit 8a3d6b1b49ce189f95adfa7406a34108e885e676 Author: Stanislav Chzhen <s.chzhen@adguard.com> Date: Thu Jul 27 14:17:47 2023 +0300 all: imp code commit 2a48001e275e3cdcf70e13e1c9cebd4e502f3259 Author: Stanislav Chzhen <s.chzhen@adguard.com> Date: Tue Jul 25 18:27:20 2023 +0300 all: imp docs commit 3dd21890175af32a3368378f7e013383f6d040ec Author: Stanislav Chzhen <s.chzhen@adguard.com> Date: Tue Jul 25 16:00:39 2023 +0300 all: imp naming commit 6124456fc3149b71f6bd58d35ecf24eb6cf40d5d Author: Stanislav Chzhen <s.chzhen@adguard.com> Date: Thu Jul 20 16:15:56 2023 +0300 all: add upstreams avg processing time commit 187ad0c77a81c9fd95c24e23141355db2e83e50d Author: Stanislav Chzhen <s.chzhen@adguard.com> Date: Tue Jul 18 16:42:19 2023 +0300 all: add top upstreams
2023-08-09 14:33:52 +03:00
parent 54aee22720
commit c47509fabc
19 changed files with 686 additions and 140 deletions
--- a/client/src/components/Dashboard/UpstreamAvgTime.js
+++ b/client/src/components/Dashboard/UpstreamAvgTime.js
@@ -0,0 +1,79 @@
+import React from 'react';
+import ReactTable from 'react-table';
+import PropTypes from 'prop-types';
+import round from 'lodash/round';
+import { withTranslation, Trans } from 'react-i18next';
+
+import Card from '../ui/Card';
+import DomainCell from './DomainCell';
+
+const TimeCell = ({ value }) => {
+    if (!value) {
+        return '–';
+    }
+
+    const valueInMilliseconds = round(value * 1000);
+
+    return (
+        <div className="logs__row o-hidden">
+            <span className="logs__text logs__text--full" title={valueInMilliseconds}>
+                {valueInMilliseconds}&nbsp;ms
+            </span>
+        </div>
+    );
+};
+
+TimeCell.propTypes = {
+    value: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.number,
+    ]),
+};
+
+const UpstreamAvgTime = ({
+    t,
+    refreshButton,
+    topUpstreamsAvgTime,
+    subtitle,
+}) => (
+    <Card
+        title={t('average_processing_time')}
+        subtitle={subtitle}
+        bodyType="card-table"
+        refresh={refreshButton}
+    >
+        <ReactTable
+            data={topUpstreamsAvgTime.map(({ name: domain, count }) => ({
+                domain,
+                count,
+            }))}
+            columns={[
+                {
+                    Header: <Trans>upstream</Trans>,
+                    accessor: 'domain',
+                    Cell: DomainCell,
+                },
+                {
+                    Header: <Trans>processing_time</Trans>,
+                    accessor: 'count',
+                    maxWidth: 190,
+                    Cell: TimeCell,
+                },
+            ]}
+            showPagination={false}
+            noDataText={t('no_upstreams_data_found')}
+            minRows={6}
+            defaultPageSize={100}
+            className="-highlight card-table-overflow--limited stats__table"
+        />
+    </Card>
+);
+
+UpstreamAvgTime.propTypes = {
+    topUpstreamsAvgTime: PropTypes.array.isRequired,
+    refreshButton: PropTypes.node.isRequired,
+    subtitle: PropTypes.string.isRequired,
+    t: PropTypes.func.isRequired,
+};
+
+export default withTranslation()(UpstreamAvgTime);
--- a/client/src/components/Dashboard/UpstreamResponses.js
+++ b/client/src/components/Dashboard/UpstreamResponses.js
@@ -0,0 +1,76 @@
+import React from 'react';
+import ReactTable from 'react-table';
+import PropTypes from 'prop-types';
+import { withTranslation, Trans } from 'react-i18next';
+
+import Card from '../ui/Card';
+import Cell from '../ui/Cell';
+import DomainCell from './DomainCell';
+
+import { getPercent } from '../../helpers/helpers';
+import { STATUS_COLORS } from '../../helpers/constants';
+
+const CountCell = (totalBlocked) => (
+    function cell(row) {
+        const { value } = row;
+        const percent = getPercent(totalBlocked, value);
+
+        return (
+            <Cell
+                value={value}
+                percent={percent}
+                color={STATUS_COLORS.green}
+            />
+        );
+    }
+);
+
+const UpstreamResponses = ({
+    t,
+    refreshButton,
+    topUpstreamsResponses,
+    dnsQueries,
+    subtitle,
+}) => (
+    <Card
+        title={t('top_upstreams')}
+        subtitle={subtitle}
+        bodyType="card-table"
+        refresh={refreshButton}
+    >
+        <ReactTable
+            data={topUpstreamsResponses.map(({ name: domain, count }) => ({
+                domain,
+                count,
+            }))}
+            columns={[
+                {
+                    Header: <Trans>upstream</Trans>,
+                    accessor: 'domain',
+                    Cell: DomainCell,
+                },
+                {
+                    Header: <Trans>requests_count</Trans>,
+                    accessor: 'count',
+                    maxWidth: 190,
+                    Cell: CountCell(dnsQueries),
+                },
+            ]}
+            showPagination={false}
+            noDataText={t('no_upstreams_data_found')}
+            minRows={6}
+            defaultPageSize={100}
+            className="-highlight card-table-overflow--limited stats__table"
+        />
+    </Card>
+);
+
+UpstreamResponses.propTypes = {
+    topUpstreamsResponses: PropTypes.array.isRequired,
+    dnsQueries: PropTypes.number.isRequired,
+    refreshButton: PropTypes.node.isRequired,
+    subtitle: PropTypes.string.isRequired,
+    t: PropTypes.func.isRequired,
+};
+
+export default withTranslation()(UpstreamResponses);
--- a/client/src/components/Dashboard/index.js
+++ b/client/src/components/Dashboard/index.js
@@ -21,6 +21,8 @@ import PageTitle from '../ui/PageTitle';
 import Loading from '../ui/Loading';
 import './Dashboard.css';
 import Dropdown from '../ui/Dropdown';
+import UpstreamResponses from './UpstreamResponses';
+import UpstreamAvgTime from './UpstreamAvgTime';

 const Dashboard = ({
    getAccessList,
@@ -136,12 +138,12 @@ const Dashboard = ({
        <PageTitle title={t('dashboard')} containerClass="page-title--dashboard">
            <div className="page-title__protection">
                <button
-                        type="button"
-                        className={buttonClass}
-                        onClick={() => {
-                            toggleProtection(protectionEnabled);
-                        }}
-                        disabled={processingProtection}
+                    type="button"
+                    className={buttonClass}
+                    onClick={() => {
+                        toggleProtection(protectionEnabled);
+                    }}
+                    disabled={processingProtection}
                >
                    {protectionDisabledDuration
                        ? `${t('enable_protection_timer')} ${getRemaningTimeText(protectionDisabledDuration)}`
@@ -160,9 +162,9 @@ const Dashboard = ({
                </Dropdown>}
            </div>
            <button
-                    type="button"
-                    className="btn btn-outline-primary btn-sm"
-                    onClick={getAllStats}
+                type="button"
+                className="btn btn-outline-primary btn-sm"
+                onClick={getAllStats}
            >
                <Trans>refresh_statics</Trans>
            </button>
@@ -185,53 +187,68 @@ const Dashboard = ({
                    </div>
                )}
                <Statistics
-                        interval={msToDays(stats.interval)}
-                        dnsQueries={stats.dnsQueries}
-                        blockedFiltering={stats.blockedFiltering}
-                        replacedSafebrowsing={stats.replacedSafebrowsing}
-                        replacedParental={stats.replacedParental}
-                        numDnsQueries={stats.numDnsQueries}
-                        numBlockedFiltering={stats.numBlockedFiltering}
-                        numReplacedSafebrowsing={stats.numReplacedSafebrowsing}
-                        numReplacedParental={stats.numReplacedParental}
-                        refreshButton={refreshButton}
+                    interval={msToDays(stats.interval)}
+                    dnsQueries={stats.dnsQueries}
+                    blockedFiltering={stats.blockedFiltering}
+                    replacedSafebrowsing={stats.replacedSafebrowsing}
+                    replacedParental={stats.replacedParental}
+                    numDnsQueries={stats.numDnsQueries}
+                    numBlockedFiltering={stats.numBlockedFiltering}
+                    numReplacedSafebrowsing={stats.numReplacedSafebrowsing}
+                    numReplacedParental={stats.numReplacedParental}
+                    refreshButton={refreshButton}
                />
            </div>
            <div className="col-lg-6">
                <Counters
-                        subtitle={subtitle}
-                        refreshButton={refreshButton}
+                    subtitle={subtitle}
+                    refreshButton={refreshButton}
                />
            </div>
            <div className="col-lg-6">
                <Clients
-                        subtitle={subtitle}
-                        dnsQueries={stats.numDnsQueries}
-                        topClients={stats.topClients}
-                        clients={dashboard.clients}
-                        autoClients={dashboard.autoClients}
-                        refreshButton={refreshButton}
-                        processingAccessSet={access.processingSet}
-                        disallowedClients={access.disallowed_clients}
+                    subtitle={subtitle}
+                    dnsQueries={stats.numDnsQueries}
+                    topClients={stats.topClients}
+                    clients={dashboard.clients}
+                    autoClients={dashboard.autoClients}
+                    refreshButton={refreshButton}
+                    processingAccessSet={access.processingSet}
+                    disallowedClients={access.disallowed_clients}
                />
            </div>
            <div className="col-lg-6">
                <QueriedDomains
-                        subtitle={subtitle}
-                        dnsQueries={stats.numDnsQueries}
-                        topQueriedDomains={stats.topQueriedDomains}
-                        refreshButton={refreshButton}
+                    subtitle={subtitle}
+                    dnsQueries={stats.numDnsQueries}
+                    topQueriedDomains={stats.topQueriedDomains}
+                    refreshButton={refreshButton}
                />
            </div>
            <div className="col-lg-6">
                <BlockedDomains
-                        subtitle={subtitle}
-                        topBlockedDomains={stats.topBlockedDomains}
-                        blockedFiltering={stats.numBlockedFiltering}
-                        replacedSafebrowsing={stats.numReplacedSafebrowsing}
-                        replacedSafesearch={stats.numReplacedSafesearch}
-                        replacedParental={stats.numReplacedParental}
-                        refreshButton={refreshButton}
+                    subtitle={subtitle}
+                    topBlockedDomains={stats.topBlockedDomains}
+                    blockedFiltering={stats.numBlockedFiltering}
+                    replacedSafebrowsing={stats.numReplacedSafebrowsing}
+                    replacedSafesearch={stats.numReplacedSafesearch}
+                    replacedParental={stats.numReplacedParental}
+                    refreshButton={refreshButton}
+                />
+            </div>
+            <div className="col-lg-6">
+                <UpstreamResponses
+                    subtitle={subtitle}
+                    dnsQueries={stats.numDnsQueries}
+                    topUpstreamsResponses={stats.topUpstreamsResponses}
+                    refreshButton={refreshButton}
+                />
+            </div>
+            <div className="col-lg-6">
+                <UpstreamAvgTime
+                    subtitle={subtitle}
+                    topUpstreamsAvgTime={stats.topUpstreamsAvgTime}
+                    refreshButton={refreshButton}
                />
            </div>
        </div>}
--- a/client/src/components/ui/Cell.js
+++ b/client/src/components/ui/Cell.js
@@ -1,25 +1,39 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+
 import LogsSearchLink from './LogsSearchLink';
 import { formatNumber } from '../../helpers/helpers';

 const Cell = ({
-    value, percent, color, search,
-}) => <div className="stats__row">
-    <div className="stats__row-value mb-1">
-        <strong><LogsSearchLink search={search}>{formatNumber(value)}</LogsSearchLink></strong>
-        <small className="ml-3 text-muted">{percent}%</small>
+    value,
+    percent,
+    color,
+    search,
+}) => (
+    <div className="stats__row">
+        <div className="stats__row-value mb-1">
+            <strong>
+                {search ? (
+                    <LogsSearchLink search={search}>
+                        {formatNumber(value)}
+                    </LogsSearchLink>
+                ) : (
+                    formatNumber(value)
+                )}
+            </strong>
+            <small className="ml-3 text-muted">{percent}%</small>
+        </div>
+        <div className="progress progress-xs">
+            <div
+                className="progress-bar"
+                style={{
+                    width: `${percent}%`,
+                    backgroundColor: color,
+                }}
+            />
+        </div>
    </div>
-    <div className="progress progress-xs">
-        <div
-            className="progress-bar"
-            style={{
-                width: `${percent}%`,
-                backgroundColor: color,
-            }}
-        />
-    </div>
-</div>;
+);

 Cell.propTypes = {
    value: PropTypes.number.isRequired,