Added filter name to popover

client/src/components/Logs/index.js

@@ -10,7 +10,7 @@ import { getTrackerData } from '../../helpers/trackers/trackers';
 import PageTitle from '../ui/PageTitle';
 import Card from '../ui/Card';
 import Loading from '../ui/Loading';
-import Tooltip from '../ui/Tooltip';
+import PopoverFiltered from '../ui/PopoverFilter';
 import Popover from '../ui/Popover';
 import './Logs.css';
 
@@ -36,9 +36,9 @@ class Logs extends Component {
         }
     }
 
-    renderTooltip(isFiltered, rule) {
+    renderTooltip(isFiltered, rule, filter) {
         if (rule) {
-            return (isFiltered && <Tooltip text={rule}/>);
+            return (isFiltered && <PopoverFiltered rule={rule} filter={filter}/>);
         }
         return '';
     }
@@ -117,14 +117,27 @@ class Logs extends Component {
                 const isFiltered = row ? reason.indexOf('Filtered') === 0 : false;
                 const parsedFilteredReason = reason.replace('Filtered', 'Filtered by ');
                 const rule = row && row.original && row.original.rule;
+                const { filterId } = row.original;
+                const { filters } = this.props.filtering;
+                let filterName = '';
+
+                if (reason === 'FilteredBlackList' || reason === 'NotFilteredWhiteList') {
+                    if (filterId === 0) {
+                        filterName = 'Custom filtering rules';
+                    } else {
+                        const filterItem = Object.keys(filters)
+                            .filter(key => filters[key].id === filterId);
+                        filterName = filters[filterItem].name;
+                    }
+                }
 
                 if (isFiltered) {
                     return (
                         <div className="logs__row">
-                            {this.renderTooltip(isFiltered, rule)}
                             <span className="logs__text" title={parsedFilteredReason}>
                                 {parsedFilteredReason}
                             </span>
+                            {this.renderTooltip(isFiltered, rule, filterName)}
                         </div>
                     );
                 }
@@ -132,17 +145,19 @@ class Logs extends Component {
                 if (responses.length > 0) {
                     const liNodes = responses.map((response, index) =>
                         (<li key={index} title={response}>{response}</li>));
+                    const isRenderTooltip = reason === 'NotFilteredWhiteList';
+
                     return (
                         <div className="logs__row">
-                            {this.renderTooltip(isFiltered, rule)}
                             <ul className="list-unstyled">{liNodes}</ul>
+                            {this.renderTooltip(isRenderTooltip, rule, filterName)}
                         </div>
                     );
                 }
                 return (
                     <div className="logs__row">
-                        {this.renderTooltip(isFiltered, rule)}
                         <span>Empty</span>
+                        {this.renderTooltip(isFiltered, rule, filterName)}
                     </div>
                 );
             },

client/src/components/ui/Popover.css

@@ -1,7 +1,9 @@
 .popover-wrap {
     position: relative;
+    top: 1px;
     display: inline-block;
     vertical-align: middle;
+    align-self: flex-start;
 }
 
 .popover__trigger {
@@ -24,9 +26,9 @@
     content: "";
     display: flex;
     position: absolute;
-    min-width: 275px;
     bottom: calc(100% + 3px);
     left: 50%;
+    min-width: 275px;
     padding: 10px 15px;
     font-size: 0.8rem;
     white-space: normal;
@@ -39,6 +41,10 @@
     opacity: 0;
 }
 
+.popover__body--filter {
+    min-width: 100%;
+}
+
 .popover__body:after {
     content: "";
     position: absolute;
@@ -63,6 +69,10 @@
     stroke: #9aa0ac;
 }
 
+.popover__icon--green {
+    stroke: #66b574;
+}
+
 .popover__list-title {
     margin-bottom: 3px;
 }
@@ -71,6 +81,13 @@
     margin-bottom: 2px;
 }
 
+.popover__list-item--nowrap {
+    max-width: 300px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
 .popover__list-item:last-child {
     margin-bottom: 0;
 }

client/src/components/ui/PopoverFilter.js

@@ -0,0 +1,33 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import './Popover.css';
+
+class PopoverFilter extends Component {
+    render() {
+        return (
+            <div className="popover-wrap">
+                <div className="popover__trigger popover__trigger--filter">
+                    <svg className="popover__icon popover__icon--green" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" 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>
+                </div>
+                <div className="popover__body popover__body--filter">
+                    <div className="popover__list">
+                        <div className="popover__list-item popover__list-item--nowrap">
+                            Rule: <strong>{this.props.rule}</strong>
+                        </div>
+                        {this.props.filter && <div className="popover__list-item popover__list-item--nowrap">
+                            Filter: <strong>{this.props.filter}</strong>
+                        </div>}
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+PopoverFilter.propTypes = {
+    rule: PropTypes.string.isRequired,
+    filter: PropTypes.string,
+};
+
+export default PopoverFilter;

client/src/helpers/helpers.js

@@ -18,6 +18,7 @@ export const normalizeLogs = logs => logs.map((log) => {
         answer: response,
         reason,
         client,
+        filterId,
         rule,
     } = log;
     const { host: domain, type } = question;
@@ -32,6 +33,7 @@ export const normalizeLogs = logs => logs.map((log) => {
         response: responsesArray,
         reason,
         client,
+        filterId,
         rule,
     };
 });
@@ -64,11 +66,11 @@ export const normalizeFilteringStatus = (filteringStatus) => {
     const { enabled, filters, user_rules: userRules } = filteringStatus;
     const newFilters = filters ? filters.map((filter) => {
         const {
-            url, enabled, lastUpdated: lastUpdated = Date.now(), name = 'Default name', rulesCount: rulesCount = 0,
+            id, url, enabled, lastUpdated: lastUpdated = Date.now(), name = 'Default name', rulesCount: rulesCount = 0,
         } = filter;
 
         return {
-            url, enabled, lastUpdated: formatTime(lastUpdated), name, rulesCount,
+            id, url, enabled, lastUpdated: formatTime(lastUpdated), name, rulesCount,
         };
     }) : [];
     const newUserRules = Array.isArray(userRules) ? userRules.join('\n') : '';