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

Added initial layout for DHCP server config

This commit is contained in:
Ildar Kamalov 2018-12-12 18:12:51 +03:00 committed by Eugene Bujak
parent 390883126c
commit dd21f497e3
13 changed files with 514 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
client/package-lock.json generated vendored
View File

@ -4126,6 +4126,11 @@
"next-tick": "1"
}
},
"es6-error": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/es6-error/-/es6-error-4.1.1.tgz",
"integrity": "sha512-Um/+FxMr9CISWh0bi5Zv0iOD+4cFh5qLeks1qhAopKVAJw3drgKbKySikp7wGhDL0HPeaja0P5ULZrxLkniUVg=="
},
"es6-iterator": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz",
@ -6588,7 +6593,7 @@
},
"html-webpack-plugin": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-3.2.0.tgz",
"resolved": "http://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-3.2.0.tgz",
"integrity": "sha1-sBq71yOsqqeze2r0SS69oD2d03s=",
"dev": true,
"requires": {
@ -6638,7 +6643,7 @@
},
"readable-stream": {
"version": "1.0.34",
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
"resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
"integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=",
"dev": true,
"requires": {
@ -7387,8 +7392,7 @@
"is-promise": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.1.0.tgz",
"integrity": "sha1-eaKp7OfwlugPNtKy87wWwf9L8/o=",
"dev": true
"integrity": "sha1-eaKp7OfwlugPNtKy87wWwf9L8/o="
},
"is-regex": {
"version": "1.0.4",
@ -13202,6 +13206,21 @@
"reduce-reducers": "^0.1.0"
}
},
"redux-form": {
"version": "7.4.2",
"resolved": "https://registry.npmjs.org/redux-form/-/redux-form-7.4.2.tgz",
"integrity": "sha512-QxC36s4Lelx5Cr8dbpxqvl23dwYOydeAX8c6YPmgkz/Dhj053C16S2qoyZN6LO6HJ2oUF00rKsAyE94GwOUhFA==",
"requires": {
"es6-error": "^4.1.1",
"hoist-non-react-statics": "^2.5.4",
"invariant": "^2.2.4",
"is-promise": "^2.1.0",
"lodash": "^4.17.10",
"lodash-es": "^4.17.10",
"prop-types": "^15.6.1",
"react-lifecycles-compat": "^3.0.4"
}
},
"redux-thunk": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.3.0.tgz",
@ -15003,7 +15022,7 @@
},
"through": {
"version": "2.3.8",
"resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
"resolved": "http://registry.npmjs.org/through/-/through-2.3.8.tgz",
"integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=",
"dev": true
},

1
client/package.json vendored
View File

@ -31,6 +31,7 @@
"react-transition-group": "^2.4.0",
"redux": "^4.0.0",
"redux-actions": "^2.4.0",
"redux-form": "^7.4.2",
"redux-thunk": "^2.3.0",
"svg-url-loader": "^2.3.2",
"whatwg-fetch": "2.0.3"

15
client/src/__locales/en.json
View File

@ -127,5 +127,16 @@
"category_label": "Category",
"rule_label": "Rule",
"filter_label": "Filter",
"unknown_filter": "Unknown filter {{filterId}}"
}
"unknown_filter": "Unknown filter {{filterId}}",
"refresh_status": "Refresh status",
"save_config": "Save config",
"enabled_dhcp": "DHCP server enabled",
"disabled_dhcp": "DHCP server disabled",
"dhcp_title": "DHCP server",
"dhcp_description": "If your router does not provide DHCP settings, you can use AdGuard's own built-in DHCP server.",
"dhcp_enable": "Enable DHCP server",
"dhcp_disable": "Disable DHCP server",
"dhcp_not_found": "No active DHCP servers found on the network. It is safe to enable the built-in DHCP server.",
"dhcp_leases": "DHCP leases",
"dhcp_leases_not_found": "No DHCP leases found"
}

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

