From bed92f89f04ba19e03d88ad8218c67c5928b5530 Mon Sep 17 00:00:00 2001
From: Maxim Topchu <maximtop@gmail.com>
Date: Mon, 3 Sep 2018 15:55:20 +0300
Subject: [PATCH] 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 && <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;
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,
     };
 });