mirrors
/
AdGuardHome
mirror of https://github.com/AdguardTeam/AdGuardHome.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

- client: fix upstream DNS servers form 

Closes #1000
This commit is contained in:
Ildar Kamalov 2019-09-17 12:22:15 +03:00
parent 48a4df1a9f
commit 0a26ee4224
8 changed files with 360 additions and 296 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
client/src/actions/index.js
View File

@ -227,7 +227,22 @@ export const getDnsStatus = () => async (dispatch) => {
dispatch(getTlsStatus());
} catch (error) {
dispatch(addErrorToast({ error }));
dispatch(initSettingsFailure());
dispatch(dnsStatusFailure());
}
};
export const getDnsSettingsRequest = createAction('GET_DNS_SETTINGS_REQUEST');
export const getDnsSettingsFailure = createAction('GET_DNS_SETTINGS_FAILURE');
export const getDnsSettingsSuccess = createAction('GET_DNS_SETTINGS_SUCCESS');
export const getDnsSettings = () => async (dispatch) => {
dispatch(getDnsSettingsRequest());
try {
const dnsStatus = await apiClient.getGlobalStatus();
dispatch(getDnsSettingsSuccess(dnsStatus));
} catch (error) {
dispatch(addErrorToast({ error }));
dispatch(getDnsSettingsFailure());
}
};
@ -279,7 +294,7 @@ export const setUpstream = config => async (dispatch) => {
await apiClient.setUpstream(values);
dispatch(addSuccessToast('updated_upstream_dns_toast'));
dispatch(setUpstreamSuccess());
dispatch(setUpstreamSuccess(config));
} catch (error) {
dispatch(addErrorToast({ error }));
dispatch(setUpstreamFailure());

20
client/src/components/Settings/Dns/Access/Form.js
View File

@ -5,7 +5,9 @@ import { Trans, withNamespaces } from 'react-i18next';
import flow from 'lodash/flow';
const Form = (props) => {
const { handleSubmit, submitting, invalid } = props;
const {
handleSubmit, submitting, invalid, processingSet,
} = props;
return (
<form onSubmit={handleSubmit}>
@ -22,6 +24,7 @@ const Form = (props) => {
component="textarea"
type="text"
className="form-control form-control--textarea"
disabled={processingSet}
/>
</div>
<div className="form__group mb-5">
@ -37,6 +40,7 @@ const Form = (props) => {
component="textarea"
type="text"
className="form-control form-control--textarea"
disabled={processingSet}
/>
</div>
<div className="form__group mb-5">
@ -52,6 +56,7 @@ const Form = (props) => {
component="textarea"
type="text"
className="form-control form-control--textarea"
disabled={processingSet}
/>
</div>
<div className="card-actions">
@ -59,7 +64,7 @@ const Form = (props) => {
<button
type="submit"
className="btn btn-success btn-standard"
disabled={submitting || invalid}
disabled={submitting || invalid || processingSet}
>
<Trans>save_config</Trans>
</button>
@ -70,11 +75,12 @@ const Form = (props) => {
};
Form.propTypes = {
handleSubmit: PropTypes.func,
submitting: PropTypes.bool,
invalid: PropTypes.bool,
initialValues: PropTypes.object,
t: PropTypes.func,
handleSubmit: PropTypes.func.isRequired,
submitting: PropTypes.bool.isRequired,
invalid: PropTypes.bool.isRequired,
initialValues: PropTypes.object.isRequired,
processingSet: PropTypes.bool.isRequired,
t: PropTypes.func.isRequired,
};
export default flow([withNamespaces(), reduxForm({ form: 'accessForm' })])(Form);

7
client/src/components/Settings/Dns/Access/index.js
View File

@ -13,11 +13,7 @@ class Access extends Component {
render() {
const { t, access } = this.props;
const {
processing,
processingSet,
...values
} = access;
const { processing, processingSet, ...values } = access;
return (
<Card
@ -28,6 +24,7 @@ class Access extends Component {
<Form
initialValues={values}
onSubmit={this.handleFormSubmit}
processingSet={processingSet}
/>
</Card>
);

10
client/src/components/Settings/Dns/Upstream/Form.js
View File

@ -43,6 +43,7 @@ let Form = (props) => {
type="text"
className="form-control form-control--textarea"
placeholder={t('upstream_dns')}
disabled={processingSetUpstream || processingTestUpstream}
/>
</div>
</div>
@ -53,6 +54,7 @@ let Form = (props) => {
type="checkbox"
component={renderSelectField}
placeholder={t('upstream_parallel')}
disabled={processingSetUpstream}
/>
</div>
</div>
@ -62,7 +64,10 @@ let Form = (props) => {
</div>
<div className="col-12">
<div className="form__group">
<label className="form__label form__label--with-desc" htmlFor="bootstrap_dns">
<label
className="form__label form__label--with-desc"
htmlFor="bootstrap_dns"
>
<Trans>bootstrap_dns</Trans>
</label>
<div className="form__desc form__desc--top">
@ -73,8 +78,9 @@ let Form = (props) => {
name="bootstrap_dns"
component="textarea"
type="text"
className="form-control"
className="form-control form-control--textarea form-control--textarea-small"
placeholder={t('bootstrap_dns')}
disabled={processingSetUpstream}
/>
</div>
</div>

11
client/src/components/Settings/Dns/index.js
View File

@ -10,6 +10,7 @@ import Loading from '../../ui/Loading';
class Dns extends Component {
componentDidMount() {
this.props.getDnsSettings();
this.props.getAccessList();
this.props.getRewritesList();
}
@ -30,11 +31,16 @@ class Dns extends Component {
toggleRewritesModal,
} = this.props;
const isDataLoading =
dashboard.processingDnsSettings || access.processing || rewrites.processing;
const isDataReady =
!dashboard.processingDnsSettings && !access.processing && !rewrites.processing;
return (
<Fragment>
<PageTitle title={t('dns_settings')} />
{(dashboard.processing || access.processing) && <Loading />}
{!dashboard.processing && !access.processing && (
{isDataLoading && <Loading />}
{isDataReady && (
<Fragment>
<Upstream
upstreamDns={dashboard.upstreamDns}
@ -73,6 +79,7 @@ Dns.propTypes = {
addRewrite: PropTypes.func.isRequired,
deleteRewrite: PropTypes.func.isRequired,
toggleRewritesModal: PropTypes.func.isRequired,
getDnsSettings: PropTypes.func.isRequired,
t: PropTypes.func.isRequired,
};

5
client/src/components/Settings/Settings.css
View File

@ -38,6 +38,11 @@
.form-control--textarea {
min-height: 110px;
transition: 0.3s ease-in-out background-color;
}
.form-control--textarea-small {
min-height: 90px;
}
.form-control--textarea-large {

3
client/src/containers/Dns.js
View File

@ -1,5 +1,5 @@
import { connect } from 'react-redux';
import { handleUpstreamChange, setUpstream, testUpstream } from '../actions';
import { handleUpstreamChange, setUpstream, testUpstream, getDnsSettings } from '../actions';
import { getAccessList, setAccessList } from '../actions/access';
import {
getRewritesList,
@ -32,6 +32,7 @@ const mapDispatchToProps = {
addRewrite,
deleteRewrite,
toggleRewritesModal,
getDnsSettings,
};
export default connect(

75
client/src/reducers/index.js
View File

@ -15,7 +15,8 @@ import stats from './stats';
import queryLogs from './queryLogs';
import filtering from './filtering';
const settings = handleActions({
const settings = handleActions(
{
[actions.initSettingsRequest]: state => ({ ...state, processing: true }),
[actions.initSettingsFailure]: state => ({ ...state, processing: false }),
[actions.initSettingsSuccess]: (state, { payload }) => {
@ -33,22 +34,29 @@ const settings = handleActions({
const newSettingsList = { ...settingsList, [settingKey]: newSetting };
return { ...state, settingsList: newSettingsList };
},
[actions.setUpstreamRequest]: state => ({ ...state, processingUpstream: true }),
[actions.setUpstreamFailure]: state => ({ ...state, processingUpstream: false }),
[actions.setUpstreamSuccess]: state => ({ ...state, processingUpstream: false }),
[actions.setUpstreamRequest]: state => ({ ...state, processingSetUpstream: true }),
[actions.setUpstreamFailure]: state => ({ ...state, processingSetUpstream: false }),
[actions.setUpstreamSuccess]: (state, { payload }) => ({
...state,
...payload,
processingSetUpstream: false,
}),
[actions.testUpstreamRequest]: state => ({ ...state, processingTestUpstream: true }),
[actions.testUpstreamFailure]: state => ({ ...state, processingTestUpstream: false }),
[actions.testUpstreamSuccess]: state => ({ ...state, processingTestUpstream: false }),
}, {
},
{
processing: true,
processingTestUpstream: false,
processingSetUpstream: false,
processingDhcpStatus: false,
settingsList: {},
});
},
);
const dashboard = handleActions({
const dashboard = handleActions(
{
[actions.dnsStatusRequest]: state => ({ ...state, processing: true }),
[actions.dnsStatusFailure]: state => ({ ...state, processing: false }),
[actions.dnsStatusSuccess]: (state, { payload }) => {
@ -163,13 +171,33 @@ const dashboard = handleActions({
};
return newState;
},
}, {
[actions.getDnsSettingsRequest]: state => ({ ...state, processingDnsSettings: true }),
[actions.getDnsSettingsFailure]: state => ({ ...state, processingDnsSettings: false }),
[actions.getDnsSettingsSuccess]: (state, { payload }) => {
const {
upstream_dns: upstreamDns,
bootstrap_dns: bootstrapDns,
all_servers: allServers,
} = payload;
return {
...state,
allServers,
upstreamDns: (upstreamDns && upstreamDns.join('\n')) || '',
bootstrapDns: (bootstrapDns && bootstrapDns.join('\n')) || '',
processingDnsSettings: false,
};
},
},
{
processing: true,
isCoreRunning: false,
processingVersion: true,
processingFiltering: true,
processingClients: true,
processingUpdate: false,
processingDnsSettings: true,
upstreamDns: '',
bootstrapDns: '',
allServers: false,
@ -181,16 +209,15 @@ const dashboard = handleActions({
dnsVersion: '',
clients: [],
autoClients: [],
});
},
);
const dhcp = handleActions({
const dhcp = handleActions(
{
[actions.getDhcpStatusRequest]: state => ({ ...state, processing: true }),
[actions.getDhcpStatusFailure]: state => ({ ...state, processing: false }),
[actions.getDhcpStatusSuccess]: (state, { payload }) => {
const {
static_leases: staticLeases,
...values
} = payload;
const { static_leases: staticLeases, ...values } = payload;
const newState = {
...state,
@ -216,10 +243,7 @@ const dhcp = handleActions({
[actions.findActiveDhcpRequest]: state => ({ ...state, processingStatus: true }),
[actions.findActiveDhcpFailure]: state => ({ ...state, processingStatus: false }),
[actions.findActiveDhcpSuccess]: (state, { payload }) => {
const {
other_server: otherServer,
static_ip: staticIP,
} = payload;
const { other_server: otherServer, static_ip: staticIP } = payload;
const newState = {
...state,
@ -238,7 +262,10 @@ const dhcp = handleActions({
const { config } = state;
const newConfig = { ...config, enabled: !config.enabled };
const newState = {
...state, config: newConfig, check: null, processingDhcp: false,
...state,
config: newConfig,
check: null,
processingDhcp: false,
};
return newState;
},
@ -263,9 +290,7 @@ const dhcp = handleActions({
[actions.addStaticLeaseRequest]: state => ({ ...state, processingAdding: true }),
[actions.addStaticLeaseFailure]: state => ({ ...state, processingAdding: false }),
[actions.addStaticLeaseSuccess]: (state, { payload }) => {
const {
ip, mac, hostname,
} = payload;
const { ip, mac, hostname } = payload;
const newLease = {
ip,
mac,
@ -292,7 +317,8 @@ const dhcp = handleActions({
};
return newState;
},
}, {
},
{
processing: true,
processingStatus: false,
processingInterfaces: false,
@ -307,7 +333,8 @@ const dhcp = handleActions({
leases: [],
staticLeases: [],
isModalOpen: false,
});
},
);
export default combineReducers({
settings,