Add trackers, rework some text

client/src/components/Dashboard/BlockedDomains.js

@@ -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';
 

client/src/components/Dashboard/QueriedDomains.js

@@ -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';
 

client/src/components/Logs/index.js

@@ -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';

client/src/components/ui/Footer.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import { REPOSITORY } from '../../helpers/constants';
 
 class Footer extends Component {
     getYear = () => {
@@ -19,12 +20,12 @@ class Footer extends Component {
                                 <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>

client/src/components/ui/Popover.css

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

client/src/components/ui/Popover.js

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

client/src/helpers/constants.js

@@ -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',
+};

client/src/helpers/trackers/adguard.json

@@ -0,0 +1,59 @@
+{
+    "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/news/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/"
+        }
+    },
+    "trackerDomains": {
+        "graph.facebook.com": "facebook_audience",
+        "crashlytics.com": "crashlytics",
+        "flurry.com": "flurry",
+        "hockeyapp.net": "hockeyapp",
+        "app-measurement.com": "firebase",
+        "appsflyer.com": "appsflyer"
+    }
+}

client/src/helpers/trackers/trackers.js

@@ -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;
+};

client/src/helpers/whotracksme.js

@@ -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;
-};

scripts/whotracksme/README.md

@@ -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.

scripts/whotracksme/index.js

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