all: sync with master; upd chlog

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);

client/src/components/Dashboard/UpstreamResponses.js

@@ -0,0 +1,81 @@
+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 getTotalUpstreamRequests = (stats) => {
+    let total = 0;
+    stats.forEach(({ count }) => { total += count; });
+
+    return total;
+};
+
+const UpstreamResponses = ({
+    t,
+    refreshButton,
+    topUpstreamsResponses,
+    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(getTotalUpstreamRequests(topUpstreamsResponses)),
+                },
+            ]}
+            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,
+    refreshButton: PropTypes.node.isRequired,
+    subtitle: PropTypes.string.isRequired,
+    t: PropTypes.func.isRequired,
+};
+
+export default withTranslation()(UpstreamResponses);

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,67 @@ 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}
+                    topUpstreamsResponses={stats.topUpstreamsResponses}
+                    refreshButton={refreshButton}
+                />
+            </div>
+            <div className="col-lg-6">
+                <UpstreamAvgTime
+                    subtitle={subtitle}
+                    topUpstreamsAvgTime={stats.topUpstreamsAvgTime}
+                    refreshButton={refreshButton}
                 />
             </div>
         </div>}