From bed92f89f04ba19e03d88ad8218c67c5928b5530 Mon Sep 17 00:00:00 2001 From: Maxim Topchu Date: Mon, 3 Sep 2018 15:55:20 +0300 Subject: [PATCH 1/3] add client column and tooltip to blocked requests --- client/src/actions/index.js | 4 +-- client/src/components/Logs/Logs.css | 7 +++++ client/src/components/Logs/index.js | 40 ++++++++++++++++++++++++----- client/src/helpers/helpers.js | 6 +++++ 4 files changed, 49 insertions(+), 8 deletions(-) create mode 100644 client/src/components/Logs/Logs.css diff --git a/client/src/actions/index.js b/client/src/actions/index.js index 45061b42..daa1cc49 100644 --- a/client/src/actions/index.js +++ b/client/src/actions/index.js @@ -1,7 +1,7 @@ import { createAction } from 'redux-actions'; import round from 'lodash/round'; -import { normalizeHistory, normalizeFilteringStatus } from '../helpers/helpers'; +import { normalizeHistory, normalizeFilteringStatus, normalizeLogs } from '../helpers/helpers'; import Api from '../api/Api'; const apiClient = new Api(); @@ -175,7 +175,7 @@ export const getLogs = () => async (dispatch, getState) => { const state = getState(); const timer = setInterval(async () => { if (state.dashboard.isCoreRunning) { - const logs = await apiClient.getQueryLog(); + const logs = normalizeLogs(await apiClient.getQueryLog()); dispatch(getLogsSuccess(logs)); clearInterval(timer); } diff --git a/client/src/components/Logs/Logs.css b/client/src/components/Logs/Logs.css new file mode 100644 index 00000000..b9c6c264 --- /dev/null +++ b/client/src/components/Logs/Logs.css @@ -0,0 +1,7 @@ +.rt-tr-group .red { + background-color: #fff4f2; +} + +.ReactTable .rt-th, .ReactTable .rt-td { + overflow: visible; +} \ No newline at end of file diff --git a/client/src/components/Logs/index.js b/client/src/components/Logs/index.js index c6c11c16..ab0c43a5 100644 --- a/client/src/components/Logs/index.js +++ b/client/src/components/Logs/index.js @@ -5,7 +5,8 @@ import { saveAs } from 'file-saver/FileSaver'; import PageTitle from '../ui/PageTitle'; import Card from '../ui/Card'; import Loading from '../ui/Loading'; -import { normalizeLogs } from '../../helpers/helpers'; +import './Logs.css'; +import Tooltip from '../ui/Tooltip'; const DOWNLOAD_LOG_FILENAME = 'dns-logs.txt'; @@ -25,6 +26,13 @@ class Logs extends Component { } } + renderTooltip(isFiltered, rule) { + if (rule) { + return (isFiltered && ); + } + return ''; + } + renderLogs(logs) { const columns = [{ Header: 'Time', @@ -42,19 +50,30 @@ class Logs extends Component { accessor: 'response', Cell: (row) => { const responses = row.value; + const isFiltered = row ? row.original.reason.indexOf('Filtered') === 0 : false; + const rule = row && row.original && row.original.rule; if (responses.length > 0) { const liNodes = responses.map((response, index) => (
  • {response}
    • )); - return (); + return ( + { this.renderTooltip(isFiltered, rule)} +
      {liNodes}
    +     ); } - return 'Empty'; + return ( + { this.renderTooltip(isFiltered, rule) } + Empty + ); }, - }]; + }, { + Header: 'Client', + accessor: 'client', + }, + ]; if (logs) { - const normalizedLogs = normalizeLogs(logs); return ( { + // highlight filtered requests + if (!rowInfo) { + return {}; + } + return { + className: (rowInfo.original.reason.indexOf('Filtered') === 0 ? 'red' : ''), + }; + }} />); } return undefined; diff --git a/client/src/helpers/helpers.js b/client/src/helpers/helpers.js index 8820ecfd..e186047c 100644 --- a/client/src/helpers/helpers.js +++ b/client/src/helpers/helpers.js @@ -14,6 +14,9 @@ export const normalizeLogs = logs => logs.map((log) => { time, question, answer: response, + reason, + client, + rule, } = log; const { host: domain, type } = question; const responsesArray = response ? response.map((response) => { @@ -25,6 +28,9 @@ export const normalizeLogs = logs => logs.map((log) => { domain, type, response: responsesArray, + reason, + client, + rule, }; }); From 0e99a65687e8710a03a117b52a938e14a32edd64 Mon Sep 17 00:00:00 2001 From: Ildar Kamalov Date: Tue, 4 Sep 2018 12:43:13 +0300 Subject: [PATCH 2/3] fix tooltip styles --- client/src/components/Logs/Logs.css | 29 +++++++++++++++---- client/src/components/Logs/index.js | 37 +++++++++++++++++-------- client/src/components/ui/ReactTable.css | 5 ++++ client/src/components/ui/Tooltip.css | 1 + 4 files changed, 56 insertions(+), 16 deletions(-) diff --git a/client/src/components/Logs/Logs.css b/client/src/components/Logs/Logs.css index b9c6c264..be7b14a4 100644 --- a/client/src/components/Logs/Logs.css +++ b/client/src/components/Logs/Logs.css @@ -1,7 +1,26 @@ -.rt-tr-group .red { - background-color: #fff4f2; +.logs__row { + display: flex; + align-items: center; } -.ReactTable .rt-th, .ReactTable .rt-td { - overflow: visible; -} \ No newline at end of file +.logs__row--overflow { + overflow: hidden; +} + +.logs__row .list-unstyled { + margin-bottom: 0; + overflow: hidden; +} + +.logs__text, +.logs__row .list-unstyled li { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} + +.logs__row .tooltip-custom { + top: 0; + margin-left: 0; + margin-right: 5px; +} diff --git a/client/src/components/Logs/index.js b/client/src/components/Logs/index.js index ab0c43a5..86eeb0ae 100644 --- a/client/src/components/Logs/index.js +++ b/client/src/components/Logs/index.js @@ -5,9 +5,8 @@ import { saveAs } from 'file-saver/FileSaver'; import PageTitle from '../ui/PageTitle'; import Card from '../ui/Card'; import Loading from '../ui/Loading'; -import './Logs.css'; import Tooltip from '../ui/Tooltip'; - +import './Logs.css'; const DOWNLOAD_LOG_FILENAME = 'dns-logs.txt'; @@ -37,14 +36,25 @@ class Logs extends Component { const columns = [{ Header: 'Time', accessor: 'time', - maxWidth: 150, + maxWidth: 110, }, { Header: 'Domain name', accessor: 'domain', + Cell: (row) => { + const response = row.value; + + return ( +
    +
    + {response} +
    +
    + ); + }, }, { Header: 'Type', accessor: 'type', - maxWidth: 100, + maxWidth: 60, }, { Header: 'Response', accessor: 'response', @@ -54,20 +64,25 @@ class Logs extends Component { const rule = row && row.original && row.original.rule; if (responses.length > 0) { const liNodes = responses.map((response, index) => - (
  • {response}
    • )); - return ( + (
  • {response}
    • )); + return ( +
    { this.renderTooltip(isFiltered, rule)}
      {liNodes}
    - ); +
    + ); } - return ( - { this.renderTooltip(isFiltered, rule) } - Empty - ); + return ( +
    + { this.renderTooltip(isFiltered, rule) } + Empty +
    + ); }, }, { Header: 'Client', accessor: 'client', + maxWidth: 250, }, ]; diff --git a/client/src/components/ui/ReactTable.css b/client/src/components/ui/ReactTable.css index fdedd9f2..79fa6421 100644 --- a/client/src/components/ui/ReactTable.css +++ b/client/src/components/ui/ReactTable.css @@ -1,4 +1,9 @@ .ReactTable .rt-th, .ReactTable .rt-td { padding: 10px 15px; + overflow: visible; +} + +.rt-tr-group .red { + background-color: #fff4f2; } diff --git a/client/src/components/ui/Tooltip.css b/client/src/components/ui/Tooltip.css index 30bf1199..a51b8842 100644 --- a/client/src/components/ui/Tooltip.css +++ b/client/src/components/ui/Tooltip.css @@ -5,6 +5,7 @@ vertical-align: middle; width: 18px; height: 18px; + flex-shrink: 0; margin-left: 5px; background-image: url("./svg/help-circle.svg"); background-size: 100%; From fa8bc570827cae708266901754712fb0c9a1f1ea Mon Sep 17 00:00:00 2001 From: Maxim Topchu Date: Wed, 5 Sep 2018 18:20:38 +0300 Subject: [PATCH 3/3] add reason status --- client/src/components/Logs/index.js | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/client/src/components/Logs/index.js b/client/src/components/Logs/index.js index 86eeb0ae..a172716f 100644 --- a/client/src/components/Logs/index.js +++ b/client/src/components/Logs/index.js @@ -60,8 +60,20 @@ class Logs extends Component { accessor: 'response', Cell: (row) => { const responses = row.value; - const isFiltered = row ? row.original.reason.indexOf('Filtered') === 0 : false; + const { reason } = row.original; + const isFiltered = row ? reason.indexOf('Filtered') === 0 : false; + const parsedFilteredReason = reason.replace('Filtered', 'Filtered by '); const rule = row && row.original && row.original.rule; + + if (isFiltered) { + return ( +
    + { this.renderTooltip(isFiltered, rule) } + { parsedFilteredReason } +
    + ); + } + if (responses.length > 0) { const liNodes = responses.map((response, index) => (
  • {response}
    • ));