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
This commit is contained in:
Andrey Meshkov
@@ -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 => (
|
||||
<Card title="Top blocked domains" subtitle="for the last 24 hours" bodyType="card-table" refresh={props.refreshButton}>
|
||||
<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>
|
||||
);
|
||||
import { getPercent } from '../../helpers/helpers';
|
||||
import { STATUS_COLORS } from '../../helpers/constants';
|
||||
|
||||
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;
|
||||
|
||||
@@ -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 => (
|
||||
<Card title="Top clients" subtitle="for the last 24 hours" bodyType="card-table" refresh={props.refreshButton}>
|
||||
<ReactTable
|
||||
data={map(props.topClients, (value, prop) => (
|
||||
{ ip: prop, count: value }
|
||||
))}
|
||||
columns={[{
|
||||
Header: 'IP',
|
||||
accessor: 'ip',
|
||||
}, {
|
||||
Header: 'Requests count',
|
||||
accessor: 'count',
|
||||
}]}
|
||||
showPagination={false}
|
||||
noDataText="No clients found"
|
||||
minRows={6}
|
||||
className="-striped -highlight card-table-overflow"
|
||||
/>
|
||||
</Card>
|
||||
);
|
||||
import { getPercent } from '../../helpers/helpers';
|
||||
import { STATUS_COLORS } from '../../helpers/constants';
|
||||
|
||||
class Clients extends Component {
|
||||
getPercentColor = (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 }) => (<div className="logs__row logs__row--overflow"><span className="logs__text" title={value}>{value}</span></div>),
|
||||
}, {
|
||||
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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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 => (
|
||||
<Card title="Top queried domains" subtitle="for the last 24 hours" bodyType="card-table" refresh={props.refreshButton}>
|
||||
<ReactTable
|
||||
data={map(props.topQueriedDomains, (value, prop) => (
|
||||
{ ip: prop, count: value }
|
||||
))}
|
||||
columns={[{
|
||||
Header: 'IP',
|
||||
accessor: 'ip',
|
||||
}, {
|
||||
Header: 'Requests count',
|
||||
accessor: 'count',
|
||||
}]}
|
||||
showPagination={false}
|
||||
noDataText="No domains found"
|
||||
minRows={6}
|
||||
className="-striped -highlight card-table-overflow"
|
||||
/>
|
||||
</Card>
|
||||
);
|
||||
import { getPercent } from '../../helpers/helpers';
|
||||
import { STATUS_COLORS } from '../../helpers/constants';
|
||||
|
||||
class QueriedDomains extends Component {
|
||||
getPercentColor = (percent) => {
|
||||
if (percent > 10) {
|
||||
return STATUS_COLORS.red;
|
||||
} else if (percent > 5) {
|
||||
return STATUS_COLORS.yellow;
|
||||
}
|
||||
return STATUS_COLORS.green;
|
||||
}
|
||||
|
||||
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: '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;
|
||||
|
||||
@@ -1,59 +1,109 @@
|
||||
import React from 'react';
|
||||
import { ResponsiveLine } from '@nivo/line';
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import Card from '../ui/Card';
|
||||
import Line from '../ui/Line';
|
||||
|
||||
const Statistics = props => (
|
||||
<Card title="Statistics" subtitle="for the last 24 hours" bodyType="card-graph" refresh={props.refreshButton}>
|
||||
{props.history ?
|
||||
<ResponsiveLine
|
||||
data={props.history}
|
||||
margin={{
|
||||
top: 50,
|
||||
right: 40,
|
||||
bottom: 80,
|
||||
left: 80,
|
||||
}}
|
||||
minY="auto"
|
||||
stacked={false}
|
||||
curve='monotoneX'
|
||||
axisBottom={{
|
||||
orient: 'bottom',
|
||||
tickSize: 5,
|
||||
tickPadding: 5,
|
||||
tickRotation: -45,
|
||||
legendOffset: 50,
|
||||
legendPosition: 'center',
|
||||
}}
|
||||
axisLeft={{
|
||||
orient: 'left',
|
||||
tickSize: 5,
|
||||
tickPadding: 5,
|
||||
tickRotation: 0,
|
||||
legendOffset: -40,
|
||||
legendPosition: 'center',
|
||||
}}
|
||||
enableArea={true}
|
||||
dotSize={10}
|
||||
dotColor="inherit:darker(0.3)"
|
||||
dotBorderWidth={2}
|
||||
dotBorderColor="#ffffff"
|
||||
dotLabel="y"
|
||||
dotLabelYOffset={-12}
|
||||
animate={true}
|
||||
motionStiffness={90}
|
||||
motionDamping={15}
|
||||
/>
|
||||
:
|
||||
<h2 className="text-muted">Empty data</h2>
|
||||
}
|
||||
</Card>
|
||||
);
|
||||
import { getPercent } from '../../helpers/helpers';
|
||||
import { STATUS_COLORS } from '../../helpers/constants';
|
||||
|
||||
class Statistics extends Component {
|
||||
render() {
|
||||
const {
|
||||
dnsQueries,
|
||||
blockedFiltering,
|
||||
replacedSafebrowsing,
|
||||
replacedParental,
|
||||
} = this.props;
|
||||
|
||||
const filteringData = [this.props.history[1]];
|
||||
const queriesData = [this.props.history[2]];
|
||||
const parentalData = [this.props.history[3]];
|
||||
const safebrowsingData = [this.props.history[4]];
|
||||
|
||||
return (
|
||||
<div className="row">
|
||||
<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-blue">
|
||||
{dnsQueries}
|
||||
</div>
|
||||
<div className="card-title-stats">
|
||||
DNS Queries
|
||||
</div>
|
||||
</div>
|
||||
<div className="card-chart-bg">
|
||||
<Line data={queriesData} color={STATUS_COLORS.blue}/>
|
||||
</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-red">
|
||||
{blockedFiltering}
|
||||
</div>
|
||||
<div className="card-value card-value-percent text-red">
|
||||
{getPercent(dnsQueries, blockedFiltering)}
|
||||
</div>
|
||||
<div className="card-title-stats">
|
||||
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;
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -77,7 +77,7 @@
|
||||
}
|
||||
|
||||
.header-brand-img {
|
||||
height: 26px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 992px) {
|
||||
|
||||
@@ -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>
|
||||
|
Before Width: | Height: | Size: 3.4 KiB After Width: | Height: | Size: 4.2 KiB |
@@ -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: "%";
|
||||
}
|
||||
|
||||
30
client/src/components/ui/Cell.js
Normal file
30
client/src/components/ui/Cell.js
Normal file
@@ -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;
|
||||
@@ -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">
|
||||
<li className="list-inline-item">
|
||||
<a href="https://adguard.com/adguard-dns/overview.html" target="_blank" rel="noopener noreferrer">Homepage</a>
|
||||
</li>
|
||||
<li className="list-inline-item">
|
||||
<a href="https://github.com/AdguardTeam/AdguardDNS" target="_blank" rel="noopener noreferrer">Github</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="row align-items-center justify-content-center">
|
||||
<div className="col-auto">
|
||||
<ul className="list-inline text-center mb-0">
|
||||
<li className="list-inline-item">
|
||||
<a href="https://github.com/AdguardTeam/AdguardDNS" target="_blank" rel="noopener noreferrer">Homepage</a>
|
||||
</li>
|
||||
</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>
|
||||
|
||||
9
client/src/components/ui/Line.css
Normal file
9
client/src/components/ui/Line.css
Normal file
@@ -0,0 +1,9 @@
|
||||
.line__tooltip {
|
||||
padding: 2px 10px 7px;
|
||||
line-height: 1.1;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.line__tooltip-text {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
62
client/src/components/ui/Line.js
Normal file
62
client/src/components/ui/Line.js
Normal file
@@ -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;
|
||||
Reference in New Issue
Block a user