add client column and tooltip to blocked requests

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

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

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 && <Tooltip text={rule}/>);
+        }
+        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) =>
                         (<li key={index}>{response}</li>));
-                    return (<ul className="list-unstyled">{liNodes}</ul>);
+                    return (<React.Fragment>
+                            { this.renderTooltip(isFiltered, rule)}
+                            <ul className="list-unstyled">{liNodes}</ul>
+                        </React.Fragment>);
                 }
-                return 'Empty';
+                return (<React.Fragment>
+                    { this.renderTooltip(isFiltered, rule) }
+                    <span>Empty</span>
+                </React.Fragment>);
             },
-        }];
+        }, {
+            Header: 'Client',
+            accessor: 'client',
+        },
+        ];
 
         if (logs) {
-            const normalizedLogs = normalizeLogs(logs);
             return (<ReactTable
-                data={normalizedLogs}
+                data={logs}
                 columns={columns}
                 showPagination={false}
                 minRows={7}
@@ -65,6 +84,15 @@ class Logs extends Component {
                         desc: true,
                     },
                 ]}
+                getTrProps={(_state, rowInfo) => {
+                    // highlight filtered requests
+                    if (!rowInfo) {
+                        return {};
+                    }
+                    return {
+                        className: (rowInfo.original.reason.indexOf('Filtered') === 0 ? 'red' : ''),
+                    };
+                }}
                 />);
         }
         return undefined;

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