Add list of upstream servers

Closes #344

client/src/components/Settings/Settings.css

@@ -10,3 +10,7 @@
     padding-left: 20px;
     padding-right: 20px;
 }
+
+.form-control--textarea {
+    min-height: 110px;
+}

client/src/components/Settings/Upstream.js

@@ -34,8 +34,8 @@ export default class Upstream extends Component {
                     <div className="col">
                         <form>
                             <textarea
-                                className="form-control"
-                                value={this.props.upstream}
+                                className="form-control form-control--textarea"
+                                value={this.props.upstreamDns}
                                 onChange={this.handleChange}
                             />
                             <div className="card-actions">
@@ -63,7 +63,7 @@ export default class Upstream extends Component {
 }
 
 Upstream.propTypes = {
-    upstream: PropTypes.string,
+    upstreamDns: PropTypes.string,
     processingTestUpstream: PropTypes.bool,
     handleUpstreamChange: PropTypes.func,
     handleUpstreamSubmit: PropTypes.func,

client/src/components/Settings/index.js

@@ -36,16 +36,16 @@ export default class Settings extends Component {
     }
 
     handleUpstreamChange = (value) => {
-        this.props.handleUpstreamChange({ upstream: value });
+        this.props.handleUpstreamChange({ upstreamDns: value });
     };
 
     handleUpstreamSubmit = () => {
-        this.props.setUpstream(this.props.settings.upstream);
+        this.props.setUpstream(this.props.dashboard.upstreamDns);
     };
 
     handleUpstreamTest = () => {
-        if (this.props.settings.upstream.length > 0) {
-            this.props.testUpstream(this.props.settings.upstream);
+        if (this.props.dashboard.upstreamDns.length > 0) {
+            this.props.testUpstream(this.props.dashboard.upstreamDns);
         } else {
             this.props.addErrorToast({ error: 'No servers specified' });
         }
@@ -69,7 +69,8 @@ export default class Settings extends Component {
     }
 
     render() {
-        const { settings, upstream } = this.props;
+        const { settings } = this.props;
+        const { upstreamDns } = this.props.dashboard;
         return (
             <Fragment>
                 <PageTitle title="Settings" />
@@ -84,7 +85,7 @@ export default class Settings extends Component {
                                     </div>
                                 </Card>
                                 <Upstream
-                                    upstream={upstream}
+                                    upstreamDns={upstreamDns}
                                     processingTestUpstream={settings.processingTestUpstream}
                                     handleUpstreamChange={this.handleUpstreamChange}
                                     handleUpstreamSubmit={this.handleUpstreamSubmit}

client/src/containers/Settings.js

@@ -3,8 +3,8 @@ import { initSettings, toggleSetting, handleUpstreamChange, setUpstream, testUps
 import Settings from '../components/Settings';
 
 const mapStateToProps = (state) => {
-    const { settings } = state;
-    const props = { settings };
+    const { settings, dashboard } = state;
+    const props = { settings, dashboard };
     return props;
 };
 

client/src/reducers/index.js

@@ -27,10 +27,6 @@ const settings = handleActions({
     [actions.setUpstreamRequest]: state => ({ ...state, processingUpstream: true }),
     [actions.setUpstreamFailure]: state => ({ ...state, processingUpstream: false }),
     [actions.setUpstreamSuccess]: state => ({ ...state, processingUpstream: false }),
-    [actions.handleUpstreamChange]: (state, { payload }) => {
-        const { upstream } = payload;
-        return { ...state, upstream };
-    },
 
     [actions.testUpstreamRequest]: state => ({ ...state, processingTestUpstream: true }),
     [actions.testUpstreamFailure]: state => ({ ...state, processingTestUpstream: false }),
@@ -39,7 +35,6 @@ const settings = handleActions({
     processing: true,
     processingTestUpstream: false,
     processingSetUpstream: false,
-    upstream: '',
 });
 
 const dashboard = handleActions({
@@ -52,6 +47,7 @@ const dashboard = handleActions({
             dns_port: dnsPort,
             dns_address: dnsAddress,
             querylog_enabled: queryLogEnabled,
+            upstream_dns: upstreamDns,
         } = payload;
         const newState = {
             ...state,
@@ -61,6 +57,7 @@ const dashboard = handleActions({
             dnsPort,
             dnsAddress,
             queryLogEnabled,
+            upstreamDns: upstreamDns.join('\n'),
         };
         return newState;
     },
@@ -141,6 +138,11 @@ const dashboard = handleActions({
         const newSetting = { ...state, isFilteringEnabled: !state.isFilteringEnabled };
         return newSetting;
     },
+
+    [actions.handleUpstreamChange]: (state, { payload }) => {
+        const { upstreamDns } = payload;
+        return { ...state, upstreamDns };
+    },
 }, {
     processing: true,
     isCoreRunning: false,
@@ -149,6 +151,7 @@ const dashboard = handleActions({
     logStatusProcessing: false,
     processingVersion: true,
     processingFiltering: true,
+    upstreamDns: [],
 });
 
 const queryLogs = handleActions({