From d7596fe8600b743c42df9cd5b6bfeefa69fee5c6 Mon Sep 17 00:00:00 2001
From: Ildar Kamalov <i.kamalov@adguard.com>
Date: Tue, 2 Oct 2018 18:14:41 +0300
Subject: [PATCH 1/2] Add query log filtering
Closes #322
---
client/src/components/Dashboard/index.js | 2 +-
client/src/components/Logs/Logs.css | 16 ++++++
client/src/components/Logs/index.js | 67 +++++++++++++++++-------
3 files changed, 65 insertions(+), 20 deletions(-)
diff --git a/client/src/components/Dashboard/index.js b/client/src/components/Dashboard/index.js
index f71c2361..d847fb40 100644
--- a/client/src/components/Dashboard/index.js
+++ b/client/src/components/Dashboard/index.js
@@ -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)}>
diff --git a/client/src/components/Logs/Logs.css b/client/src/components/Logs/Logs.css
index dd30d512..a5f91760 100644
--- a/client/src/components/Logs/Logs.css
+++ b/client/src/components/Logs/Logs.css
@@ -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);
+}
diff --git a/client/src/components/Logs/index.js b/client/src/components/Logs/index.js
index 907f7de7..f7d5009c 100644
--- a/client/src/components/Logs/index.js
+++ b/client/src/components/Logs/index.js
@@ -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">
- <button
- className="btn btn-success btn-standart mr-2"
- type="submit"
- onClick={() => this.props.toggleLogStatus(queryLogEnabled)}
- >{queryLogEnabled ? 'Disable log' : 'Enable log'}</button>
- {queryLogEnabled &&
+ if (queryLogEnabled) {
+ return (
+ <Fragment>
<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"
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>
- }
- </div>);
+ </Fragment>
+ );
+ }
+
+ 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" />
+ <Fragment>
+ <PageTitle title="Query Log" subtitle="Last 1000 DNS queries">
+ <div className="page-title__actions">
+ {this.renderButtons(queryLogEnabled)}
+ </div>
+ </PageTitle>
<Card>
- {this.renderButtons(queryLogEnabled)}
{queryLogEnabled && queryLogs.processing && <Loading />}
{queryLogEnabled && !queryLogs.processing &&
this.renderLogs(queryLogs.logs)}
</Card>
- </div>
+ </Fragment>
);
}
}
From 991574f236ba691548839104a4218d749fbef10a Mon Sep 17 00:00:00 2001
From: Ildar Kamalov <i.kamalov@adguard.com>
Date: Tue, 2 Oct 2018 18:30:34 +0300
Subject: [PATCH 2/2] Fix row original
---
client/src/components/Logs/index.js | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/client/src/components/Logs/index.js b/client/src/components/Logs/index.js
index f7d5009c..f0bb082d 100644
--- a/client/src/components/Logs/index.js
+++ b/client/src/components/Logs/index.js
@@ -145,7 +145,8 @@ class Logs extends Component {
},
filterMethod: (filter, row) => {
if (filter.value === 'filtered') {
- return row.originalRow.reason.indexOf('Filtered') === 0;
+ // eslint-disable-next-line no-underscore-dangle
+ return row._original.reason.indexOf('Filtered') === 0;
}
return true;
},
@@ -188,7 +189,6 @@ class Logs extends Component {
defaultPageSize={50}
minRows={7}
noDataText="No logs found"
- originalKey="originalRow"
defaultSorted={[
{
id: 'time',