Merge pull request #72 in DNS/adguard-dns from feature/360 to master

* commit '35368619b0d7ed0fb838d749cd7b2f63ae9c9aa3':
  Fix footer links
  Add progress bar to the stats tables
  Add new logo
  Replace the main Statistics graph with 4 blocks instead
  Clean static folder on build

client/.eslintrc

@@ -13,6 +13,13 @@
         "commonjs": true
     },
 
+    "settings": {
+        "react": {
+            "pragma": "React",
+            "version": "16.4"
+        }
+    },
+
     "rules": {
         "indent": ["error", 4, {
             "SwitchCase": 1,
@@ -43,6 +50,6 @@
         }],
         "no-console": ["warn", { "allow": ["warn", "error"] }],
         "import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
-        "import/prefer-default-export": "off",
+        "import/prefer-default-export": "off"
     }
 }

client/package-lock.json

@@ -181,18 +181,32 @@
         "glob-to-regexp": "^0.3.0"
       }
     },
+    "@nivo/axes": {
+      "version": "0.49.1",
+      "resolved": "https://registry.npmjs.org/@nivo/axes/-/axes-0.49.1.tgz",
+      "integrity": "sha512-2ZqpKtnZ9HE30H+r565VCrypKRQzAoMbAg1hsht88dlNQRtghBSxbAS0Y4IUW/wgN/AzvOIBJHvxH7bgaB8Oow==",
+      "requires": {
+        "@nivo/core": "0.49.0",
+        "d3-format": "^1.3.2",
+        "d3-time-format": "^2.1.3",
+        "lodash": "^4.17.4",
+        "react-motion": "^0.5.2",
+        "recompose": "^0.26.0"
+      }
+    },
     "@nivo/core": {
-      "version": "0.42.1",
+      "version": "0.49.0",
-      "resolved": "https://registry.npmjs.org/@nivo/core/-/core-0.42.1.tgz",
+      "resolved": "https://registry.npmjs.org/@nivo/core/-/core-0.49.0.tgz",
-      "integrity": "sha512-T3DgbV9x6snbHxNQ2vWZYJRCnI6iUqh9A6Kn1Fsy1L7Sn97fsf89e1qMp0CpILhyJu7Fj+VXRYtJwby0wH6GAA==",
+      "integrity": "sha512-TCPMUO2aJ7fI+ZB6t3d3EBQtNxJnTzaxLJsrVyn/3AQIjUwccAeo2aIy81wLBGWGtlGNUDNdAbnFzXiJosH0yg==",
       "requires": {
         "d3-color": "^1.0.3",
-        "d3-format": "^1.2.0",
+        "d3-format": "^1.3.2",
-        "d3-hierarchy": "^1.1.5",
+        "d3-hierarchy": "^1.1.8",
-        "d3-interpolate": "^1.1.5",
+        "d3-interpolate": "^1.3.2",
-        "d3-scale": "^1.0.6",
+        "d3-scale": "^2.1.2",
-        "d3-scale-chromatic": "^1.1.1",
+        "d3-scale-chromatic": "^1.3.3",
-        "d3-shape": "^1.2.0",
+        "d3-shape": "^1.2.2",
+        "d3-time-format": "^2.1.3",
         "lodash": "^4.17.4",
         "react-measure": "^2.0.2",
         "react-motion": "^0.5.2",
@@ -200,29 +214,41 @@
       }
     },
     "@nivo/legends": {
-      "version": "0.42.0",
+      "version": "0.49.0",
-      "resolved": "https://registry.npmjs.org/@nivo/legends/-/legends-0.42.0.tgz",
+      "resolved": "https://registry.npmjs.org/@nivo/legends/-/legends-0.49.0.tgz",
-      "integrity": "sha512-t82aKNaFtbY0mlE12caiSkXml73APMibH+gKsXECwhSutfGfgQzUbqBjPsNKJcMiWfG46noJ1MrFhDB3a6204g==",
+      "integrity": "sha512-8KbUFYozqwD+/rj4in0mnF9b9CuyNFjVgXqm2KW3ODVlWIgYgjTVlEhlg9VZIArFPlIyyAjEYC88YSRcALHugg==",
       "requires": {
         "lodash": "^4.17.4",
         "recompose": "^0.26.0"
       }
     },
     "@nivo/line": {
-      "version": "0.42.1",
+      "version": "0.49.1",
-      "resolved": "https://registry.npmjs.org/@nivo/line/-/line-0.42.1.tgz",
+      "resolved": "https://registry.npmjs.org/@nivo/line/-/line-0.49.1.tgz",
-      "integrity": "sha512-X/nvNvwMqz10hACBL/owCONDeG78occ6Er0ay6/1n2h+Dm6zn2p6hiFyvu7QtsdwGeHOC5sePcz9O44bycbtoQ==",
+      "integrity": "sha512-wKkOmpnwK2psmZbJReDq+Eh/WV9r1JA8V4Vl4eIRuf971CW0KUT9nCAoc/FcKio0qsiq5wyFt3J5LuAhfzlV/w==",
       "requires": {
-        "@nivo/core": "0.42.1",
+        "@nivo/axes": "0.49.1",
-        "@nivo/legends": "0.42.0",
+        "@nivo/core": "0.49.0",
-        "d3-format": "^1.2.0",
+        "@nivo/legends": "0.49.0",
-        "d3-scale": "^1.0.6",
+        "@nivo/scales": "0.49.0",
-        "d3-shape": "^1.2.0",
+        "d3-format": "^1.3.2",
+        "d3-scale": "^2.1.2",
+        "d3-shape": "^1.2.2",
         "lodash": "^4.17.4",
         "react-motion": "^0.5.2",
         "recompose": "^0.26.0"
       }
     },
