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() {