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)} + + ); } - 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, }; });