+    "@nivo/scales": {
+      "version": "0.49.0",
+      "resolved": "https://registry.npmjs.org/@nivo/scales/-/scales-0.49.0.tgz",
+      "integrity": "sha512-+5Leu4zX6mDSAunf4ZJHeqVlT+ZsqiKXLB6hT/u7r3GjxZP9A+n3rHePhIzikBiBRMlLjyiBlylLzhKBAYbGWQ==",
+      "requires": {
+        "d3-scale": "^2.1.2",
+        "d3-time-format": "^2.1.3",
+        "lodash": "^4.17.4"
+      }
+    },
     "@nodelib/fs.stat": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.1.tgz",
@@ -2677,6 +2703,15 @@
         "source-map": "~0.6.0"
       }
     },
+    "clean-webpack-plugin": {
+      "version": "0.1.19",
+      "resolved": "https://registry.npmjs.org/clean-webpack-plugin/-/clean-webpack-plugin-0.1.19.tgz",
+      "integrity": "sha512-M1Li5yLHECcN2MahoreuODul5LkjohJGFxLPTjl3j1ttKrF5rgjZET1SJduuqxLAuT1gAPOdkhg03qcaaU1KeA==",
+      "dev": true,
+      "requires": {
+        "rimraf": "^2.6.1"
+      }
+    },
     "cli-cursor": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-2.1.0.tgz",
