Add a test upstreams button

Closes #321

client/src/actions/index.js

@@ -420,3 +420,36 @@ export const setUpstream = url => async (dispatch) => {
         dispatch(setUpstreamFailure());
     }
 };
+
+export const testUpstreamRequest = createAction('TEST_UPSTREAM_REQUEST');
+export const testUpstreamFailure = createAction('TEST_UPSTREAM_FAILURE');
+export const testUpstreamSuccess = createAction('TEST_UPSTREAM_SUCCESS');
+
+export const testUpstream = servers => async (dispatch) => {
+    dispatch(testUpstreamRequest());
+    try {
+        if (servers.length > 0) {
+            const upstreamResponse = await apiClient.testUpstream(servers);
+
+            const testMessages = Object.keys(upstreamResponse).map((key) => {
+                const message = upstreamResponse[key];
+                if (message !== 'OK') {
+                    dispatch(addErrorToast({ error: `Server "${key}": could not be used, please check that you've written it correctly` }));
+                }
+                return message;
+            });
+
+            if (testMessages.every(message => message === testMessages[0])) {
+                dispatch(addSuccessToast('All servers is OK'));
+            }
+
+            dispatch(testUpstreamSuccess());
+        } else {
+            dispatch(addErrorToast({ error: 'No servers specified' }));
+            dispatch(testUpstreamFailure());
+        }
+    } catch (error) {
+        dispatch(addErrorToast({ error }));
+        dispatch(testUpstreamFailure());
+    }
+};

client/src/api/Api.js

@@ -31,6 +31,7 @@ export default class Api {
     GLOBAL_QUERY_LOG_ENABLE = { path: 'querylog_enable', method: 'POST' };
     GLOBAL_QUERY_LOG_DISABLE = { path: 'querylog_disable', method: 'POST' };
     GLOBAL_SET_UPSTREAM_DNS = { path: 'set_upstream_dns', method: 'POST' };
+    GLOBAL_TEST_UPSTREAM_DNS = { path: 'test_upstream_dns', method: 'POST' };
     GLOBAL_VERSION = { path: 'version.json', method: 'GET' };
 
     restartGlobalFiltering() {
@@ -108,6 +109,15 @@ export default class Api {
         return this.makeRequest(path, method, config);
     }
 
+    testUpstream(servers) {
+        const { path, method } = this.GLOBAL_TEST_UPSTREAM_DNS;
+        const config = {
+            data: servers,
+            header: { 'Content-Type': 'text/plain' },
+        };
+        return this.makeRequest(path, method, config);
+    }
+
     getGlobalVersion() {
         const { path, method } = this.GLOBAL_VERSION;
         return this.makeRequest(path, method);

client/src/components/Filters/UserRules.js

@@ -27,7 +27,7 @@ export default class UserRules extends Component {
                             type="submit"
                             onClick={this.handleSubmit}
                         >
-                            Apply...
+                            Apply
                         </button>
                     </div>
                 </form>

client/src/components/Settings/Upstream.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 import Card from '../ui/Card';
 
 export default class Upstream extends Component {
@@ -13,7 +14,16 @@ export default class Upstream extends Component {
         this.props.handleUpstreamSubmit();
     };
 
+    handleTest = () => {
+        this.props.handleUpstreamTest();
+    }
+
     render() {
+        const testButtonClass = classnames({
+            'btn btn-primary btn-standart mr-2': true,
+            'btn btn-primary btn-standart mr-2 btn-loading': this.props.processingTestUpstream,
+        });
+
         return (
             <Card
                 title="Upstream DNS servers"
@@ -29,6 +39,13 @@ export default class Upstream extends Component {
                                 onChange={this.handleChange}
                             />
                             <div className="card-actions">
+                                <button
+                                    className={testButtonClass}
+                                    type="button"
+                                    onClick={this.handleTest}
+                                >
+                                    Test upstreams
+                                </button>
                                 <button
                                     className="btn btn-success btn-standart"
                                     type="submit"
@@ -47,6 +64,8 @@ export default class Upstream extends Component {
 
 Upstream.propTypes = {
     upstream: PropTypes.string,
+    processingTestUpstream: PropTypes.bool,
     handleUpstreamChange: PropTypes.func,
     handleUpstreamSubmit: PropTypes.func,
+    handleUpstreamTest: PropTypes.func,
 };

client/src/components/Settings/index.js

@@ -43,6 +43,10 @@ export default class Settings extends Component {
         this.props.setUpstream(this.props.settings.upstream);
     };
 
+    handleUpstreamTest = () => {
+        this.props.testUpstream(this.props.settings.upstream);
+    };
+
     renderSettings = (settings) => {
         if (Object.keys(settings).length > 0) {
             return Object.keys(settings).map((key) => {
@@ -77,8 +81,10 @@ export default class Settings extends Component {
                                 </Card>
                                 <Upstream
                                     upstream={upstream}
+                                    processingTestUpstream={settings.processingTestUpstream}
                                     handleUpstreamChange={this.handleUpstreamChange}
                                     handleUpstreamSubmit={this.handleUpstreamSubmit}
+                                    handleUpstreamTest={this.handleUpstreamTest}
                                 />
                             </div>
                         </div>

client/src/containers/Settings.js

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { initSettings, toggleSetting, handleUpstreamChange, setUpstream } from '../actions';
+import { initSettings, toggleSetting, handleUpstreamChange, setUpstream, testUpstream } from '../actions';
 import Settings from '../components/Settings';
 
 const mapStateToProps = (state) => {
@@ -13,6 +13,7 @@ const mapDispatchToProps = {
     toggleSetting,
     handleUpstreamChange,
     setUpstream,
+    testUpstream,
 };
 
 export default connect(

client/src/reducers/index.js

@@ -31,9 +31,14 @@ const settings = handleActions({
         const { upstream } = payload;
         return { ...state, upstream };
     },
+
+    [actions.testUpstreamRequest]: state => ({ ...state, processingTestUpstream: true }),
+    [actions.testUpstreamFailure]: state => ({ ...state, processingTestUpstream: false }),
+    [actions.testUpstreamSuccess]: state => ({ ...state, processingTestUpstream: false }),
 }, {
     processing: true,
-    processingUpstream: true,
+    processingTestUpstream: false,
+    processingSetUpstream: false,
     upstream: '',
 });