From f3fa497af3869279000e801edcae35db6fcb6dbf Mon Sep 17 00:00:00 2001 From: Ildar Kamalov Date: Tue, 30 Oct 2018 17:27:47 +0300 Subject: [PATCH] Added filter name to popover --- client/src/components/Logs/index.js | 27 ++++++++++++++----- client/src/components/ui/Popover.css | 19 ++++++++++++- client/src/components/ui/PopoverFilter.js | 33 +++++++++++++++++++++++ client/src/helpers/helpers.js | 6 +++-- 4 files changed, 76 insertions(+), 9 deletions(-) create mode 100644 client/src/components/ui/PopoverFilter.js diff --git a/client/src/components/Logs/index.js b/client/src/components/Logs/index.js index b533f190..6bb062f7 100644 --- a/client/src/components/Logs/index.js +++ b/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 && ); + return (isFiltered && ); } 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 (
- {this.renderTooltip(isFiltered, rule)} {parsedFilteredReason} + {this.renderTooltip(isFiltered, rule, filterName)}
); } @@ -132,17 +145,19 @@ class Logs extends Component { if (responses.length > 0) { const liNodes = responses.map((response, index) => (
  • {response}
    • )); + const isRenderTooltip = reason === 'NotFilteredWhiteList'; + return (
    - {this.renderTooltip(isFiltered, rule)}
      {liNodes}
    + {this.renderTooltip(isRenderTooltip, rule, filterName)}
    ); } return (
    - {this.renderTooltip(isFiltered, rule)} Empty + {this.renderTooltip(isFiltered, rule, filterName)}
    ); }, diff --git a/client/src/components/ui/Popover.css b/client/src/components/ui/Popover.css index cdaf5fe6..dc83e4cb 100644 --- a/client/src/components/ui/Popover.css +++ b/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; } diff --git a/client/src/components/ui/PopoverFilter.js b/client/src/components/ui/PopoverFilter.js new file mode 100644 index 00000000..9eb041dc --- /dev/null +++ b/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 ( +
    +
    + +
    +
    +
    +
    + Rule: {this.props.rule} +
    + {this.props.filter &&
    + Filter: {this.props.filter} +
    } +
    +
    +
    + ); + } +} + +PopoverFilter.propTypes = { + rule: PropTypes.string.isRequired, + filter: PropTypes.string, +}; + +export default PopoverFilter; diff --git a/client/src/helpers/helpers.js b/client/src/helpers/helpers.js index e2e46230..870d320f 100644 --- a/client/src/helpers/helpers.js +++ b/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') : '';