@ -522,3 +522,73 @@ export const getLanguage = () => async (dispatch) => {
dispatch(getLanguageFailure());
}
};
export const getDhcpStatusRequest = createAction('GET_DHCP_STATUS_REQUEST');
export const getDhcpStatusSuccess = createAction('GET_DHCP_STATUS_SUCCESS');
export const getDhcpStatusFailure = createAction('GET_DHCP_STATUS_FAILURE');
export const getDhcpStatus = () => async (dispatch) => {
dispatch(getDhcpStatusRequest());
try {
const status = await apiClient.getDhcpStatus();
dispatch(getDhcpStatusSuccess(status));
} catch (error) {
dispatch(addErrorToast({ error }));
dispatch(getDhcpStatusFailure());
}
};
export const setDhcpConfigRequest = createAction('SET_DHCP_CONFIG_REQUEST');
export const setDhcpConfigSuccess = createAction('SET_DHCP_CONFIG_SUCCESS');
export const setDhcpConfigFailure = createAction('SET_DHCP_CONFIG_FAILURE');
export const setDhcpConfig = config => async (dispatch) => {
dispatch(setDhcpConfigRequest());
try {
await apiClient.setDhcpConfig(config);
dispatch(setDhcpConfigSuccess());
} catch (error) {
dispatch(addErrorToast({ error }));
dispatch(setDhcpConfigFailure());
}
};
export const findActiveDhcpRequest = createAction('FIND_ACTIVE_DHCP_REQUEST');
export const findActiveDhcpSuccess = createAction('FIND_ACTIVE_DHCP_SUCCESS');
export const findActiveDhcpFailure = createAction('FIND_ACTIVE_DHCP_FAILURE');
export const findActiveDhcp = () => async (dispatch) => {
dispatch(findActiveDhcpRequest());
try {
const result = await apiClient.findActiveDhcp();
dispatch(findActiveDhcpSuccess(result));
} catch (error) {
dispatch(addErrorToast({ error }));
dispatch(findActiveDhcpFailure());
}
};
export const toggleDhcpRequest = createAction('TOGGLE_DHCP_REQUEST');
export const toggleDhcpFailure = createAction('TOGGLE_DHCP_FAILURE');
export const toggleDhcpSuccess = createAction('TOGGLE_DHCP_SUCCESS');
export const toggleDhcp = status => async (dispatch) => {
dispatch(toggleDhcpRequest());
let successMessage = '';
try {
if (status) {
successMessage = 'disabled_dhcp';
await apiClient.disableGlobalProtection();
} else {
successMessage = 'enabled_dhcp';
await apiClient.enableGlobalProtection();
}
dispatch(addSuccessToast(successMessage));
dispatch(toggleDhcpSuccess());
} catch (error) {
dispatch(addErrorToast({ error }));
dispatch(toggleDhcpFailure());
}
};

67
client/src/api/Api.js
View File

@ -302,4 +302,71 @@ export default class Api {
};
return this.makeRequest(path, method, parameters);
}
// DHCP
DHCP_STATUS = { path: 'dhcp/status', method: 'GET' };
DHCP_SET_CONFIG = { path: 'dhcp/set_config', method: 'POST' };
DHCP_FIND_ACTIVE = { path: 'dhcp/find_active_dhcp', method: 'GET' };
getDhcpStatus() {
// const { path, method } = this.DHCP_STATUS;
// return this.makeRequest(path, method);
const example = {
config: {
enabled: false,
gateway_ip: '192.168.1.1',
subnet_mask: '255.255.255.0',
range_start: '192.168.1.2',
range_end: '192.168.10.50',
lease_duration: '43200',
},
leases: [
{
mac: '001109b3b3b8',
ip: '192.168.1.22',
hostname: 'dell',
expires: '2017-07-21T17:32:28Z',
},
{
mac: '001109b3b3b9',
ip: '192.168.1.23',
hostname: 'dell',
expires: '2017-07-21T17:32:28Z',
},
],
};
return new Promise((resolve) => {
setTimeout(() => {
resolve(example);
}, 1000);
});
}
setDhcpConfig(config) {
// const { path, method } = this.DHCP_SET_CONFIG;
// const parameters = config;
// return this.makeRequest(path, method, parameters);
return new Promise((resolve) => {
setTimeout(() => {
resolve(window.alert(`Set config:\n\n${JSON.stringify(config, null, 2)}`));
}, 1000);
});
}
findActiveDhcp() {
// const { path, method } = this.DHCP_FIND_ACTIVE;
// return this.makeRequest(path, method);
return new Promise((resolve) => {
setTimeout(() => {
resolve({
gateway_ip: '127.0.0.1',
found: true,
});
}, 10000);
});
}
}

