mirrors/AdGuardHome
1
0
Fork 0
mirror of https://github.com/AdguardTeam/AdGuardHome.git synced 2024-11-22 13:05:36 +03:00
Code Issues Projects Releases Packages Wiki Activity

Added filter name to popover

Browse source
This commit is contained in:
Ildar Kamalov 2018-10-30 17:27:47 +03:00
parent 0e065a2e61
commit f3fa497af3
4 changed files with 76 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
client/src/components/Logs/index.js
View file

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

19
client/src/components/ui/Popover.css
View file

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

33
client/src/components/ui/PopoverFilter.js Normal file
View file

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

6
client/src/helpers/helpers.js
View file

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