+ client: added name for client

client/src/components/App/index.js

@@ -26,6 +26,7 @@ class App extends Component {
     componentDidMount() {
         this.props.getDnsStatus();
         this.props.getVersion();
+        this.props.getClients();
     }
 
     componentDidUpdate(prevProps) {
@@ -108,6 +109,7 @@ App.propTypes = {
     getVersion: PropTypes.func,
     changeLanguage: PropTypes.func,
     encryption: PropTypes.object,
+    getClients: PropTypes.func,
 };
 
 export default withNamespaces()(App);

client/src/components/Dashboard/Clients.js

@@ -7,7 +7,7 @@ import { Trans, withNamespaces } from 'react-i18next';
 import Card from '../ui/Card';
 import Cell from '../ui/Cell';
 
-import { getPercent } from '../../helpers/helpers';
+import { getPercent, getClientName } from '../../helpers/helpers';
 import { STATUS_COLORS } from '../../helpers/constants';
 
 class Clients extends Component {
@@ -23,7 +23,24 @@ class Clients extends Component {
     columns = [{
         Header: 'IP',
         accessor: 'ip',
-        Cell: ({ value }) => (<div className="logs__row logs__row--overflow"><span className="logs__text" title={value}>{value}</span></div>),
+        Cell: ({ value }) => {
+            const clientName = getClientName(this.props.clients, value);
+            let client;
+
+            if (clientName) {
+                client = <span>{clientName} <small>({value})</small></span>;
+            } else {
+                client = value;
+            }
+
+            return (
+                <div className="logs__row logs__row--overflow">
+                    <span className="logs__text" title={value}>
+                        {client}
+                    </span>
+                </div>
+            );
+        },
         sortMethod: (a, b) => parseInt(a.replace(/\./g, ''), 10) - parseInt(b.replace(/\./g, ''), 10),
     }, {
         Header: <Trans>requests_count</Trans>,
@@ -61,6 +78,7 @@ Clients.propTypes = {
     topClients: PropTypes.object.isRequired,
     dnsQueries: PropTypes.number.isRequired,
     refreshButton: PropTypes.node.isRequired,
+    clients: PropTypes.array.isRequired,
     t: PropTypes.func,
 };
 

client/src/components/Dashboard/index.js

@@ -46,6 +46,7 @@ class Dashboard extends Component {
             dashboard.processing ||
             dashboard.processingStats ||
             dashboard.processingStatsHistory ||
+            dashboard.processingClients ||
             dashboard.processingTopStats;
 
         const refreshFullButton = <button type="button" className="btn btn-outline-primary btn-sm" onClick={() => this.getAllStats()}><Trans>refresh_statics</Trans></button>;
@@ -94,6 +95,7 @@ class Dashboard extends Component {
                                         dnsQueries={dashboard.stats.dns_queries}
                                         refreshButton={refreshButton}
                                         topClients={dashboard.topStats.top_clients}
+                                        clients={dashboard.clients}
                                     />
                                 </div>
                                 <div className="col-lg-6">

client/src/components/Logs/index.js

@@ -6,7 +6,7 @@ import escapeRegExp from 'lodash/escapeRegExp';
 import endsWith from 'lodash/endsWith';
 import { Trans, withNamespaces } from 'react-i18next';
 
-import { formatTime } from '../../helpers/helpers';
+import { formatTime, getClientName } from '../../helpers/helpers';
 import { getTrackerData } from '../../helpers/trackers/trackers';
 import PageTitle from '../ui/PageTitle';
 import Card from '../ui/Card';
@@ -86,7 +86,7 @@ class Logs extends Component {
     }
 
     renderLogs(logs) {
-        const { t } = this.props;
+        const { t, dashboard } = this.props;
         const columns = [{
             Header: t('time_table_header'),
             accessor: 'time',
@@ -196,11 +196,19 @@ class Logs extends Component {
             Cell: (row) => {
                 const { reason } = row.original;
                 const isFiltered = row ? reason.indexOf('Filtered') === 0 : false;
+                const clientName = getClientName(dashboard.clients, row.value);
+                let client;
+
+                if (clientName) {
+                    client = <span>{clientName} <small>({row.value})</small></span>;
+                } else {
+                    client = row.value;
+                }
 
                 return (
                     <Fragment>
                         <div className="logs__row">
-                            {row.value}
+                            {client}
                         </div>
                         {this.renderBlockingButton(isFiltered, row.original.domain)}
                     </Fragment>
@@ -315,9 +323,18 @@ class Logs extends Component {
                     </div>
                 </PageTitle>
                 <Card>
-                    {queryLogEnabled && queryLogs.getLogsProcessing && <Loading />}
-                    {queryLogEnabled && !queryLogs.getLogsProcessing &&
-                        this.renderLogs(queryLogs.logs)}
+                    {
+                        queryLogEnabled
+                        && queryLogs.getLogsProcessing
+                        && dashboard.processingClients
+                        && <Loading />
+                    }
+                    {
+                        queryLogEnabled
+                        && !queryLogs.getLogsProcessing
+                        && !dashboard.processingClients
+                        && this.renderLogs(queryLogs.logs)
+                    }
                 </Card>
             </Fragment>
         );