134
client/src/components/Settings/Dhcp/Form.js Normal file
View File

@ -0,0 +1,134 @@
import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import { Field, reduxForm } from 'redux-form';
import { R_IPV4 } from '../../../helpers/constants';
const required = (value) => {
if (value) {
return false;
}
return 'Required field';
};
const ipv4 = (value) => {
if (value && !new RegExp(R_IPV4).test(value)) {
return 'Invalid IPv4 format';
}
return false;
};
const renderField = ({
input, className, placeholder, type, disabled, meta: { touched, error },
}) => (
<Fragment>
<input
{...input}
placeholder={placeholder}
type={type}
className={className}
disabled={disabled}
/>
{!disabled && touched && (error && <span className="form__message form__message--error">{error}</span>)}
</Fragment>
);
const Form = (props) => {
const {
handleSubmit, pristine, submitting, enabled,
} = props;
return (
<form onSubmit={handleSubmit}>
<div className="row">
<div className="col-lg-6">
<div className="form__group form__group--dhcp">
<label>Gateway IP</label>
<Field
name="gateway_ip"
component={renderField}
type="text"
className="form-control"
placeholder="Gateway IP"
validate={[ipv4, required]}
disabled={!enabled}
/>
</div>
<div className="form__group form__group--dhcp">
<label>Subnet mask</label>
<Field
name="subnet_mask"
component={renderField}
type="text"
className="form-control"
placeholder="Subnet mask"
validate={[ipv4, required]}
disabled={!enabled}
/>
</div>
</div>
<div className="col-lg-6">
<div className="form__group form__group--dhcp">
<div className="row">
<div className="col-12">
<label>Range of IP addresses</label>
</div>
<div className="col">
<Field
name="range_start"
component={renderField}
type="text"
className="form-control"
placeholder="Range start"
validate={[ipv4, required]}
disabled={!enabled}
/>
</div>
<div className="col">
<Field
name="range_end"
component={renderField}
type="text"
className="form-control"
placeholder="Range end"
validate={[ipv4, required]}
disabled={!enabled}
/>
</div>
</div>
</div>
<div className="form__group form__group--dhcp">
<label>DHCP lease time (in seconds)</label>
<Field
name="lease_duration"
component={renderField}
type="number"
className="form-control"
placeholder="Lease duration"
validate={[required]}
disabled={!enabled}
/>
</div>
</div>
</div>
<button
type="submit"
className="btn btn-success btn-standart"
disabled={pristine || submitting || !enabled}
>
Save config
</button>
</form>
);
};
Form.propTypes = {
handleSubmit: PropTypes.func,
pristine: PropTypes.bool,
submitting: PropTypes.bool,
enabled: PropTypes.bool,
};
export default reduxForm({
form: 'dhcpForm',
})(Form);

36
client/src/components/Settings/Dhcp/Leases.js Normal file
View File

