Add whotracksme info popover

Closes #364

client/src/components/Dashboard/BlockedDomains.js

@@ -5,7 +5,9 @@ import map from 'lodash/map';
 
 import Card from '../ui/Card';
 import Cell from '../ui/Cell';
+import Popover from '../ui/Popover';
 
+import { getTrackerData } from '../../helpers/whotracksme';
 import { getPercent } from '../../helpers/helpers';
 import { STATUS_COLORS } from '../../helpers/constants';
 
@@ -13,7 +15,19 @@ 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>),
+        Cell: (row) => {
+            const { value } = row;
+            const trackerData = getTrackerData(value);
+
+            return (
+                <div className="logs__row" title={value}>
+                    <div className="logs__text">
+                        {value}
+                    </div>
+                    {trackerData && <Popover data={trackerData} />}
+                </div>
+            );
+        },
     }, {
         Header: 'Requests count',
         accessor: 'domain',
@@ -43,7 +57,7 @@ class BlockedDomains extends Component {
                     showPagination={false}
                     noDataText="No domains found"
                     minRows={6}
-                    className="-striped -highlight card-table-overflow"
+                    className="-striped -highlight card-table-overflow stats__table"
                 />
             </Card>
         );

client/src/components/Dashboard/Dashboard.css

@@ -0,0 +1,22 @@
+.stats__table .popover__body {
+    left: 0;
+    transform: none;
+}
+
+.stats__table .popover__body:after {
+    left: 13px;
+}
+
+.stats__table .rt-tr-group:first-child .popover__body,
+.stats__table .rt-tr-group:nth-child(2) .popover__body {
+    top: calc(100% + 5px);
+    bottom: initial;
+    z-index: 1;
+}
+
+.stats__table .rt-tr-group:first-child .popover__body:after,
+.stats__table .rt-tr-group:nth-child(2) .popover__body:after {
+    top: -11px;
+    border-top: 6px solid transparent;
+    border-bottom: 6px solid #585965;
+}

client/src/components/Dashboard/QueriedDomains.js

@@ -5,7 +5,9 @@ import map from 'lodash/map';
 
 import Card from '../ui/Card';
 import Cell from '../ui/Cell';
+import Popover from '../ui/Popover';
 
+import { getTrackerData } from '../../helpers/whotracksme';
 import { getPercent } from '../../helpers/helpers';
 import { STATUS_COLORS } from '../../helpers/constants';
 
@@ -22,7 +24,19 @@ class QueriedDomains 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>),
+        Cell: (row) => {
+            const { value } = row;
+            const trackerData = getTrackerData(value);
+
+            return (
+                <div className="logs__row" title={value}>
+                    <div className="logs__text">
+                        {value}
+                    </div>
+                    {trackerData && <Popover data={trackerData} />}
+                </div>
+            );
+        },
     }, {
         Header: 'Requests count',
         accessor: 'count',
@@ -47,7 +61,7 @@ class QueriedDomains extends Component {
                     showPagination={false}
                     noDataText="No domains found"
                     minRows={6}
-                    className="-striped -highlight card-table-overflow"
+                    className="-striped -highlight card-table-overflow stats__table"
                 />
             </Card>
         );

client/src/components/Dashboard/index.js

@@ -10,6 +10,7 @@ import BlockedDomains from './BlockedDomains';
 
 import PageTitle from '../ui/PageTitle';
 import Loading from '../ui/Loading';
+import './Dashboard.css';
 
 class Dashboard extends Component {
     componentDidMount() {

client/src/components/Logs/Logs.css

@@ -60,6 +60,18 @@
     border-bottom: 6px solid #585965;
 }
 
+.logs__table .rt-tr-group:first-child .popover__body {
+    top: calc(100% + 5px);
+    bottom: initial;
+    z-index: 1;
+}
+
+.logs__table .rt-tr-group:first-child .popover__body:after {
+    top: -11px;
+    border-top: 6px solid transparent;
+    border-bottom: 6px solid #585965;
+}
+
 .logs__table .rt-thead.-filters input,
 .logs__table .rt-thead.-filters select {
     padding: 6px 7px;

client/src/components/Logs/index.js

@@ -6,10 +6,12 @@ import escapeRegExp from 'lodash/escapeRegExp';
 import endsWith from 'lodash/endsWith';
 
 import { formatTime } from '../../helpers/helpers';
+import { getTrackerData } from '../../helpers/whotracksme';
 import PageTitle from '../ui/PageTitle';
 import Card from '../ui/Card';
 import Loading from '../ui/Loading';
 import Tooltip from '../ui/Tooltip';
+import Popover from '../ui/Popover';
 import './Logs.css';
 
 const DOWNLOAD_LOG_FILENAME = 'dns-logs.txt';
@@ -91,12 +93,14 @@ class Logs extends Component {
             accessor: 'domain',
             Cell: (row) => {
                 const response = row.value;
+                const trackerData = getTrackerData(response);
 
                 return (
-                    <div className="logs__row logs__row--overflow" title={response}>
+                    <div className="logs__row" title={response}>
                         <div className="logs__text">
                             {response}
                         </div>
+                        {trackerData && <Popover data={trackerData}/>}
                     </div>
                 );
             },

client/src/components/ui/Popover.css

@@ -0,0 +1,86 @@
+.popover-wrap {
+    position: relative;
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.popover__trigger {
+    position: relative;
+    top: 3px;
+    margin: 0 8px;
+    cursor: pointer;
+}
+
+.popover__trigger:after {
+    content: "";
+    position: absolute;
+    top: -6px;
+    left: -3px;
+    width: 26px;
+    height: 24px;
+}
+
+.popover__body {
+    content: "";
+    display: flex;
+    position: absolute;
+    min-width: 275px;
+    bottom: calc(100% + 3px);
+    left: 50%;
+    padding: 10px 15px;
+    font-size: 0.8rem;
+    white-space: normal;
+    color: #fff;
+    background-color: #585965;
+    border-radius: 3px;
+    transition: opacity 0.2s ease-in-out, visibility  0.2s ease-in-out;
+    transform: translateX(-50%);
+    visibility: hidden;
+    opacity: 0;
+}
+
+.popover__body:after {
+    content: "";
+    position: absolute;
+    bottom: -5px;
+    left: calc(50% - 6px);
+    width: 0;
+    height: 0;
+    border-left: 6px solid transparent;
+    border-right: 6px solid transparent;
+    border-top: 6px solid #585965;
+}
+
+.popover__trigger:hover + .popover__body,
+.popover__body:hover {
+    visibility: visible;
+    opacity: 1;
+}
+
+.popover__icon {
+    width: 20px;
+    height: 20px;
+    stroke: #9aa0ac;
+}
+
+.popover__list-title {
+    margin-bottom: 3px;
+}
+
+.popover__list-item {
+    margin-bottom: 2px;
+}
+
+.popover__list-item:last-child {
+    margin-bottom: 0;
+}
+
+.popover__link {
+    font-size: 0.7rem;
+    color: #66b586;
+}
+
+.popover__link:hover,
+.popover__link:focus {
+    color: #66b586;
+}

client/src/components/ui/Popover.js

@@ -0,0 +1,40 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import './Popover.css';
+
+class Popover extends Component {
+    render() {
+        const { data } = this.props;
+
+        return (
+            <div className="popover-wrap">
+                <div className="popover__trigger">
+                    <svg className="popover__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
+                </div>
+                <div className="popover__body">
+                    <div className="popover__list">
+                        <div className="popover__list-title">
+                            This domain belongs to a known tracker.
+                        </div>
+                        <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>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+Popover.propTypes = {
+    data: PropTypes.object.isRequired,
+};
+
+export default Popover;

client/src/components/ui/ReactTable.css

@@ -4,6 +4,10 @@
     overflow: visible;
 }
 
+.ReactTable .rt-tbody {
+    overflow: visible;
+}
+
 .rt-tr-group .red {
     background-color: #fff4f2;
 }

client/src/components/ui/Tooltip.css

@@ -16,7 +16,7 @@
     content: attr(data-tooltip);
     display: block;
     position: absolute;
-    bottom: calc(100% + 12px);
+    bottom: calc(100% + 10px);
     left: 50%;
     padding: 10px 15px;
     font-size: 0.85rem;
@@ -32,7 +32,7 @@
 .tooltip-custom:after {
     content: "";
     position: relative;
-    top: -9px;
+    top: -7px;
     left: calc(50% - 6px);
     visibility: hidden;
     opacity: 0;

client/src/components/ui/Tooltip.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import './Tooltip.css';
 
 const Tooltip = props => (
-    <div data-tooltip={props.text} className={`tooltip-custom ${props.type}`}></div>
+    <div data-tooltip={props.text} className={`tooltip-custom ${props.type || ''}`}></div>
 );
 
 Tooltip.propTypes = {

client/src/helpers/whotracksme.js

@@ -5,7 +5,7 @@ import trackersDb from './whotracksmedb.json';
   @type {object}
   @property {string} id - tracker ID.
   @property {string} name - tracker name.
-  @property {number} age - tracker category.
+  @property {number} category - tracker category.
  */
 
 /**
@@ -22,9 +22,9 @@ export const getTrackerData = (domainName) => {
     const parts = domainName.split(/\./g).reverse();
     let hostToCheck = '';
 
-    // Check every subdomain except the TLD
+    // Check every subdomain
-    for (let i = 1; i < parts.length; i += 1) {
+    for (let i = 0; i < parts.length; i += 1) {
-        hostToCheck = hostToCheck + (i > 0 ? '.' : '') + parts[i];
+        hostToCheck = parts[i] + (i > 0 ? '.' : '') + hostToCheck;
         const trackerId = trackersDb.trackerDomains[hostToCheck];
 
         if (trackerId) {