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..be7b14a4 --- /dev/null +++ b/client/src/components/Logs/Logs.css @@ -0,0 +1,26 @@ +.logs__row { + display: flex; + align-items: center; +} + +.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 c6c11c16..a172716f 100644 --- a/client/src/components/Logs/index.js +++ b/client/src/components/Logs/index.js @@ -5,8 +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 Tooltip from '../ui/Tooltip'; +import './Logs.css'; const DOWNLOAD_LOG_FILENAME = 'dns-logs.txt'; @@ -25,36 +25,82 @@ class Logs extends Component { } } + renderTooltip(isFiltered, rule) { + if (rule) { + return (isFiltered && ); + } + return ''; + } + renderLogs(logs) { 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', Cell: (row) => { const responses = row.value; + 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}
  • )); - return (); + (
  • {response}
  • )); + return ( +
    + { this.renderTooltip(isFiltered, rule)} + +
    + ); } - return 'Empty'; + return ( +
    + { this.renderTooltip(isFiltered, rule) } + Empty +
    + ); }, - }]; + }, { + Header: 'Client', + accessor: 'client', + maxWidth: 250, + }, + ]; 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/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%; 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, }; });