@ -0,0 +1,36 @@
import React from 'react';
import PropTypes from 'prop-types';
import ReactTable from 'react-table';
import { withNamespaces } from 'react-i18next';
const columns = [{
Header: 'MAC',
accessor: 'mac',
}, {
Header: 'IP',
accessor: 'ip',
}, {
Header: 'Hostname',
accessor: 'hostname',
}, {
Header: 'Expires',
accessor: 'expires',
}];
const Leases = props => (
<ReactTable
data={props.leases}
columns={columns}
showPagination={false}
noDataText={ props.t('dhcp_leases_not_found') }
minRows={6}
className="-striped -highlight card-table-overflow"
/>
);
Leases.propTypes = {
leases: PropTypes.array,
t: PropTypes.func,
};
export default withNamespaces()(Leases);

93
client/src/components/Settings/Dhcp/index.js Normal file
View File

@ -0,0 +1,93 @@
import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { Trans, withNamespaces } from 'react-i18next';
import Form from './Form';
import Leases from './Leases';
import Card from '../../ui/Card';
class Dhcp extends Component {
handleFormSubmit = (values) => {
this.props.setDhcpConfig(values);
};
handleRefresh = () => {
this.props.findActiveDhcp();
}
getToggleDhcpButton = () => {
const { enabled } = this.props.dhcp.config;
const buttonText = enabled ? 'dhcp_disable' : 'dhcp_enable';
const buttonClass = enabled ? 'btn-gray' : 'btn-success';
return (
<button type="button" className={`btn btn-standart mr-2 ${buttonClass}`} onClick={() => this.props.toggleDhcp(enabled)}>
<Trans>{buttonText}</Trans>
</button>
);
}
render() {
const { t, dhcp } = this.props;
const statusButtonClass = classnames({
'btn btn-primary btn-standart': true,
'btn btn-primary btn-standart btn-loading': dhcp.processingStatus,
});
return (
<Fragment>
{!dhcp.processing &&
<Card title={ t('dhcp_title') } subtitle={ t('dhcp_description') } bodyType="card-body box-body--settings">
<div className="row">
<div className="col">
<div className="card-actions mt-0 mb-3">
{this.getToggleDhcpButton()}
<button
className={statusButtonClass}
type="button"
onClick={this.handleRefresh}
>
<Trans>refresh_status</Trans>
</button>
</div>
{dhcp.active && !dhcp.active.found &&
<div className="text-secondary">
<Trans>dhcp_not_found</Trans>
</div>
}
<hr/>
<Form
onSubmit={this.handleFormSubmit}
initialValues={dhcp.config}
enabled={dhcp.config.enabled}
/>
</div>
</div>
</Card>
}
{!dhcp.processing && dhcp.config.enabled &&
<Card title={ t('dhcp_leases') } bodyType="card-body box-body--settings">
<div className="row">
<div className="col">
<Leases leases={dhcp.leases} />
</div>
</div>
</Card>
}
</Fragment>
);
}
}
Dhcp.propTypes = {
dhcp: PropTypes.object,
toggleDhcp: PropTypes.func,
getDhcpStatus: PropTypes.func,
setDhcpConfig: PropTypes.func,
findActiveDhcp: PropTypes.func,
handleSubmit: PropTypes.func,
t: PropTypes.func,
};
export default withNamespaces()(Dhcp);

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

