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 = () => { getToggleFilteringButton = () => {
const { isFilteringEnabled } = this.props.dashboard; const { isFilteringEnabled } = this.props.dashboard;
const buttonText = isFilteringEnabled ? 'Disable' : 'Enable'; const buttonText = isFilteringEnabled ? 'Disable' : 'Enable';
const buttonClass = isFilteringEnabled ? 'btn-outline-secondary' : 'btn-outline-success'; const buttonClass = isFilteringEnabled ? 'btn-gray' : 'btn-success';
return ( return (
<button type="button" className={`btn btn-sm mr-2 ${buttonClass}`} onClick={() => this.props.toggleFiltering(isFilteringEnabled)}> <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-top: 6px solid transparent;
border-bottom: 6px solid #585965; 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', Header: 'Time',
accessor: 'time', accessor: 'time',
maxWidth: 110, maxWidth: 110,
filterable: false,
}, { }, {
Header: 'Domain name', Header: 'Domain name',
accessor: 'domain', accessor: 'domain',
@ -142,6 +143,21 @@ class Logs extends Component {
</div> </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', Header: 'Client',
accessor: 'client', accessor: 'client',
@ -165,12 +181,14 @@ class Logs extends Component {
if (logs) { if (logs) {
return (<ReactTable return (<ReactTable
className='logs__table' className='logs__table'
filterable
data={logs} data={logs}
columns={columns} columns={columns}
showPagination={false} showPagination={true}
defaultPageSize={1000} defaultPageSize={50}
minRows={7} minRows={7}
noDataText="No logs found" noDataText="No logs found"
originalKey="originalRow"
defaultSorted={[ defaultSorted={[
{ {
id: 'time', id: 'time',
@ -200,42 +218,53 @@ class Logs extends Component {
}; };
renderButtons(queryLogEnabled) { renderButtons(queryLogEnabled) {
return (<div className="card-actions-top"> if (queryLogEnabled) {
<button return (
className="btn btn-success btn-standart mr-2" <Fragment>
type="submit"
onClick={() => this.props.toggleLogStatus(queryLogEnabled)}
>{queryLogEnabled ? 'Disable log' : 'Enable log'}</button>
{queryLogEnabled &&
<button <button
className="btn btn-primary btn-standart mr-2" className="btn btn-gray btn-sm mr-2"
type="submit"
onClick={() => this.props.toggleLogStatus(queryLogEnabled)}
>Disable log</button>
<button
className="btn btn-primary btn-sm mr-2"
type="submit" type="submit"
onClick={this.handleDownloadButton} onClick={this.handleDownloadButton}
>Download log file</button> >Download log file</button>
}
{queryLogEnabled &&
<button <button
className="btn btn-outline-primary btn-standart" className="btn btn-outline-primary btn-sm"
type="submit" type="submit"
onClick={this.getLogs} onClick={this.getLogs}
>Refresh</button> >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() { render() {
const { queryLogs, dashboard } = this.props; const { queryLogs, dashboard } = this.props;
const { queryLogEnabled } = dashboard; const { queryLogEnabled } = dashboard;
return ( return (
<div> <Fragment>
<PageTitle title="Query Log" subtitle="DNS queries log" /> <PageTitle title="Query Log" subtitle="Last 1000 DNS queries">
<div className="page-title__actions">
{this.renderButtons(queryLogEnabled)}
</div>
</PageTitle>
<Card> <Card>
{this.renderButtons(queryLogEnabled)}
{queryLogEnabled && queryLogs.processing && <Loading />} {queryLogEnabled && queryLogs.processing && <Loading />}
{queryLogEnabled && !queryLogs.processing && {queryLogEnabled && !queryLogs.processing &&
this.renderLogs(queryLogs.logs)} this.renderLogs(queryLogs.logs)}
</Card> </Card>
</div> </Fragment>
); );
} }
} }