Add query log filtering

Closes #322
This commit is contained in:
Ildar Kamalov 2018-10-02 18:14:41 +03:00
parent 0c3c8dba9b
commit d7596fe860
3 changed files with 65 additions and 20 deletions

View File

@ -26,7 +26,7 @@ class Dashboard extends Component {
getToggleFilteringButton = () => {
const { isFilteringEnabled } = this.props.dashboard;
const buttonText = isFilteringEnabled ? 'Disable' : 'Enable';
const buttonClass = isFilteringEnabled ? 'btn-outline-secondary' : 'btn-outline-success';
const buttonClass = isFilteringEnabled ? 'btn-gray' : 'btn-success';
return (
<button type="button" className={`btn btn-sm mr-2 ${buttonClass}`} onClick={() => this.props.toggleFiltering(isFilteringEnabled)}>

View File

@ -59,3 +59,19 @@
border-top: 6px solid transparent;
border-bottom: 6px solid #585965;
}
.logs__table .rt-thead.-filters input,
.logs__table .rt-thead.-filters select {
padding: 6px 7px;
border-radius: 3px;
font-size: 0.9375rem;
line-height: 1.6;
color: #495057;
border: 1px solid rgba(0, 40, 100, 0.12);
}
.logs__table .rt-thead.-filters input:focus,
.logs__table .rt-thead.-filters select:focus {
border-color: #1991eb;
box-shadow: 0 0 0 2px rgba(70, 127, 207, 0.25);
}

View File

@ -86,6 +86,7 @@ class Logs extends Component {
Header: 'Time',
accessor: 'time',
maxWidth: 110,
filterable: false,
}, {
Header: 'Domain name',
accessor: 'domain',
@ -142,6 +143,21 @@ class Logs extends Component {
</div>
);
},
filterMethod: (filter, row) => {
if (filter.value === 'filtered') {
return row.originalRow.reason.indexOf('Filtered') === 0;
}
return true;
},
Filter: ({ filter, onChange }) =>
<select
onChange={event => onChange(event.target.value)}
className="form-control"
value={filter ? filter.value : 'all'}
>
<option value="all">Show all</option>
<option value="filtered">Show filtered</option>
</select>,
}, {
Header: 'Client',
accessor: 'client',
@ -165,12 +181,14 @@ class Logs extends Component {
if (logs) {
return (<ReactTable
className='logs__table'
filterable
data={logs}
columns={columns}
showPagination={false}
defaultPageSize={1000}
showPagination={true}
defaultPageSize={50}
minRows={7}
noDataText="No logs found"
originalKey="originalRow"
defaultSorted={[
{
id: 'time',
@ -200,42 +218,53 @@ class Logs extends Component {
};
renderButtons(queryLogEnabled) {
return (<div className="card-actions-top">
if (queryLogEnabled) {
return (
<Fragment>
<button
className="btn btn-success btn-standart mr-2"
className="btn btn-gray btn-sm mr-2"
type="submit"
onClick={() => this.props.toggleLogStatus(queryLogEnabled)}
>{queryLogEnabled ? 'Disable log' : 'Enable log'}</button>
{queryLogEnabled &&
>Disable log</button>
<button
className="btn btn-primary btn-standart mr-2"
className="btn btn-primary btn-sm mr-2"
type="submit"
onClick={this.handleDownloadButton}
>Download log file</button>
}
{queryLogEnabled &&
<button
className="btn btn-outline-primary btn-standart"
className="btn btn-outline-primary btn-sm"
type="submit"
onClick={this.getLogs}
>Refresh</button>
</Fragment>
);
}
</div>);
return (
<button
className="btn btn-success btn-sm mr-2"
type="submit"
onClick={() => this.props.toggleLogStatus(queryLogEnabled)}
>Enable log</button>
);
}
render() {
const { queryLogs, dashboard } = this.props;
const { queryLogEnabled } = dashboard;
return (
<div>
<PageTitle title="Query Log" subtitle="DNS queries log" />
<Card>
<Fragment>
<PageTitle title="Query Log" subtitle="Last 1000 DNS queries">
<div className="page-title__actions">
{this.renderButtons(queryLogEnabled)}
</div>
</PageTitle>
<Card>
{queryLogEnabled && queryLogs.processing && <Loading />}
{queryLogEnabled && !queryLogs.processing &&
this.renderLogs(queryLogs.logs)}
</Card>
</div>
</Fragment>
);
}
}