@ -1,4 +1,5 @@
.form__group {
position: relative;
margin-bottom: 15px;
}
@ -6,6 +7,10 @@
margin-bottom: 0;
}
.form__group--dhcp:last-child {
margin-bottom: 15px;
}
.btn-standart {
padding-left: 20px;
padding-right: 20px;
@ -18,3 +23,11 @@
.form-control--textarea-large {
min-height: 240px;
}
.form__message {
font-size: 11px;
}
.form__message--error {
color: #cd201f;
}

9
client/src/components/Settings/index.js
View File

@ -2,6 +2,7 @@ import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';
import { withNamespaces, Trans } from 'react-i18next';
import Upstream from './Upstream';
import Dhcp from './Dhcp';
import Checkbox from '../ui/Checkbox';
import Loading from '../ui/Loading';
import PageTitle from '../ui/PageTitle';
@ -34,6 +35,7 @@ class Settings extends Component {
componentDidMount() {
this.props.initSettings(this.settings);
this.props.getDhcpStatus();
}
handleUpstreamChange = (value) => {
@ -92,6 +94,13 @@ class Settings extends Component {
handleUpstreamSubmit={this.handleUpstreamSubmit}
handleUpstreamTest={this.handleUpstreamTest}
/>
<Dhcp
dhcp={this.props.dhcp}
toggleDhcp={this.props.toggleDhcp}
getDhcpStatus={this.props.getDhcpStatus}
findActiveDhcp={this.props.findActiveDhcp}
setDhcpConfig={this.props.setDhcpConfig}
/>
</div>
</div>
</div>

21
client/src/containers/Settings.js
View File

@ -1,10 +1,21 @@
import { connect } from 'react-redux';
import { initSettings, toggleSetting, handleUpstreamChange, setUpstream, testUpstream, addErrorToast } from '../actions';
import {
initSettings,
toggleSetting,
handleUpstreamChange,
setUpstream,
testUpstream,
addErrorToast,
toggleDhcp,
getDhcpStatus,
setDhcpConfig,
findActiveDhcp,
} from '../actions';
import Settings from '../components/Settings';
const mapStateToProps = (state) => {
const { settings, dashboard } = state;
const props = { settings, dashboard };
const { settings, dashboard, dhcp } = state;
const props = { settings, dashboard, dhcp };
return props;
};
@ -15,6 +26,10 @@ const mapDispatchToProps = {
setUpstream,
testUpstream,
addErrorToast,
toggleDhcp,
getDhcpStatus,
setDhcpConfig,
findActiveDhcp,
};
export default connect(

1
client/src/helpers/constants.js
View File

@ -1,4 +1,5 @@
export const R_URL_REQUIRES_PROTOCOL = /^https?:\/\/\w[\w_\-.]*\.[a-z]{2,8}[^\s]*$/;
export const R_IPV4 = /^(?:(?:^|\.)(?:2(?:5[0-5]|[0-4]\d)|1?\d?\d)){4}$/g;
export const STATS_NAMES = {
avg_processing_time: 'average_processing_time',

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

@ -2,6 +2,7 @@ import { combineReducers } from 'redux';
import { handleActions } from 'redux-actions';
import { loadingBarReducer } from 'react-redux-loading-bar';
import nanoid from 'nanoid';
import { reducer as formReducer } from 'redux-form';
import versionCompare from '../helpers/versionCompare';
import * as actions from '../actions';
@ -35,6 +36,7 @@ const settings = handleActions({
processing: true,
processingTestUpstream: false,
processingSetUpstream: false,
processingDhcpStatus: false,
});
const dashboard = handleActions({
@ -258,11 +260,44 @@ const toasts = handleActions({
},
}, { notices: [] });
const dhcp = handleActions({
[actions.getDhcpStatusRequest]: state => ({ ...state, processing: true }),
[actions.getDhcpStatusFailure]: state => ({ ...state, processing: false }),
[actions.getDhcpStatusSuccess]: (state, { payload }) => {
const newState = {
...state,
...payload,
processing: false,
};
return newState;
},
[actions.findActiveDhcpRequest]: state => ({ ...state, processingStatus: true }),
[actions.findActiveDhcpFailure]: state => ({ ...state, processingStatus: false }),
[actions.findActiveDhcpSuccess]: (state, { payload }) => ({
...state,
active: payload,
processingStatus: false,
}),
[actions.toggleDhcpSuccess]: (state) => {
const { config } = state;
const newConfig = { ...config, enabled: !config.enabled };
const newState = { ...state, config: newConfig };
return newState;
},
}, {
processing: true,
processingStatus: false,
});
export default combineReducers({
settings,
dashboard,
queryLogs,
filtering,
toasts,
dhcp,
loadingBar: loadingBarReducer,
form: formReducer,
});