+ client: added name for client

client/src/actions/index.js

@@ -665,3 +665,18 @@ export const toggleDhcp = config => async (dispatch) => {
         }
     }
 };
+
+export const getClientsRequest = createAction('GET_CLIENTS_REQUEST');
+export const getClientsFailure = createAction('GET_CLIENTS_FAILURE');
+export const getClientsSuccess = createAction('GET_CLIENTS_SUCCESS');
+
+export const getClients = () => async (dispatch) => {
+    dispatch(getClientsRequest());
+    try {
+        const clients = await apiClient.getGlobalClients();
+        dispatch(getClientsSuccess(clients));
+    } catch (error) {
+        dispatch(addErrorToast({ error }));
+        dispatch(getClientsFailure());
+    }
+};

client/src/api/Api.js

@@ -39,6 +39,7 @@ export default class Api {
     GLOBAL_VERSION = { path: 'version.json', method: 'GET' };
     GLOBAL_ENABLE_PROTECTION = { path: 'enable_protection', method: 'POST' };
     GLOBAL_DISABLE_PROTECTION = { path: 'disable_protection', method: 'POST' };
+    GLOBAL_CLIENTS = { path: 'clients', method: 'GET' }
 
     restartGlobalFiltering() {
         const { path, method } = this.GLOBAL_RESTART;
@@ -139,6 +140,11 @@ export default class Api {
         return this.makeRequest(path, method);
     }
 
+    getGlobalClients() {
+        const { path, method } = this.GLOBAL_CLIENTS;
+        return this.makeRequest(path, method);
+    }
+
     // Filtering
     FILTERING_STATUS = { path: 'filtering/status', method: 'GET' };
     FILTERING_ENABLE = { path: 'filtering/enable', method: 'POST' };

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

client/src/helpers/helpers.js

@@ -203,3 +203,8 @@ export const redirectToCurrentProtocol = (values, httpPort = 80) => {
 };
 
 export const normalizeTextarea = text => text && text.replace(/[;, ]/g, '\n').split('\n').filter(n => n);
+
+export const getClientName = (clients, ip) => {
+    const client = clients.find(item => ip === item.ip);
+    return (client && client.name) || '';
+};

client/src/reducers/index.js

@@ -167,6 +167,17 @@ const dashboard = handleActions({
         const newState = { ...state, language: payload };
         return newState;
     },
+
+    [actions.getClientsRequest]: state => ({ ...state, processingClients: true }),
+    [actions.getClientsFailure]: state => ({ ...state, processingClients: false }),
+    [actions.getClientsSuccess]: (state, { payload }) => {
+        const newState = {
+            ...state,
+            clients: payload,
+            processingClients: false,
+        };
+        return newState;
+    },
 }, {
     processing: true,
     isCoreRunning: false,
@@ -175,6 +186,7 @@ const dashboard = handleActions({
     logStatusProcessing: false,
     processingVersion: true,
     processingFiltering: true,
+    processingClients: true,
     upstreamDns: '',
     bootstrapDns: '',
     allServers: false,
@@ -184,6 +196,7 @@ const dashboard = handleActions({
     dnsPort: 53,
     dnsAddresses: [],
     dnsVersion: '',
+    clients: [],
 });
 
 const queryLogs = handleActions({