Merge pull request #6 in DNS/adguard-dns from feature/319 to master

* commit 'fa8bc570827cae708266901754712fb0c9a1f1ea':
  add reason status
  fix tooltip styles
  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,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;
+}

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 && <Tooltip text={rule}/>);
+        }
+        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 (
+                    <div className="logs__row logs__row--overflow" title={response}>
+                        <div className="logs__text">
+                            {response}
+                        </div>
+                    </div>
+                );
+            },
         }, {
             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 (
+                        <div className="logs__row">
+                            { this.renderTooltip(isFiltered, rule) }
+                            <span>{ parsedFilteredReason }</span>
+                        </div>
+                    );
+                }
+
                 if (responses.length > 0) {
                     const liNodes = responses.map((response, index) =>
-                        (<li key={index}>{response}</li>));
-                    return (<ul className="list-unstyled">{liNodes}</ul>);
+                        (<li key={index} title={response}>{response}</li>));
+                    return (
+                        <div className="logs__row">
+                            { this.renderTooltip(isFiltered, rule)}
+                            <ul className="list-unstyled">{liNodes}</ul>
+                        </div>
+                    );
                 }
-                return 'Empty';
+                return (
+                    <div className="logs__row">
+                        { this.renderTooltip(isFiltered, rule) }
+                        <span>Empty</span>
+                    </div>
+                );
             },
-        }];
+        }, {
+            Header: 'Client',
+            accessor: 'client',
+            maxWidth: 250,
+        },
+        ];
 
         if (logs) {
-            const normalizedLogs = normalizeLogs(logs);
             return (<ReactTable
-                data={normalizedLogs}
+                data={logs}
                 columns={columns}
                 showPagination={false}
                 minRows={7}
@@ -65,6 +111,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/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;
 }

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%;

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