@@ -3502,13 +3537,12 @@
       "integrity": "sha512-q0cW1RpvA5c5ma2rch62mX8AYaiLX0+bdaSM2wxSU9tXjU4DNvkx9qiUvjkuWCj3p22UO/hlPivujqMiR9PDzA=="
     },
     "d3-scale": {
-      "version": "1.0.7",
+      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-1.0.7.tgz",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-2.1.2.tgz",
-      "integrity": "sha512-KvU92czp2/qse5tUfGms6Kjig0AhHOwkzXG0+PqIJB3ke0WUv088AHMZI0OssO9NCkXt4RP8yju9rpH8aGB7Lw==",
+      "integrity": "sha512-bESpd64ylaKzCDzvULcmHKZTlzA/6DGSVwx7QSDj/EnX9cpSevsdiwdHFYI9ouo9tNBbV3v5xztHS2uFeOzh8Q==",
       "requires": {
         "d3-array": "^1.2.0",
         "d3-collection": "1",
-        "d3-color": "1",
         "d3-format": "1",
         "d3-interpolate": "1",
         "d3-time": "1",
@@ -12822,9 +12856,9 @@
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
     "react-measure": {
-      "version": "2.1.0",
+      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/react-measure/-/react-measure-2.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/react-measure/-/react-measure-2.1.2.tgz",
-      "integrity": "sha512-nHdoq1eTbGVg/jWWAEtxXSHH51j09d1nPabj6PwS+pNSCYYf1H5XLMfcfU2ZTnkDU/Xg0fGY79Xud2Gsp3VsmQ==",
+      "integrity": "sha512-2xgrlj77Pv8MIYhm+S5s4Q+QnsYFT3CXzoUkx2mWZBIWzQnT7ubMtmsVtCoNdYV5PGKjTlwo9iGAtS3SrTG/Gg==",
       "requires": {
         "get-node-dimensions": "^1.2.0",
         "prop-types": "^15.5.10",

client/package.json

@@ -9,7 +9,7 @@
     "lint": "eslint frontend/"
   },
   "dependencies": {
-    "@nivo/line": "^0.42.1",
+    "@nivo/line": "^0.49.1",
     "axios": "^0.18.0",
     "classnames": "^2.2.6",
     "date-fns": "^1.29.0",
@@ -44,6 +44,7 @@
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-2": "^6.24.1",
     "babel-runtime": "6.26.0",
+    "clean-webpack-plugin": "^0.1.19",
     "compression-webpack-plugin": "^1.1.11",
     "css-loader": "^0.28.11",
     "eslint": "^4.19.1",

client/src/components/Dashboard/BlockedDomains.js

@@ -1,34 +1,61 @@
-import React from 'react';
+import React, { Component } from 'react';
 import ReactTable from 'react-table';
 import PropTypes from 'prop-types';
 import map from 'lodash/map';
 
 import Card from '../ui/Card';
+import Cell from '../ui/Cell';
 
-const Clients = props => (
+import { getPercent } from '../../helpers/helpers';
-    <Card title="Top blocked domains" subtitle="for the last 24 hours" bodyType="card-table" refresh={props.refreshButton}>
+import { STATUS_COLORS } from '../../helpers/constants';
-        <ReactTable
-            data={map(props.topBlockedDomains, (value, prop) => (
-                { ip: prop, domain: value }
-            ))}
-            columns={[{
-                Header: 'IP',
-                accessor: 'ip',
-            }, {
-                Header: 'Domain name',
-                accessor: 'domain',
-            }]}
-            showPagination={false}
-            noDataText="No domains found"
-            minRows={6}
-            className="-striped -highlight card-table-overflow"
-        />
-    </Card>
-);
 
-Clients.propTypes = {
+class BlockedDomains extends Component {
+    columns = [{
+        Header: 'IP',
+        accessor: 'ip',
+        Cell: ({ value }) => (<div className="logs__row logs__row--overflow"><span className="logs__text" title={value}>{value}</span></div>),
+    }, {
+        Header: 'Requests count',
+        accessor: 'domain',
+        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() {
+        return (
+            <Card title="Top blocked domains" subtitle="for the last 24 hours" bodyType="card-table" refresh={this.props.refreshButton}>
+                <ReactTable
+                    data={map(this.props.topBlockedDomains, (value, prop) => (
+                        { ip: prop, domain: value }
+                    ))}
+                    columns={this.columns}
+                    showPagination={false}
+                    noDataText="No domains found"
+                    minRows={6}
+                    className="-striped -highlight card-table-overflow"
+                />
+            </Card>
+        );
+    }
+}
+
+BlockedDomains.propTypes = {
     topBlockedDomains: PropTypes.object.isRequired,
-    refreshButton: PropTypes.node,
+    blockedFiltering: PropTypes.number.isRequired,
+    replacedSafebrowsing: PropTypes.number.isRequired,
+    replacedParental: PropTypes.number.isRequired,
+    refreshButton: PropTypes.node.isRequired,
 };
 
-export default Clients;
+export default BlockedDomains;

client/src/components/Dashboard/Clients.js

@@ -1,34 +1,63 @@
-import React from 'react';
+import React, { Component } from 'react';
 import ReactTable from 'react-table';
 import PropTypes from 'prop-types';
 import map from 'lodash/map';
 
 import Card from '../ui/Card';
+import Cell from '../ui/Cell';
 
-const Clients = props => (
+import { getPercent } from '../../helpers/helpers';
-    <Card title="Top clients" subtitle="for the last 24 hours" bodyType="card-table" refresh={props.refreshButton}>
+import { STATUS_COLORS } from '../../helpers/constants';
-        <ReactTable
+
-            data={map(props.topClients, (value, prop) => (
+class Clients extends Component {
-                { ip: prop, count: value }
+    getPercentColor = (percent) => {
-            ))}
+        if (percent > 50) {
-            columns={[{
+            return STATUS_COLORS.green;
-                Header: 'IP',
+        } else if (percent > 10) {
-                accessor: 'ip',
+            return STATUS_COLORS.yellow;
-            }, {
+        }
-                Header: 'Requests count',
+        return STATUS_COLORS.red;
-                accessor: 'count',
+    }
-            }]}
+
-            showPagination={false}
+    columns = [{
-            noDataText="No clients found"
+        Header: 'IP',
-            minRows={6}
+        accessor: 'ip',
-            className="-striped -highlight card-table-overflow"
+        Cell: ({ value }) => (<div className="logs__row logs__row--overflow"><span className="logs__text" title={value}>{value}</span></div>),
-        />
+    }, {
-    </Card>
+        Header: 'Requests count',
-);
+        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() {
+        return (
+            <Card title="Top clients" subtitle="for the last 24 hours" bodyType="card-table" refresh={this.props.refreshButton}>
+                <ReactTable
+                    data={map(this.props.topClients, (value, prop) => (
+                        { ip: prop, count: value }
+                    ))}
+                    columns={this.columns}
+                    showPagination={false}
+                    noDataText="No clients found"
+                    minRows={6}
+                    className="-striped -highlight card-table-overflow"
+                />
+            </Card>
+        );
+    }
+}
 
 Clients.propTypes = {
     topClients: PropTypes.object.isRequired,
-    refreshButton: PropTypes.node,
+    dnsQueries: PropTypes.number.isRequired,
+    refreshButton: PropTypes.node.isRequired,
 };
 
 export default Clients;

client/src/components/Dashboard/Counters.js

@@ -88,7 +88,7 @@ Counters.propTypes = {
     replacedParental: PropTypes.number.isRequired,
     replacedSafesearch: PropTypes.number.isRequired,
     avgProcessingTime: PropTypes.number.isRequired,
-    refreshButton: PropTypes.node,
+    refreshButton: PropTypes.node.isRequired,
 };
 
 export default Counters;

client/src/components/Dashboard/QueriedDomains.js

@@ -1,34 +1,63 @@
-import React from 'react';
+import React, { Component } from 'react';
 import ReactTable from 'react-table';
 import PropTypes from 'prop-types';
 import map from 'lodash/map';
 
 import Card from '../ui/Card';
+import Cell from '../ui/Cell';
 
-const QueriedDomains = props => (
+import { getPercent } from '../../helpers/helpers';
-    <Card title="Top queried domains" subtitle="for the last 24 hours" bodyType="card-table" refresh={props.refreshButton}>
+import { STATUS_COLORS } from '../../helpers/constants';
-        <ReactTable
+
-            data={map(props.topQueriedDomains, (value, prop) => (
+class QueriedDomains extends Component {
-                { ip: prop, count: value }
+    getPercentColor = (percent) => {
-            ))}
+        if (percent > 10) {
-            columns={[{
+            return STATUS_COLORS.red;
-                Header: 'IP',
+        } else if (percent > 5) {
-                accessor: 'ip',
+            return STATUS_COLORS.yellow;
-            }, {
+        }
-                Header: 'Requests count',
+        return STATUS_COLORS.green;
-                accessor: 'count',
+    }
-            }]}
+
-            showPagination={false}
+    columns = [{
-            noDataText="No domains found"
+        Header: 'IP',
-            minRows={6}
+        accessor: 'ip',
-            className="-striped -highlight card-table-overflow"
+        Cell: ({ value }) => (<div className="logs__row logs__row--overflow"><span className="logs__text" title={value}>{value}</span></div>),
-        />
+    }, {
-    </Card>
+        Header: 'Requests count',
-);
+        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() {
+        return (
+            <Card title="Top queried domains" subtitle="for the last 24 hours" bodyType="card-table" refresh={this.props.refreshButton}>
+                <ReactTable
+                    data={map(this.props.topQueriedDomains, (value, prop) => (
+                        { ip: prop, count: value }
+                    ))}
+                    columns={this.columns}
+                    showPagination={false}
+                    noDataText="No domains found"
+                    minRows={6}
+                    className="-striped -highlight card-table-overflow"
+                />
+            </Card>
+        );
+    }
+}
 
 QueriedDomains.propTypes = {
     topQueriedDomains: PropTypes.object.isRequired,
-    refreshButton: PropTypes.node,
+    dnsQueries: PropTypes.number.isRequired,
+    refreshButton: PropTypes.node.isRequired,
 };
 
 export default QueriedDomains;

client/src/components/Dashboard/Statistics.js

@@ -1,59 +1,109 @@
-import React from 'react';
+import React, { Component } from 'react';
-import { ResponsiveLine } from '@nivo/line';
 import PropTypes from 'prop-types';
 
 import Card from '../ui/Card';
+import Line from '../ui/Line';
 
-const Statistics = props => (
+import { getPercent } from '../../helpers/helpers';
-    <Card title="Statistics" subtitle="for the last 24 hours" bodyType="card-graph" refresh={props.refreshButton}>
+import { STATUS_COLORS } from '../../helpers/constants';
-        {props.history ?
+
-            <ResponsiveLine
+class Statistics extends Component {
-                data={props.history}
+    render() {
-                margin={{
+        const {
-                    top: 50,
+            dnsQueries,
-                    right: 40,
+            blockedFiltering,
-                    bottom: 80,
+            replacedSafebrowsing,
-                    left: 80,
+            replacedParental,
-                }}
+        } = this.props;
-                minY="auto"
+
-                stacked={false}
+        const filteringData = [this.props.history[1]];
-                curve='monotoneX'
+        const queriesData = [this.props.history[2]];
-                axisBottom={{
+        const parentalData = [this.props.history[3]];
-                    orient: 'bottom',
+        const safebrowsingData = [this.props.history[4]];
-                    tickSize: 5,
+
-                    tickPadding: 5,
+        return (
-                    tickRotation: -45,
+            <div className="row">
-                    legendOffset: 50,
+                <div className="col-sm-6 col-lg-3">
-                    legendPosition: 'center',
+                    <Card bodyType="card-wrap">
-                }}
+                        <div className="card-body-stats">
-                axisLeft={{
+                            <div className="card-value card-value-stats text-blue">
-                    orient: 'left',
+                                {dnsQueries}
-                    tickSize: 5,
+                            </div>
-                    tickPadding: 5,
+                            <div className="card-title-stats">
-                    tickRotation: 0,
+                                DNS Queries
-                    legendOffset: -40,
+                            </div>
-                    legendPosition: 'center',
+                        </div>
-                }}
+                        <div className="card-chart-bg">
-                enableArea={true}
+                            <Line data={queriesData} color={STATUS_COLORS.blue}/>
-                dotSize={10}
+                        </div>
-                dotColor="inherit:darker(0.3)"
+                    </Card>
-                dotBorderWidth={2}
+                </div>
-                dotBorderColor="#ffffff"
+                <div className="col-sm-6 col-lg-3">
-                dotLabel="y"
+                    <Card bodyType="card-wrap">
-                dotLabelYOffset={-12}
+                        <div className="card-body-stats">
-                animate={true}
+                            <div className="card-value card-value-stats text-red">
-                motionStiffness={90}
+                                {blockedFiltering}
-                motionDamping={15}
+                            </div>
-            />
+                            <div className="card-value card-value-percent text-red">
-            :
+                                {getPercent(dnsQueries, blockedFiltering)}
-            <h2 className="text-muted">Empty data</h2>
+                            </div>
-        }
+                            <div className="card-title-stats">
-    </Card>
+                                Blocked by Filters
-);
+                            </div>
+                        </div>
+                        <div className="card-chart-bg">
+                            <Line data={filteringData} color={STATUS_COLORS.red}/>
+                        </div>
+                    </Card>
+                </div>
+                <div className="col-sm-6 col-lg-3">
+                    <Card bodyType="card-wrap">
+                        <div className="card-body-stats">
+                            <div className="card-value card-value-stats text-green">
+                                {replacedSafebrowsing}
+                            </div>
+                            <div className="card-value card-value-percent text-green">
+                                {getPercent(dnsQueries, replacedSafebrowsing)}
+                            </div>
+                            <div className="card-title-stats">
+                                Blocked malware/phishing
+                            </div>
+                        </div>
+                        <div className="card-chart-bg">
+                            <Line data={safebrowsingData} color={STATUS_COLORS.green}/>
+                        </div>
+                    </Card>
+                </div>
+                <div className="col-sm-6 col-lg-3">
+                    <Card bodyType="card-wrap">
+                        <div className="card-body-stats">
+                            <div className="card-value card-value-stats text-yellow">
+                                {replacedParental}
+                            </div>
+                            <div className="card-value card-value-percent text-yellow">
+                                {getPercent(dnsQueries, replacedParental)}
+                            </div>
+                            <div className="card-title-stats">
+                                Blocked adult websites
+                            </div>
+                        </div>
+                        <div className="card-chart-bg">
+                            <Line data={parentalData} color={STATUS_COLORS.yellow}/>
+                        </div>
+                    </Card>
+                </div>
+            </div>
+        );
+    }
+}
 
 Statistics.propTypes = {
     history: PropTypes.array.isRequired,
-    refreshButton: PropTypes.node,
+    dnsQueries: PropTypes.number.isRequired,
+    blockedFiltering: PropTypes.number.isRequired,
+    replacedSafebrowsing: PropTypes.number.isRequired,
+    replacedParental: PropTypes.number.isRequired,
+    refreshButton: PropTypes.node.isRequired,
 };
 
 export default Statistics;

client/src/components/Dashboard/index.js

@@ -61,6 +61,10 @@ class Dashboard extends Component {
                                 <Statistics
                                     history={dashboard.statsHistory}
                                     refreshButton={refreshButton}
+                                    dnsQueries={dashboard.stats.dns_queries}
+                                    blockedFiltering={dashboard.stats.blocked_filtering}
+                                    replacedSafebrowsing={dashboard.stats.replaced_safebrowsing}
+                                    replacedParental={dashboard.stats.replaced_parental}
                                 />
                             </div>
                         }
@@ -81,12 +85,14 @@ class Dashboard extends Component {
                             <Fragment>
                                 <div className="col-lg-6">
                                     <Clients
+                                        dnsQueries={dashboard.stats.dns_queries}
                                         refreshButton={refreshButton}
                                         topClients={dashboard.topStats.top_clients}
                                     />
                                 </div>
                                 <div className="col-lg-6">
                                     <QueriedDomains
+                                        dnsQueries={dashboard.stats.dns_queries}
                                         refreshButton={refreshButton}
                                         topQueriedDomains={dashboard.topStats.top_queried_domains}
                                     />
@@ -95,6 +101,9 @@ class Dashboard extends Component {
                                     <BlockedDomains
                                         refreshButton={refreshButton}
                                         topBlockedDomains={dashboard.topStats.top_blocked_domains}
+                                        blockedFiltering={dashboard.stats.blocked_filtering}
+                                        replacedSafebrowsing={dashboard.stats.replaced_safebrowsing}
+                                        replacedParental={dashboard.stats.replaced_parental}
                                     />
                                 </div>
                             </Fragment>

client/src/components/Header/Header.css

@@ -77,7 +77,7 @@
 }
 
 .header-brand-img {
-    height: 26px;
+    height: 32px;
 }
 
 @media screen and (min-width: 992px) {

client/src/components/Header/logo.svg

@@ -1 +1 @@
-<svg viewBox="0 0 118 26" xmlns="http://www.w3.org/2000/svg"><path fill="#232323" d="M92.535 18.314l-.897-2.259h-4.47l-.849 2.259h-3.034L88.13 6.809h2.708l4.796 11.505h-3.1zm-3.1-8.434l-1.468 3.949h2.904L89.435 9.88zm-6.607 4.095c0 .693-.117 1.324-.35 1.893a4.115 4.115 0 0 1-1.004 1.463 4.63 4.63 0 0 1-1.574.95c-.614.228-1.297.341-2.047.341-.761 0-1.447-.113-2.056-.34a4.468 4.468 0 0 1-1.55-.951 4.126 4.126 0 0 1-.978-1.463 5.038 5.038 0 0 1-.343-1.893V6.809H75.7v6.939c0 .314.041.612.123.893.081.282.206.534.375.756.169.222.392.398.669.528s.612.195 1.003.195c.392 0 .726-.065 1.003-.195a1.83 1.83 0 0 0 .677-.528 2.1 2.1 0 0 0 .376-.756c.076-.281.114-.58.114-.893v-6.94h2.79v7.167zm-11.446 3.64a8.898 8.898 0 0 1-1.982.715 10.43 10.43 0 0 1-2.472.276c-.924 0-1.775-.146-2.553-.439a5.895 5.895 0 0 1-2.006-1.235 5.63 5.63 0 0 1-1.314-1.909c-.315-.742-.473-1.568-.473-2.478 0-.92.16-1.755.482-2.502a5.567 5.567 0 0 1 1.33-1.91 5.893 5.893 0 0 1 1.99-1.21 7.044 7.044 0 0 1 2.463-.423c.913 0 1.762.138 2.545.414.783.277 1.419.648 1.908 1.114l-1.762 1.998a3.05 3.05 0 0 0-1.076-.772c-.446-.2-.952-.3-1.517-.3-.49 0-.941.09-1.354.268a3.256 3.256 0 0 0-1.077.747 3.39 3.39 0 0 0-.71 1.138 3.977 3.977 0 0 0-.253 1.438c0 .53.077 1.018.229 1.463.152.444.378.826.677 1.145.299.32.669.569 1.11.748.44.178.943.268 1.508.268.326 0 .636-.025.93-.073.294-.05.566-.128.816-.236v-2.096h-2.203V11.52h4.764v6.094zm46.107-5.086c0 1.007-.188 1.877-.563 2.608a5.262 5.262 0 0 1-1.484 1.804 6.199 6.199 0 0 1-2.08 1.04 8.459 8.459 0 0 1-2.35.333h-4.306V6.809h4.176c.816 0 1.62.095 2.414.284.794.19 1.501.504 2.121.943.62.438 1.12 1.026 1.5 1.763.382.736.572 1.646.572 2.73zm-2.904 0c0-.65-.106-1.19-.318-1.617a2.724 2.724 0 0 0-.848-1.024 3.4 3.4 0 0 0-1.208-.544 5.955 5.955 0 0 0-1.394-.163h-1.387v6.728h1.321c.5 0 .982-.057 1.444-.17.462-.115.87-.301 1.224-.562a2.78 2.78 0 0 0 .848-1.04c.212-.433.318-.97.318-1.608zm-55.226 0c0 1.007-.188 1.877-.563 2.608a5.262 5.262 0 0 1-1.484 1.804 6.199 6.199 0 0 1-2.08 1.04 8.459 8.459 0 0 1-2.35.333h-4.306V6.809h4.176c.816 0 1.62.095 2.414.284.794.19 1.501.504 2.121.943.62.438 1.12 1.026 1.5 1.763.382.736.572 1.646.572 2.73zm-2.904 0c0-.65-.106-1.19-.318-1.617a2.724 2.724 0 0 0-.848-1.024 3.4 3.4 0 0 0-1.207-.544 5.955 5.955 0 0 0-1.395-.163H51.3v6.728h1.321c.5 0 .982-.057 1.444-.17.462-.115.87-.301 1.224-.562a2.78 2.78 0 0 0 .848-1.04c.212-.433.318-.97.318-1.608zm-11.86 5.785l-.897-2.259h-4.47l-.848 2.259h-3.034L40.19 6.809h2.708l4.796 11.505h-3.1zm-3.1-8.434l-1.467 3.949h2.903L41.496 9.88zm61.203 8.434l-2.496-4.566h-.946v4.566h-2.74V6.809h4.404c.555 0 1.096.057 1.623.17.528.114 1 .306 1.42.577.418.271.752.629 1.003 1.073.25.444.375.996.375 1.657 0 .78-.212 1.436-.636 1.966-.425.531-1.012.91-1.762 1.138l3.018 4.924h-3.263zm-.114-7.979c0-.27-.057-.49-.171-.658a1.172 1.172 0 0 0-.44-.39 1.919 1.919 0 0 0-.604-.187 4.469 4.469 0 0 0-.645-.049H99.24v2.681h1.321c.228 0 .462-.018.701-.056.24-.038.457-.106.653-.204.196-.097.356-.238.481-.422s.188-.422.188-.715z"/><path fill="#68bc71" d="M12.651 0C8.697 0 3.927.93 0 2.977c0 4.42-.054 15.433 12.651 22.958C25.357 18.41 25.303 7.397 25.303 2.977 21.376.93 16.606 0 12.651 0z"/><path fill="#67b279" d="M12.638 25.927C-.054 18.403 0 7.396 0 2.977 3.923.932 8.687.002 12.638 0v25.927z"/><path fill="#fff" d="M12.19 17.305l7.65-10.311c-.56-.45-1.052-.133-1.323.113h-.01l-6.379 6.636-2.403-2.892c-1.147-1.325-2.705-.314-3.07-.047l5.535 6.5"/></svg>
+<svg width="340" height="91" viewBox="0 0 340 91" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M265.964 50l-2.615-6.675h-13.03L247.844 50H239l14.124-34h7.894L275 50h-9.036zm-9.035-24.924l-4.28 11.67h8.465l-4.185-11.67zM238 37.231c0 2.054-.342 3.924-1.027 5.609-.685 1.685-1.664 3.129-2.938 4.333-1.274 1.203-2.811 2.142-4.61 2.816-1.8.674-3.799 1.011-5.997 1.011-2.23 0-4.236-.337-6.02-1.011-1.783-.674-3.296-1.613-4.538-2.816-1.242-1.204-2.198-2.648-2.867-4.333S209 39.285 209 37.23V16h8.122v20.557c0 .93.12 1.813.358 2.648a6.82 6.82 0 0 0 1.1 2.239c.493.658 1.146 1.18 1.958 1.564.812.385 1.791.578 2.938.578 1.147 0 2.126-.193 2.938-.578.813-.385 1.473-.906 1.983-1.564a6.248 6.248 0 0 0 1.099-2.239c.223-.835.334-1.717.334-2.648V16H238v21.231zM204 47.134c-1.623.846-3.52 1.535-5.69 2.067-2.17.533-4.534.799-7.094.799-2.654 0-5.096-.423-7.329-1.268-2.232-.846-4.152-2.036-5.76-3.57-1.607-1.536-2.864-3.376-3.769-5.521-.905-2.145-1.358-4.534-1.358-7.164 0-2.663.46-5.074 1.381-7.235.921-2.161 2.194-4.002 3.817-5.52 1.623-1.52 3.528-2.686 5.713-3.5 2.185-.815 4.542-1.222 7.07-1.222 2.623 0 5.058.4 7.306 1.198 2.248.799 4.074 1.871 5.479 3.218l-5.058 5.779c-.78-.909-1.81-1.652-3.09-2.232-1.28-.58-2.732-.869-4.355-.869-1.405 0-2.7.258-3.887.775a9.345 9.345 0 0 0-3.09 2.161c-.875.924-1.554 2.02-2.038 3.289-.483 1.268-.725 2.654-.725 4.158 0 1.534.218 2.944.655 4.228.437 1.284 1.085 2.388 1.944 3.312.858.924 1.92 1.644 3.184 2.16 1.264.518 2.708.776 4.331.776.937 0 1.827-.07 2.67-.211a9.929 9.929 0 0 0 2.341-.682V36h-6.322v-6.483H204v17.617zM340 32.904c0 2.977-.54 5.547-1.618 7.708-1.079 2.16-2.501 3.937-4.268 5.33a17.637 17.637 0 0 1-5.98 3.074c-2.22.656-4.47.984-6.753.984H309V16h12.006c2.345 0 4.659.28 6.941.84 2.282.56 4.315 1.49 6.097 2.786s3.22 3.033 4.315 5.21c1.094 2.177 1.641 4.866 1.641 8.068zm-8.348 0c0-1.921-.305-3.514-.914-4.778-.61-1.265-1.423-2.273-2.44-3.026a9.649 9.649 0 0 0-3.47-1.608 16.677 16.677 0 0 0-4.01-.48h-3.986v19.88h3.799a16.86 16.86 0 0 0 4.15-.504c1.33-.336 2.502-.888 3.518-1.656 1.016-.769 1.829-1.793 2.439-3.074.61-1.28.914-2.865.914-4.754zM169 32.904c0 2.977-.54 5.547-1.618 7.708-1.079 2.16-2.501 3.937-4.268 5.33a17.637 17.637 0 0 1-5.98 3.074c-2.22.656-4.47.984-6.753.984H138V16h12.006c2.345 0 4.659.28 6.941.84 2.282.56 4.315 1.49 6.097 2.786s3.22 3.033 4.315 5.21c1.094 2.177 1.641 4.866 1.641 8.068zm-8.348 0c0-1.921-.305-3.514-.914-4.778-.61-1.265-1.423-2.273-2.44-3.026a9.649 9.649 0 0 0-3.47-1.608 16.677 16.677 0 0 0-4.01-.48h-3.986v19.88h3.799a16.86 16.86 0 0 0 4.15-.504c1.33-.336 2.502-.888 3.518-1.656 1.016-.769 1.829-1.793 2.439-3.074.61-1.28.914-2.865.914-4.754zM126.964 50l-2.615-6.675h-13.03L108.844 50H100l14.124-34h7.894L136 50h-9.036zm-9.035-24.924l-4.28 11.67h8.465l-4.185-11.67zM295.674 50l-7.135-13.494h-2.705V50H278V16h12.59c1.586 0 3.133.168 4.64.504 1.508.336 2.86.905 4.058 1.705 1.196.8 2.152 1.857 2.867 3.17.715 1.312 1.073 2.945 1.073 4.898 0 2.305-.606 4.242-1.819 5.81-1.212 1.57-2.89 2.69-5.036 3.362L305 50h-9.326zm-.327-23.58c0-.8-.163-1.448-.49-1.944a3.39 3.39 0 0 0-1.259-1.153 5.355 5.355 0 0 0-1.725-.552 12.364 12.364 0 0 0-1.842-.144h-4.243v7.924h3.777c.653 0 1.321-.056 2.005-.168a6.257 6.257 0 0 0 1.865-.6 3.596 3.596 0 0 0 1.376-1.25c.357-.543.536-1.248.536-2.112z" fill="#242424"/><path d="M44.477 0C30.575 0 13.805 3.255 0 10.419 0 25.89-.19 64.436 44.477 90.772 89.145 64.436 88.956 25.89 88.956 10.42 75.149 3.255 58.38 0 44.476 0z" fill="#68BC71"/><path d="M44.431 90.746C-.19 64.41 0 25.886 0 10.419 13.79 3.263 30.538.007 44.431 0v90.746z" fill="#67B279"/><path d="M42.854 60.566L69.75 24.477c-1.97-1.572-3.7-.462-4.65.397l-.036.003L42.64 48.102l-8.45-10.123c-4.03-4.636-9.51-1.1-10.79-.165l19.455 22.752" fill="#FFF"/><path d="M102.65 83V64.8h2.054v8.086h10.504V64.8h2.054V83h-2.054v-8.19h-10.504V83h-2.054zm28.21.312c-5.538 0-9.256-4.342-9.256-9.412 0-5.018 3.77-9.412 9.308-9.412s9.256 4.342 9.256 9.412c0 5.018-3.77 9.412-9.308 9.412zm.052-1.898c4.16 0 7.124-3.328 7.124-7.514 0-4.134-3.016-7.514-7.176-7.514s-7.124 3.328-7.124 7.514c0 4.134 3.016 7.514 7.176 7.514zM144.51 83V64.8h2.08l6.63 9.932 6.63-9.932h2.08V83h-2.054V68.258l-6.63 9.75h-.104l-6.63-9.724V83h-2.002zm22.568 0V64.8h13.156v1.872h-11.102v6.214h9.932v1.872h-9.932v6.37h11.232V83h-13.286z" fill="#4D4D4D"/></g></svg>

client/src/components/ui/Card.css

@@ -26,7 +26,6 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    height: 400px;
 }
 
 .card-body--status {
@@ -48,3 +47,40 @@
 .card-refresh:focus:active {
     background-image: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjI0IiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMjMgNHY2aC02Ii8+PHBhdGggZD0ibTEgMjB2LTZoNiIvPjxwYXRoIGQ9Im0zLjUxIDlhOSA5IDAgMCAxIDE0Ljg1LTMuMzZsNC42NCA0LjM2bS0yMiA0IDQuNjQgNC4zNmE5IDkgMCAwIDAgMTQuODUtMy4zNiIvPjwvc3ZnPg==");
 }
+
+.card-title-stats {
+    color: #9aa0ac;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+.card-body-stats {
+    position: relative;
+    flex: 1 1 auto;
+    margin: 0;
+    padding: 1rem 1.5rem;
+}
+
+.card-value-stats {
+    display: block;
+    font-size: 2.1rem;
+    line-height: 2.7rem;
+    height: 2.7rem;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.card-value-percent {
+    position: absolute;
+    top: 15px;
+    right: 15px;
+    font-size: 0.9rem;
+    line-height: 1;
+    height: auto;
+}
+
+.card-value-percent:after {
+    content: "%";
+}

client/src/components/ui/Cell.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+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>
+        </div>
+        <div className="progress progress-xs">
+            <div
+                className="progress-bar"
+                style={{
+                    width: `${props.percent}%`,
+                    backgroundColor: props.color,
+                }}
+            />
+        </div>
+    </div>
+);
+
+Cell.propTypes = {
+    value: PropTypes.number.isRequired,
+    percent: PropTypes.number.isRequired,
+    color: PropTypes.string.isRequired,
+};
+
+export default Cell;

client/src/components/ui/Footer.js

@@ -12,17 +12,23 @@ class Footer extends Component {
                 <div className="container">
                     <div className="row align-items-center flex-row-reverse">
                         <div className="col-12 col-lg-auto ml-lg-auto">
-                            <ul className="list-inline list-inline-dots text-center mb-0">
+                            <div className="row align-items-center justify-content-center">
-                                <li className="list-inline-item">
+                                <div className="col-auto">
-                                    <a href="https://adguard.com/adguard-dns/overview.html" target="_blank" rel="noopener noreferrer">Homepage</a>
+                                    <ul className="list-inline text-center mb-0">
-                                </li>
+                                        <li className="list-inline-item">
-                                <li className="list-inline-item">
+                                            <a href="https://github.com/AdguardTeam/AdguardDNS" target="_blank" rel="noopener noreferrer">Homepage</a>
-                                    <a href="https://github.com/AdguardTeam/AdguardDNS" target="_blank" rel="noopener noreferrer">Github</a>
+                                        </li>
-                                </li>
+                                    </ul>
-                            </ul>
+                                </div>
+                                <div className="col-auto">
+                                    <a href="https://github.com/AdguardTeam/AdguardDNS/issues/new" className="btn btn-outline-primary btn-sm" target="_blank" rel="noopener noreferrer">
+                                        Report an issue
+                                    </a>
+                                </div>
+                            </div>
                         </div>
                         <div className="col-12 col-lg-auto mt-3 mt-lg-0 text-center">
-                            © AdGuard {this.getYear()}
+                            Copyright © {this.getYear()} <a href="https://adguard.com/">AdGuard</a>.
                         </div>
                     </div>
                 </div>

client/src/components/ui/Line.css

@@ -0,0 +1,9 @@
+.line__tooltip {
+    padding: 2px 10px 7px;
+    line-height: 1.1;
+    color: #fff;
+}
+
+.line__tooltip-text {
+    font-size: 0.7rem;
+}

client/src/components/ui/Line.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ResponsiveLine } from '@nivo/line';
+
+import './Line.css';
+
+const Line = props => (
+    props.data &&
+        <ResponsiveLine
+            data={props.data}
+            margin={{
+                top: 15,
+                right: 0,
+                bottom: 1,
+                left: 0,
+            }}
+            minY="auto"
+            stacked={false}
+            curve='linear'
+            axisBottom={{
+                tickSize: 0,
+                tickPadding: 0,
+            }}
+            axisLeft={{
+                tickSize: 0,
+                tickPadding: 0,
+            }}
+            enableGridX={false}
+            enableGridY={false}
+            enableDots={false}
+            enableArea={true}
+            animate={false}
+            colorBy={() => (props.color)}
+            tooltip={slice => (
+                <div>
+                    {slice.data.map(d => (
+                        <div key={d.serie.id} className="line__tooltip">
+                            <span className="line__tooltip-text">
+                                {d.data.y}
+                            </span>
+                        </div>
+                    ))}
+                </div>
+            )}
+            theme={{
+                tooltip: {
+                    container: {
+                        padding: '0',
+                        background: '#333',
+                        borderRadius: '4px',
+                    },
+                },
+            }}
+        />
+);
+
+Line.propTypes = {
+    data: PropTypes.array.isRequired,
+    color: PropTypes.string.isRequired,
+};
+
+export default Line;

client/src/helpers/constants.js

@@ -1 +1,17 @@
 export const R_URL_REQUIRES_PROTOCOL = /^https?:\/\/\w[\w_\-.]*\.[a-z]{2,8}[^\s]*$/;
+
+export const STATS_NAMES = {
+    avg_processing_time: 'Average processing time',
+    blocked_filtering: 'Blocked by filters',
+    dns_queries: 'DNS queries',
+    replaced_parental: 'Blocked adult websites',
+    replaced_safebrowsing: 'Blocked malware/phishing',
+    replaced_safesearch: 'Enforced safe search',
+};
+
+export const STATUS_COLORS = {
+    blue: '#467fcf',
+    red: '#cd201f',
+    green: '#5eba00',
+    yellow: '#f1c40f',
+};

client/src/helpers/helpers.js

@@ -4,6 +4,8 @@ import subHours from 'date-fns/sub_hours';
 import addHours from 'date-fns/add_hours';
 import round from 'lodash/round';
 
+import { STATS_NAMES } from './constants';
+
 const formatTime = (time) => {
     const parsedTime = dateParse(time);
     return dateFormat(parsedTime, 'HH:mm:ss');
@@ -34,15 +36,6 @@ export const normalizeLogs = logs => logs.map((log) => {
     };
 });
 
-const STATS_NAMES = {
-    avg_processing_time: 'Average processing time',
-    blocked_filtering: 'Blocked by filters',
-    dns_queries: 'DNS queries',
-    replaced_parental: 'Blocked adult websites',
-    replaced_safebrowsing: 'Blocked malware/phishing',
-    replaced_safesearch: 'Enforced safe search',
-};
-
 export const normalizeHistory = history => Object.keys(history).map((key) => {
     let id = STATS_NAMES[key];
     if (!id) {
@@ -81,3 +74,10 @@ export const normalizeFilteringStatus = (filteringStatus) => {
     const newUserRules = Array.isArray(userRules) ? userRules.join('\n') : '';
     return { enabled, userRules: newUserRules, filters: newFilters };
 };
+
+export const getPercent = (amount, number) => {
+    if (amount > 0 && number > 0) {
+        return round(100 / (amount / number), 2);
+    }
+    return 0;
+};

client/webpack.common.js

@@ -4,6 +4,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const webpack = require('webpack');
 const flexBugsFixes = require('postcss-flexbugs-fixes');
+const CleanWebpackPlugin = require('clean-webpack-plugin');
 
 const RESOURCES_PATH = path.resolve(__dirname);
 const ENTRY_REACT = path.resolve(RESOURCES_PATH, 'src/index.js');
@@ -92,6 +93,11 @@ const config = {
         new webpack.DefinePlugin({
             'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
         }),
+        new CleanWebpackPlugin(['*.*'], {
+            root: PUBLIC_PATH,
+            verbose: false,
+            dry: false,
+        }),
         new HtmlWebpackPlugin({
             inject: true,
             cache: false,