Add "block" and "unblock" buttons to the Query Log

This commit is contained in:
Ildar Kamalov 2018-09-28 16:30:52 +03:00
parent d7039d9222
commit c40f7b4d5c
4 changed files with 109 additions and 7 deletions
client/src/components/Logs

View file

@ -1,7 +1,9 @@
import React, { Component } from 'react';
import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';
import ReactTable from 'react-table';
import { saveAs } from 'file-saver/FileSaver';
import escapeRegExp from 'lodash/escapeRegExp';
import endsWith from 'lodash/endsWith';
import PageTitle from '../ui/PageTitle';
import Card from '../ui/Card';
import Loading from '../ui/Loading';
@ -13,6 +15,7 @@ const DOWNLOAD_LOG_FILENAME = 'dns-logs.txt';
class Logs extends Component {
componentDidMount() {
this.getLogs();
this.props.getFilteringStatus();
}
componentDidUpdate(prevProps) {
@ -36,6 +39,48 @@ class Logs extends Component {
return '';
}
toggleBlocking = (type, domain) => {
const { userRules } = this.props.filtering;
const lineEnding = !endsWith(userRules, '\n') ? '\n' : '';
let blockingRule = `@@||${domain}^$important`;
let unblockingRule = `||${domain}^$important`;
if (type === 'unblock') {
blockingRule = `||${domain}^$important`;
unblockingRule = `@@||${domain}^$important`;
}
const preparedBlockingRule = new RegExp(`(^|\n)${escapeRegExp(blockingRule)}($|\n)`);
const preparedUnblockingRule = new RegExp(`(^|\n)${escapeRegExp(unblockingRule)}($|\n)`);
if (userRules.match(preparedBlockingRule)) {
this.props.setRules(userRules.replace(`${blockingRule}`, ''));
this.props.addSuccessToast(`Removing rule from custom list: ${blockingRule}`);
} else if (!userRules.match(preparedUnblockingRule)) {
this.props.setRules(`${userRules}${lineEnding}${unblockingRule}\n`);
this.props.addSuccessToast(`Adding rule to custom list: ${unblockingRule}`);
}
this.props.getFilteringStatus();
}
renderBlockingButton(isFiltered, domain) {
const buttonClass = isFiltered ? 'btn-outline-secondary' : 'btn-outline-danger';
const buttonText = isFiltered ? 'Unblock' : 'Block';
return (
<div className="logs__action">
<button
type="button"
className={`btn btn-sm ${buttonClass}`}
onClick={() => this.toggleBlocking(buttonText.toLowerCase(), domain)}
>
{buttonText}
</button>
</div>
);
}
renderLogs(logs) {
const columns = [{
Header: 'Time',
@ -85,14 +130,14 @@ class Logs extends Component {
(<li key={index} title={response}>{response}</li>));
return (
<div className="logs__row">
{ this.renderTooltip(isFiltered, rule)}
{this.renderTooltip(isFiltered, rule)}
<ul className="list-unstyled">{liNodes}</ul>
</div>
);
}
return (
<div className="logs__row">
{ this.renderTooltip(isFiltered, rule) }
{this.renderTooltip(isFiltered, rule)}
<span>Empty</span>
</div>
);
@ -101,11 +146,25 @@ class Logs extends Component {
Header: 'Client',
accessor: 'client',
maxWidth: 250,
Cell: (row) => {
const { reason } = row.original;
const isFiltered = row ? reason.indexOf('Filtered') === 0 : false;
return (
<Fragment>
<div className="logs__row">
{row.value}
</div>
{this.renderBlockingButton(isFiltered, row.original.domain)}
</Fragment>
);
},
},
];
if (logs) {
return (<ReactTable
className='logs__table'
data={logs}
columns={columns}
showPagination={false}
@ -187,6 +246,11 @@ Logs.propTypes = {
dashboard: PropTypes.object,
toggleLogStatus: PropTypes.func,
downloadQueryLog: PropTypes.func,
getFilteringStatus: PropTypes.func,
filtering: PropTypes.object,
userRules: PropTypes.string,
setRules: PropTypes.func,
addSuccessToast: PropTypes.func,
};
export default Logs;