Merge pull request #77 in DNS/adguard-dns from fix/365 to master

* commit 'bdaea88bf0b79d84da717393a447f71bd78e3cff':
  Add "FAQ" link to the header
  more trackers
  fix url
  tooltip
  capitalize category name
  fix gitignore
  remove extra file
  Add trackers, rework some text
  Fix some UI issues, rename DNS->Home
This commit is contained in:
Andrey Meshkov 2018-10-15 14:46:18 +03:00
commit 82269bcf33
28 changed files with 2903 additions and 1408 deletions

2
.gitignore vendored
View File

@ -1,4 +1,6 @@
.DS_Store
.vscode
debug
/AdguardDNS
/AdguardDNS.yaml
/build/

2
app.go
View File

@ -18,7 +18,7 @@ import (
var VersionString = "undefined"
func main() {
log.Printf("AdGuard DNS web interface backend, version %s\n", VersionString)
log.Printf("AdGuard Home web interface backend, version %s\n", VersionString)
box := packr.NewBox("build/static")
{
executable, err := os.Executable()

View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="shortcut icon" href="https://adguard.com/img/favicons/favicon.ico">
<title>AdGuard DNS</title>
<title>AdGuard Home</title>
</head>
<body>
<noscript>

View File

@ -7,7 +7,7 @@ import Card from '../ui/Card';
import Cell from '../ui/Cell';
import Popover from '../ui/Popover';
import { getTrackerData } from '../../helpers/whotracksme';
import { getTrackerData } from '../../helpers/trackers/trackers';
import { getPercent } from '../../helpers/helpers';
import { STATUS_COLORS } from '../../helpers/constants';

View File

@ -7,7 +7,7 @@ import Card from '../ui/Card';
import Cell from '../ui/Cell';
import Popover from '../ui/Popover';
import { getTrackerData } from '../../helpers/whotracksme';
import { getTrackerData } from '../../helpers/trackers/trackers';
import { getPercent } from '../../helpers/helpers';
import { STATUS_COLORS } from '../../helpers/constants';

View File

@ -48,7 +48,7 @@ class Statistics extends Component {
{getPercent(dnsQueries, blockedFiltering)}
</div>
<div className="card-title-stats">
Blocked by Filters
Blocked by <a href="#filters">Filters</a>
</div>
</div>
<div className="card-chart-bg">

View File

@ -44,7 +44,7 @@ export default class UserRules extends Component {
domain and all its subdomains
</li>
<li>
<code>127.0.0.1 example.org</code> - AdGuard DNS will now return
<code>127.0.0.1 example.org</code> - AdGuard Home will now return
127.0.0.1 address for the example.org domain (but not its subdomains).
</li>
<li>

View File

@ -74,7 +74,7 @@ class Filters extends Component {
<div className="col-md-12">
<Card
title="Filters and hosts blocklists"
subtitle="AdGuard DNS understands basic adblock rules and hosts files syntax."
subtitle="AdGuard Home understands basic adblock rules and hosts files syntax."
>
<ReactTable
data={filters}

View File

@ -4,6 +4,8 @@ import PropTypes from 'prop-types';
import enhanceWithClickOutside from 'react-click-outside';
import classnames from 'classnames';
import { REPOSITORY } from '../../helpers/constants';
class Menu extends Component {
handleClickOutside = () => {
this.props.closeMenu();
@ -53,6 +55,12 @@ class Menu extends Component {
Query Log
</NavLink>
</li>
<li className="nav-item">
<a href={`${REPOSITORY.URL}/wiki`} className="nav-link" target="_blank" rel="noopener noreferrer">
<svg className="nav-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#66b574" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line></svg>
FAQ
</a>
</li>
</ul>
</div>
</Fragment>

View File

@ -6,7 +6,7 @@ import escapeRegExp from 'lodash/escapeRegExp';
import endsWith from 'lodash/endsWith';
import { formatTime } from '../../helpers/helpers';
import { getTrackerData } from '../../helpers/whotracksme';
import { getTrackerData } from '../../helpers/trackers/trackers';
import PageTitle from '../ui/PageTitle';
import Card from '../ui/Card';
import Loading from '../ui/Loading';

View File

@ -17,17 +17,17 @@ export default class Settings extends Component {
safebrowsing: {
enabled: false,
title: 'Use AdGuard browsing security web service',
subtitle: 'AdGuard DNS will check if domain is blacklisted by the browsing security web service. It will use privacy-friendly lookup API to perform the check: only a short prefix of the domain name SHA256 hash is sent to the server.',
subtitle: 'AdGuard Home will check if domain is blacklisted by the browsing security web service. It will use privacy-friendly lookup API to perform the check: only a short prefix of the domain name SHA256 hash is sent to the server.',
},
parental: {
enabled: false,
title: 'Use AdGuard parental control web service',
subtitle: 'AdGuard DNS will check if domain contains adult materials. It uses the same privacy-friendly API as the browsing security web service.',
subtitle: 'AdGuard Home will check if domain contains adult materials. It uses the same privacy-friendly API as the browsing security web service.',
},
safesearch: {
enabled: false,
title: 'Enforce safe search',
subtitle: 'AdGuard DNS can enforce safe search in the following search engines: Google, Bing, Yandex.',
subtitle: 'AdGuard Home can enforce safe search in the following search engines: Google, Bing, Yandex.',
},
};

View File

@ -1,4 +1,5 @@
import React, { Component } from 'react';
import { REPOSITORY } from '../../helpers/constants';
class Footer extends Component {
getYear = () => {
@ -10,26 +11,26 @@ class Footer extends Component {
return (
<footer className="footer">
<div className="container">
<div className="row align-items-center flex-row-reverse">
<div className="col-12 col-lg-auto ml-lg-auto">
<div className="row align-items-center flex-row">
<div className="col-12 col-lg-auto mt-3 mt-lg-0 text-center">
<div className="row align-items-center justify-content-center">
<div className="col-auto">
Copyright © {this.getYear()} <a href="https://adguard.com/">AdGuard</a>
</div>
<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>
<a href={REPOSITORY.URL} 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">
<a href={`${REPOSITORY.URL}/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">
Copyright © {this.getYear()} <a href="https://adguard.com/">AdGuard</a>.
</div>
</div>
</div>
</footer>

View File

@ -36,7 +36,9 @@ const Line = props => (
{slice.data.map(d => (
<div key={d.serie.id} className="line__tooltip">
<span className="line__tooltip-text">
{d.data.y}
<strong>{d.data.y}</strong>
<br/>
<small>{d.data.x}</small>
</span>
</div>
))}

View File

@ -76,7 +76,6 @@
}
.popover__link {
font-size: 0.7rem;
color: #66b586;
}

View File

@ -1,5 +1,7 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { getSourceData } from '../../helpers/trackers/trackers';
import { captitalizeWords } from '../../helpers/helpers';
import './Popover.css';
@ -7,6 +9,22 @@ class Popover extends Component {
render() {
const { data } = this.props;
const sourceData = getSourceData(data);
const source = (
<div className="popover__list-item">
Source: <a className="popover__link" target="_blank" rel="noopener noreferrer" href={sourceData.url}><strong>{sourceData.name}</strong></a>
</div>
);
const tracker = (
<div className="popover__list-item">
Name: <a className="popover__link" target="_blank" rel="noopener noreferrer" href={data.url}><strong>{data.name}</strong></a>
</div>
);
const categoryName = captitalizeWords(data.category);
return (
<div className="popover-wrap">
<div className="popover__trigger">
@ -15,17 +33,13 @@ class Popover extends Component {
<div className="popover__body">
<div className="popover__list">
<div className="popover__list-title">
This domain belongs to a known tracker.
Found in the known domains database.
</div>
{tracker}
<div className="popover__list-item">
Name: <strong>{data.name}</strong>
</div>
<div className="popover__list-item">
Category: <strong>{data.category}</strong>
</div>
<div className="popover__list-item">
<a href={`https://whotracks.me/trackers/${data.id}.html`} className="popover__link" target="_blank" rel="noopener noreferrer">More information on Whotracksme</a>
Category: <strong>{categoryName}</strong>
</div>
{source}
</div>
</div>
</div>

View File

@ -7,10 +7,10 @@ const Status = props => (
<div className="status">
<Card bodyType="card-body card-body--status">
<div className="h4 font-weight-light mb-4">
You are currently not using AdGuard DNS
You are currently not using AdGuard Home
</div>
<button className="btn btn-success" onClick={props.handleStatusChange}>
Enable AdGuard DNS
Enable AdGuard Home
</button>
</Card>
</div>

View File

@ -15,3 +15,8 @@ export const STATUS_COLORS = {
green: '#5eba00',
yellow: '#f1c40f',
};
export const REPOSITORY = {
URL: 'https://github.com/AdguardTeam/AdguardDNS',
TRACKERS_DB: 'https://github.com/AdguardTeam/AdguardDNS/tree/master/client/src/helpers/trackers/adguard.json',
};

View File

@ -81,3 +81,5 @@ export const getPercent = (amount, number) => {
}
return 0;
};
export const captitalizeWords = text => text.split(/[ -_]/g).map(str => str.charAt(0).toUpperCase() + str.substr(1)).join(' ');

View File

@ -0,0 +1,77 @@
{
"timeUpdated": "2018-10-14",
"categories": {
"0": "audio_video_player",
"1": "comments",
"2": "customer_interaction",
"3": "pornvertising",
"4": "advertising",
"5": "essential",
"6": "site_analytics",
"7": "social_media",
"8": "misc",
"9": "cdn",
"10": "hosting",
"11": "unknown",
"12": "extensions",
"101": "mobile_analytics"
},
"trackers": {
"facebook_audience": {
"name": "Facebook Audience Network",
"categoryId": 4,
"url": "https://www.facebook.com/business/products/audience-network"
},
"crashlytics": {
"name": "Crashlytics",
"categoryId": 101,
"url": "https://crashlytics.com/"
},
"flurry": {
"name": "Flurry",
"categoryId": 101,
"url": "http://www.flurry.com/"
},
"hockeyapp": {
"name": "HockeyApp",
"categoryId": 101,
"url": "https://hockeyapp.net/"
},
"firebase": {
"name": "Firebase",
"categoryId": 101,
"url": "https://firebase.google.com/"
},
"appsflyer": {
"name": "AppsFlyer",
"categoryId": 101,
"url": "https://www.appsflyer.com/"
},
"yandex_appmetrica": {
"name": "Yandex AppMetrica",
"categoryId": 101,
"url": "https://appmetrica.yandex.com/"
},
"adjust": {
"name": "Adjust",
"categoryId": 101,
"url": "https://www.adjust.com/"
},
"branch": {
"name": "Branch.io",
"categoryId": 101,
"url": "https://branch.io/"
}
},
"trackerDomains": {
"graph.facebook.com": "facebook_audience",
"crashlytics.com": "crashlytics",
"flurry.com": "flurry",
"hockeyapp.net": "hockeyapp",
"app-measurement.com": "firebase",
"appsflyer.com": "appsflyer",
"appmetrica.yandex.com": "yandex_appmetrica",
"adjust.com": "adjust",
"mobileapptracking.com": "branch"
}
}

View File

@ -0,0 +1,103 @@
import whotracksmeDb from './whotracksme.json';
import adguardDb from './adguard.json';
import { REPOSITORY } from '../constants';
/**
@typedef TrackerData
@type {object}
@property {string} id - tracker ID.
@property {string} name - tracker name.
@property {string} url - tracker website url.
@property {number} category - tracker category.
@property {source} source - tracker data source.
*/
/**
* Tracker data sources
*/
export const sources = {
WHOTRACKSME: 1,
ADGUARD: 2,
};
/**
* Gets tracker data in the specified database
*
* @param {String} domainName domain name to check
* @param {*} trackersDb trackers database
* @param {number} source source ID
* @returns {TrackerData} tracker data or null if no matching tracker found
*/
const getTrackerDataFromDb = (domainName, trackersDb, source) => {
if (!domainName) {
return null;
}
const parts = domainName.split(/\./g).reverse();
let hostToCheck = '';
// Check every subdomain
for (let i = 0; i < parts.length; i += 1) {
hostToCheck = parts[i] + (i > 0 ? '.' : '') + hostToCheck;
const trackerId = trackersDb.trackerDomains[hostToCheck];
if (trackerId) {
const trackerData = trackersDb.trackers[trackerId];
const categoryName = trackersDb.categories[trackerData.categoryId];
return {
id: trackerId,
name: trackerData.name,
url: trackerData.url,
category: categoryName,
source,
};
}
}
// No tracker found for the specified domain
return null;
};
/**
* Gets the source metadata for the specified tracker
* @param {TrackerData} trackerData tracker data
*/
export const getSourceData = (trackerData) => {
if (!trackerData || !trackerData.source) {
return null;
}
if (trackerData.source === sources.WHOTRACKSME) {
return {
name: 'Whotracks.me',
url: `https://whotracks.me/trackers/${trackerData.id}.html`,
};
} else if (trackerData.source === sources.ADGUARD) {
return {
name: 'AdGuard',
url: REPOSITORY.TRACKERS_DB,
};
}
return null;
};
/**
* Gets tracker data from the trackers database
*
* @param {String} domainName domain name to check
* @returns {TrackerData} tracker data or null if no matching tracker found
*/
export const getTrackerData = (domainName) => {
if (!domainName) {
return null;
}
let data = getTrackerDataFromDb(domainName, adguardDb, sources.ADGUARD);
if (!data) {
data = getTrackerDataFromDb(domainName, whotracksmeDb, sources.WHOTRACKSME);
}
return data;
};

View File

@ -1,44 +0,0 @@
import trackersDb from './whotracksmedb.json';
/**
@typedef TrackerData
@type {object}
@property {string} id - tracker ID.
@property {string} name - tracker name.
@property {number} category - tracker category.
*/
/**
* Gets tracker data in the whotracksme database
*
* @param {String} domainName domain name to check
* @returns {TrackerData} tracker data or null if no matching tracker found
*/
export const getTrackerData = (domainName) => {
if (!domainName) {
return null;
}
const parts = domainName.split(/\./g).reverse();
let hostToCheck = '';
// Check every subdomain
for (let i = 0; i < parts.length; i += 1) {
hostToCheck = parts[i] + (i > 0 ? '.' : '') + hostToCheck;
const trackerId = trackersDb.trackerDomains[hostToCheck];
if (trackerId) {
const trackerData = trackersDb.trackers[trackerId];
const categoryName = trackersDb.categories[trackerData.categoryId];
return {
id: trackerId,
name: trackerData.name,
category: categoryName,
};
}
}
// No tracker found for the specified domain
return null;
};

View File

@ -29,7 +29,7 @@
| Description | Value |
| -------------- | ------------ |
| Version of AdGuard DNS server:| (e.g. v1.0)
| Version of AdGuard Home server:| (e.g. v1.0)
| How did you setup DNS configuration:| (System/Router/IoT)
| If it's a router or IoT, please write device model:| (e.g. Raspberry Pi 3 Model B)
| Operating system and version:| (e.g. Ubuntu 18.04.1)

View File

@ -1,7 +1,7 @@
swagger: '2.0'
info:
title: 'AdGuard DNS'
description: 'Control AdGuard DNS server with this API'
title: 'AdGuard Home'
description: 'Control AdGuard Home server with this API'
version: 0.0.0
basePath: /control
schemes:

View File

@ -1,2 +1,2 @@
node_modules
whotracksmedb.json
whotracksme.json

View File

@ -6,7 +6,7 @@ A simple script that converts the Ghostery/Cliqz trackers database to a json for
```
yarn install
yarn index.js
node index.js
```
You'll find the output in the `whotracksmedb.json` file.

View File

@ -3,7 +3,7 @@ const sqlite3 = require('sqlite3').verbose();
const downloadFileSync = require('download-file-sync');
const INPUT_SQL_URL = 'https://raw.githubusercontent.com/cliqz-oss/whotracks.me/master/whotracksme/data/assets/trackerdb.sql';
const OUTPUT_PATH = 'whotracksmedb.json';
const OUTPUT_PATH = 'whotracksme.json';
console.log('Downloading ' + INPUT_SQL_URL);
let trackersDbSql = downloadFileSync(INPUT_SQL_URL).toString();
@ -50,7 +50,8 @@ db.serialize(function() {
whotracksme.trackers[row.id] = {
"name": row.name,
"categoryId": row.category_id
"categoryId": row.category_id,
"url": row.website_url
};
});