+ client: Refactor DHCP settings
This commit is contained in:
Artem Baskal
committed by
Simon Zolin
Simon Zolin
parent
c9f58ce4a7
commit
1d35d73fc5
@@ -15,7 +15,7 @@ import { toggleAllServices } from '../../../helpers/helpers';
|
||||
import {
|
||||
renderInputField,
|
||||
renderGroupField,
|
||||
renderSelectField,
|
||||
renderCheckboxField,
|
||||
renderServiceField,
|
||||
} from '../../../helpers/form';
|
||||
import { validateClientId, validateRequiredValue } from '../../../helpers/validators';
|
||||
@@ -151,7 +151,7 @@ let Form = (props) => {
|
||||
<Field
|
||||
name={setting.name}
|
||||
type="checkbox"
|
||||
component={renderSelectField}
|
||||
component={renderCheckboxField}
|
||||
placeholder={t(setting.placeholder)}
|
||||
disabled={
|
||||
setting.name !== 'use_global_settings'
|
||||
|
||||
@@ -1,235 +0,0 @@
|
||||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Field, reduxForm, formValueSelector } from 'redux-form';
|
||||
import { Trans, withTranslation } from 'react-i18next';
|
||||
import flow from 'lodash/flow';
|
||||
import { renderInputField, toNumber } from '../../../helpers/form';
|
||||
import { FORM_NAME } from '../../../helpers/constants';
|
||||
import { validateIpv4, validateIsPositiveValue, validateRequiredValue } from '../../../helpers/validators';
|
||||
|
||||
const renderInterfaces = ((interfaces) => (
|
||||
Object.keys(interfaces).map((item) => {
|
||||
const option = interfaces[item];
|
||||
const { name } = option;
|
||||
const onlyIPv6 = option.ip_addresses.every((ip) => ip.includes(':'));
|
||||
let interfaceIP = option.ip_addresses[0];
|
||||
|
||||
if (!onlyIPv6) {
|
||||
option.ip_addresses.forEach((ip) => {
|
||||
if (!ip.includes(':')) {
|
||||
interfaceIP = ip;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<option value={name} key={name} disabled={onlyIPv6}>
|
||||
{name} - {interfaceIP}
|
||||
</option>
|
||||
);
|
||||
})
|
||||
));
|
||||
|
||||
const renderInterfaceValues = ((interfaceValues) => (
|
||||
<ul className="list-unstyled mt-1 mb-0">
|
||||
<li>
|
||||
<span className="interface__title">MTU: </span>
|
||||
{interfaceValues.mtu}
|
||||
</li>
|
||||
<li>
|
||||
<span className="interface__title"><Trans>dhcp_hardware_address</Trans>: </span>
|
||||
{interfaceValues.hardware_address}
|
||||
</li>
|
||||
<li>
|
||||
<span className="interface__title"><Trans>dhcp_ip_addresses</Trans>: </span>
|
||||
{
|
||||
interfaceValues.ip_addresses
|
||||
.map((ip) => <span key={ip} className="interface__ip">{ip}</span>)
|
||||
}
|
||||
</li>
|
||||
</ul>
|
||||
));
|
||||
|
||||
const clearFields = (change, resetDhcp, t) => {
|
||||
const fields = {
|
||||
interface_name: '',
|
||||
gateway_ip: '',
|
||||
subnet_mask: '',
|
||||
range_start: '',
|
||||
range_end: '',
|
||||
lease_duration: 86400,
|
||||
};
|
||||
|
||||
// eslint-disable-next-line no-alert
|
||||
if (window.confirm(t('dhcp_reset'))) {
|
||||
Object.keys(fields).forEach((field) => change(field, fields[field]));
|
||||
resetDhcp();
|
||||
}
|
||||
};
|
||||
|
||||
let Form = (props) => {
|
||||
const {
|
||||
t,
|
||||
handleSubmit,
|
||||
submitting,
|
||||
invalid,
|
||||
enabled,
|
||||
interfaces,
|
||||
interfaceValue,
|
||||
processingConfig,
|
||||
processingInterfaces,
|
||||
resetDhcp,
|
||||
change,
|
||||
} = props;
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit}>
|
||||
{!processingInterfaces && interfaces
|
||||
&& <div className="row">
|
||||
<div className="col-sm-12 col-md-6">
|
||||
<div className="form__group form__group--settings">
|
||||
<label>{t('dhcp_interface_select')}</label>
|
||||
<Field
|
||||
name="interface_name"
|
||||
component="select"
|
||||
className="form-control custom-select"
|
||||
validate={[validateRequiredValue]}
|
||||
>
|
||||
<option value="" disabled={enabled}>
|
||||
{t('dhcp_interface_select')}
|
||||
</option>
|
||||
{renderInterfaces(interfaces)}
|
||||
</Field>
|
||||
</div>
|
||||
</div>
|
||||
{interfaceValue
|
||||
&& <div className="col-sm-12 col-md-6">
|
||||
{interfaces[interfaceValue]
|
||||
&& renderInterfaceValues(interfaces[interfaceValue])}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
<hr/>
|
||||
<div className="row">
|
||||
<div className="col-lg-6">
|
||||
<div className="form__group form__group--settings">
|
||||
<label>{t('dhcp_form_gateway_input')}</label>
|
||||
<Field
|
||||
id="gateway_ip"
|
||||
name="gateway_ip"
|
||||
component={renderInputField}
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder={t('dhcp_form_gateway_input')}
|
||||
validate={[validateIpv4, validateRequiredValue]}
|
||||
/>
|
||||
</div>
|
||||
<div className="form__group form__group--settings">
|
||||
<label>{t('dhcp_form_subnet_input')}</label>
|
||||
<Field
|
||||
id="subnet_mask"
|
||||
name="subnet_mask"
|
||||
component={renderInputField}
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder={t('dhcp_form_subnet_input')}
|
||||
validate={[validateIpv4, validateRequiredValue]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="form__group form__group--settings">
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<label>{t('dhcp_form_range_title')}</label>
|
||||
</div>
|
||||
<div className="col">
|
||||
<Field
|
||||
id="range_start"
|
||||
name="range_start"
|
||||
component={renderInputField}
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder={t('dhcp_form_range_start')}
|
||||
validate={[validateIpv4, validateRequiredValue]}
|
||||
/>
|
||||
</div>
|
||||
<div className="col">
|
||||
<Field
|
||||
id="range_end"
|
||||
name="range_end"
|
||||
component={renderInputField}
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder={t('dhcp_form_range_end')}
|
||||
validate={[validateIpv4, validateRequiredValue]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form__group form__group--settings">
|
||||
<label>{t('dhcp_form_lease_title')}</label>
|
||||
<Field
|
||||
name="lease_duration"
|
||||
component={renderInputField}
|
||||
type="number"
|
||||
className="form-control"
|
||||
placeholder={t('dhcp_form_lease_input')}
|
||||
validate={[validateRequiredValue, validateIsPositiveValue]}
|
||||
normalize={toNumber}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="btn-list">
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-success btn-standard"
|
||||
disabled={submitting || invalid || processingConfig}
|
||||
>
|
||||
{t('save_config')}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-secondary btn-standart"
|
||||
disabled={submitting || processingConfig}
|
||||
onClick={() => clearFields(change, resetDhcp, t)}
|
||||
>
|
||||
<Trans>reset_settings</Trans>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
Form.propTypes = {
|
||||
handleSubmit: PropTypes.func.isRequired,
|
||||
submitting: PropTypes.bool.isRequired,
|
||||
invalid: PropTypes.bool.isRequired,
|
||||
interfaces: PropTypes.object.isRequired,
|
||||
interfaceValue: PropTypes.string,
|
||||
initialValues: PropTypes.object.isRequired,
|
||||
processingConfig: PropTypes.bool.isRequired,
|
||||
processingInterfaces: PropTypes.bool.isRequired,
|
||||
enabled: PropTypes.bool.isRequired,
|
||||
t: PropTypes.func.isRequired,
|
||||
resetDhcp: PropTypes.func.isRequired,
|
||||
change: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
const selector = formValueSelector(FORM_NAME.DHCP);
|
||||
|
||||
Form = connect((state) => {
|
||||
const interfaceValue = selector(state, 'interface_name');
|
||||
return {
|
||||
interfaceValue,
|
||||
};
|
||||
})(Form);
|
||||
|
||||
export default flow([
|
||||
withTranslation(),
|
||||
reduxForm({ form: FORM_NAME.DHCP }),
|
||||
])(Form);
|
||||
145
client/src/components/Settings/Dhcp/FormDHCPv4.js
Normal file
145
client/src/components/Settings/Dhcp/FormDHCPv4.js
Normal file
@@ -0,0 +1,145 @@
|
||||
import React, { useCallback } from 'react';
|
||||
import { shallowEqual, useSelector } from 'react-redux';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Field, reduxForm } from 'redux-form';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import {
|
||||
renderInputField,
|
||||
toNumber,
|
||||
} from '../../../helpers/form';
|
||||
import { FORM_NAME } from '../../../helpers/constants';
|
||||
import {
|
||||
validateIpv4,
|
||||
validateIsPositiveValue,
|
||||
validateRequiredValue,
|
||||
validateIpv4RangeEnd,
|
||||
} from '../../../helpers/validators';
|
||||
|
||||
const FormDHCPv4 = ({
|
||||
handleSubmit,
|
||||
submitting,
|
||||
processingConfig,
|
||||
ipv4placeholders,
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const dhcp = useSelector((state) => state.form[FORM_NAME.DHCPv4], shallowEqual);
|
||||
const interfaces = useSelector((state) => state.form[FORM_NAME.DHCP_INTERFACES], shallowEqual);
|
||||
const interface_name = interfaces?.values?.interface_name;
|
||||
|
||||
const isInterfaceIncludesIpv4 = useSelector(
|
||||
(state) => !!state.dhcp?.interfaces?.[interface_name]?.ipv4_addresses,
|
||||
);
|
||||
|
||||
const isEmptyConfig = !Object.values(dhcp?.values?.v4 ?? {})
|
||||
.some(Boolean);
|
||||
|
||||
const invalid = dhcp?.syncErrors || interfaces?.syncErrors || !isInterfaceIncludesIpv4
|
||||
|| isEmptyConfig || submitting || processingConfig;
|
||||
|
||||
const validateRequired = useCallback((value) => {
|
||||
if (isEmptyConfig) {
|
||||
return undefined;
|
||||
}
|
||||
return validateRequiredValue(value);
|
||||
}, [isEmptyConfig]);
|
||||
|
||||
return <form onSubmit={handleSubmit}>
|
||||
<div className="row">
|
||||
<div className="col-lg-6">
|
||||
<div className="form__group form__group--settings">
|
||||
<label>{t('dhcp_form_gateway_input')}</label>
|
||||
<Field
|
||||
name="v4.gateway_ip"
|
||||
component={renderInputField}
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder={t(ipv4placeholders.gateway_ip)}
|
||||
validate={[validateIpv4, validateRequired]}
|
||||
disabled={!isInterfaceIncludesIpv4}
|
||||
/>
|
||||
</div>
|
||||
<div className="form__group form__group--settings">
|
||||
<label>{t('dhcp_form_subnet_input')}</label>
|
||||
<Field
|
||||
name="v4.subnet_mask"
|
||||
component={renderInputField}
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder={t(ipv4placeholders.subnet_mask)}
|
||||
validate={[validateIpv4, validateRequired]}
|
||||
disabled={!isInterfaceIncludesIpv4}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<div className="form__group form__group--settings">
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<label>{t('dhcp_form_range_title')}</label>
|
||||
</div>
|
||||
<div className="col">
|
||||
<Field
|
||||
name="v4.range_start"
|
||||
component={renderInputField}
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder={t(ipv4placeholders.range_start)}
|
||||
validate={[validateIpv4]}
|
||||
disabled={!isInterfaceIncludesIpv4}
|
||||
/>
|
||||
</div>
|
||||
<div className="col">
|
||||
<Field
|
||||
name="v4.range_end"
|
||||
component={renderInputField}
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder={t(ipv4placeholders.range_end)}
|
||||
validate={[validateIpv4, validateIpv4RangeEnd]}
|
||||
disabled={!isInterfaceIncludesIpv4}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form__group form__group--settings">
|
||||
<label>{t('dhcp_form_lease_title')}</label>
|
||||
<Field
|
||||
name="v4.lease_duration"
|
||||
component={renderInputField}
|
||||
type="number"
|
||||
className="form-control"
|
||||
placeholder={t(ipv4placeholders.lease_duration)}
|
||||
validate={[validateIsPositiveValue, validateRequired]}
|
||||
normalize={toNumber}
|
||||
min={0}
|
||||
disabled={!isInterfaceIncludesIpv4}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="btn-list">
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-success btn-standard"
|
||||
disabled={invalid}
|
||||
>
|
||||
{t('save_config')}
|
||||
</button>
|
||||
</div>
|
||||
</form>;
|
||||
};
|
||||
|
||||
FormDHCPv4.propTypes = {
|
||||
handleSubmit: PropTypes.func.isRequired,
|
||||
submitting: PropTypes.bool.isRequired,
|
||||
initialValues: PropTypes.object.isRequired,
|
||||
processingConfig: PropTypes.bool.isRequired,
|
||||
change: PropTypes.func.isRequired,
|
||||
reset: PropTypes.func.isRequired,
|
||||
ipv4placeholders: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
export default reduxForm({
|
||||
form: FORM_NAME.DHCPv4,
|
||||
})(FormDHCPv4);
|
||||
120
client/src/components/Settings/Dhcp/FormDHCPv6.js
Normal file
120
client/src/components/Settings/Dhcp/FormDHCPv6.js
Normal file
@@ -0,0 +1,120 @@
|
||||
import React, { useCallback } from 'react';
|
||||
import { shallowEqual, useSelector } from 'react-redux';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Field, reduxForm } from 'redux-form';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import {
|
||||
renderInputField,
|
||||
toNumber,
|
||||
} from '../../../helpers/form';
|
||||
import { FORM_NAME } from '../../../helpers/constants';
|
||||
import {
|
||||
validateIpv6,
|
||||
validateIsPositiveValue,
|
||||
validateRequiredValue,
|
||||
} from '../../../helpers/validators';
|
||||
|
||||
const FormDHCPv6 = ({
|
||||
handleSubmit,
|
||||
submitting,
|
||||
processingConfig,
|
||||
ipv6placeholders,
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const dhcp = useSelector((state) => state.form[FORM_NAME.DHCPv6], shallowEqual);
|
||||
const interfaces = useSelector((state) => state.form[FORM_NAME.DHCP_INTERFACES], shallowEqual);
|
||||
const interface_name = interfaces?.values?.interface_name;
|
||||
|
||||
const isInterfaceIncludesIpv6 = useSelector(
|
||||
(state) => !!state.dhcp?.interfaces?.[interface_name]?.ipv6_addresses,
|
||||
);
|
||||
|
||||
const isEmptyConfig = !Object.values(dhcp?.values?.v6 ?? {})
|
||||
.some(Boolean);
|
||||
|
||||
const invalid = dhcp?.syncErrors || interfaces?.syncErrors || !isInterfaceIncludesIpv6
|
||||
|| isEmptyConfig || submitting || processingConfig;
|
||||
|
||||
const validateRequired = useCallback((value) => {
|
||||
if (isEmptyConfig) {
|
||||
return undefined;
|
||||
}
|
||||
return validateRequiredValue(value);
|
||||
}, [isEmptyConfig]);
|
||||
|
||||
return <form onSubmit={handleSubmit}>
|
||||
<div className="row">
|
||||
<div className="col-lg-6">
|
||||
<div className="form__group form__group--settings">
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<label>{t('dhcp_form_range_title')}</label>
|
||||
</div>
|
||||
<div className="col">
|
||||
<Field
|
||||
name="v6.range_start"
|
||||
component={renderInputField}
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder={t(ipv6placeholders.range_start)}
|
||||
validate={[validateIpv6, validateRequired]}
|
||||
disabled={!isInterfaceIncludesIpv6}
|
||||
/>
|
||||
</div>
|
||||
<div className="col">
|
||||
<Field
|
||||
name="v6.range_end"
|
||||
component="input"
|
||||
type="text"
|
||||
className="form-control disabled cursor--not-allowed"
|
||||
placeholder={t(ipv6placeholders.range_end)}
|
||||
value={t(ipv6placeholders.range_end)}
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-lg-6 form__group form__group--settings">
|
||||
<label>{t('dhcp_form_lease_title')}</label>
|
||||
<Field
|
||||
name="v6.lease_duration"
|
||||
component={renderInputField}
|
||||
type="number"
|
||||
className="form-control"
|
||||
placeholder={t(ipv6placeholders.lease_duration)}
|
||||
validate={[validateIsPositiveValue, validateRequired]}
|
||||
normalizeOnBlur={toNumber}
|
||||
min={0}
|
||||
disabled={!isInterfaceIncludesIpv6}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="btn-list">
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-success btn-standard"
|
||||
disabled={invalid}
|
||||
>
|
||||
{t('save_config')}
|
||||
</button>
|
||||
</div>
|
||||
</form>;
|
||||
};
|
||||
|
||||
FormDHCPv6.propTypes = {
|
||||
handleSubmit: PropTypes.func.isRequired,
|
||||
submitting: PropTypes.bool.isRequired,
|
||||
initialValues: PropTypes.object.isRequired,
|
||||
processingConfig: PropTypes.bool.isRequired,
|
||||
change: PropTypes.func.isRequired,
|
||||
reset: PropTypes.func.isRequired,
|
||||
ipv6placeholders: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
export default reduxForm({
|
||||
form: FORM_NAME.DHCPv6,
|
||||
})(FormDHCPv6);
|
||||
109
client/src/components/Settings/Dhcp/Interfaces.js
Normal file
109
client/src/components/Settings/Dhcp/Interfaces.js
Normal file
@@ -0,0 +1,109 @@
|
||||
import React from 'react';
|
||||
import { shallowEqual, useSelector } from 'react-redux';
|
||||
import { Field, reduxForm } from 'redux-form';
|
||||
import { Trans, useTranslation } from 'react-i18next';
|
||||
import propTypes from 'prop-types';
|
||||
import { renderSelectField } from '../../../helpers/form';
|
||||
import { validateRequiredValue } from '../../../helpers/validators';
|
||||
import { FORM_NAME } from '../../../helpers/constants';
|
||||
|
||||
const renderInterfaces = (interfaces) => Object.keys(interfaces)
|
||||
.map((item) => {
|
||||
const option = interfaces[item];
|
||||
const { name } = option;
|
||||
|
||||
const [interfaceIPv4] = option?.ipv4_addresses ?? [];
|
||||
const [interfaceIPv6] = option?.ipv6_addresses ?? [];
|
||||
|
||||
const optionContent = [name, interfaceIPv4, interfaceIPv6].filter(Boolean).join(' - ');
|
||||
|
||||
return <option value={name} key={name}>{optionContent}</option>;
|
||||
});
|
||||
|
||||
|
||||
const getInterfaceValues = ({
|
||||
gateway_ip,
|
||||
hardware_address,
|
||||
ip_addresses,
|
||||
}) => [
|
||||
{
|
||||
name: 'dhcp_form_gateway_input',
|
||||
value: gateway_ip,
|
||||
},
|
||||
{
|
||||
name: 'dhcp_hardware_address',
|
||||
value: hardware_address,
|
||||
},
|
||||
{
|
||||
name: 'dhcp_ip_addresses',
|
||||
value: ip_addresses,
|
||||
render: (ip_addresses) => ip_addresses
|
||||
.map((ip) => <span key={ip} className="interface__ip">{ip}</span>),
|
||||
},
|
||||
];
|
||||
|
||||
const renderInterfaceValues = ({
|
||||
gateway_ip,
|
||||
hardware_address,
|
||||
ip_addresses,
|
||||
}) => <div className='d-flex align-items-end col-6'>
|
||||
<ul className="list-unstyled m-0">
|
||||
{getInterfaceValues({
|
||||
gateway_ip,
|
||||
hardware_address,
|
||||
ip_addresses,
|
||||
}).map(({ name, value, render }) => value && <li key={name}>
|
||||
<span className="interface__title"><Trans>{name}</Trans>: </span>
|
||||
{render?.(value) || value}
|
||||
</li>)}
|
||||
</ul>
|
||||
</div>;
|
||||
|
||||
const Interfaces = () => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const {
|
||||
processingInterfaces,
|
||||
interfaces,
|
||||
enabled,
|
||||
} = useSelector((store) => store.dhcp, shallowEqual);
|
||||
|
||||
const interface_name = useSelector(
|
||||
(store) => store.form[FORM_NAME.DHCP_INTERFACES]?.values?.interface_name,
|
||||
);
|
||||
|
||||
const interfaceValue = interface_name && interfaces[interface_name];
|
||||
|
||||
return !processingInterfaces
|
||||
&& interfaces
|
||||
&& <>
|
||||
<div className="row align-items-center pb-2">
|
||||
<div className="col-6">
|
||||
<Field
|
||||
name="interface_name"
|
||||
component={renderSelectField}
|
||||
className="form-control custom-select"
|
||||
validate={[validateRequiredValue]}
|
||||
label='dhcp_interface_select'
|
||||
>
|
||||
<option value='' disabled={enabled}>
|
||||
{t('dhcp_interface_select')}
|
||||
</option>
|
||||
{renderInterfaces(interfaces)}
|
||||
</Field>
|
||||
</div>
|
||||
{interfaceValue
|
||||
&& renderInterfaceValues(interfaceValue)}
|
||||
</div>
|
||||
</>;
|
||||
};
|
||||
|
||||
renderInterfaceValues.propTypes = {
|
||||
gateway_ip: propTypes.string.isRequired,
|
||||
hardware_address: propTypes.string.isRequired,
|
||||
ip_addresses: propTypes.arrayOf(propTypes.string).isRequired,
|
||||
};
|
||||
|
||||
export default reduxForm({
|
||||
form: FORM_NAME.DHCP_INTERFACES,
|
||||
})(Interfaces);
|
||||
@@ -1,22 +1,27 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Field, reduxForm } from 'redux-form';
|
||||
import { Trans, withTranslation } from 'react-i18next';
|
||||
import flow from 'lodash/flow';
|
||||
import { Trans, useTranslation } from 'react-i18next';
|
||||
import { useDispatch } from 'react-redux';
|
||||
import { renderInputField } from '../../../../helpers/form';
|
||||
import { validateIpv4, validateMac, validateRequiredValue } from '../../../../helpers/validators';
|
||||
import { FORM_NAME } from '../../../../helpers/constants';
|
||||
import { toggleLeaseModal } from '../../../../actions';
|
||||
|
||||
const Form = (props) => {
|
||||
const {
|
||||
t,
|
||||
handleSubmit,
|
||||
reset,
|
||||
pristine,
|
||||
submitting,
|
||||
toggleLeaseModal,
|
||||
processingAdding,
|
||||
} = props;
|
||||
const Form = ({
|
||||
handleSubmit,
|
||||
reset,
|
||||
pristine,
|
||||
submitting,
|
||||
processingAdding,
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const onClick = () => {
|
||||
reset();
|
||||
dispatch(toggleLeaseModal());
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit}>
|
||||
@@ -61,10 +66,7 @@ const Form = (props) => {
|
||||
type="button"
|
||||
className="btn btn-secondary btn-standard"
|
||||
disabled={submitting}
|
||||
onClick={() => {
|
||||
reset();
|
||||
toggleLeaseModal();
|
||||
}}
|
||||
onClick={onClick}
|
||||
>
|
||||
<Trans>cancel_btn</Trans>
|
||||
</button>
|
||||
@@ -86,12 +88,7 @@ Form.propTypes = {
|
||||
handleSubmit: PropTypes.func.isRequired,
|
||||
reset: PropTypes.func.isRequired,
|
||||
submitting: PropTypes.bool.isRequired,
|
||||
toggleLeaseModal: PropTypes.func.isRequired,
|
||||
processingAdding: PropTypes.bool.isRequired,
|
||||
t: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
export default flow([
|
||||
withTranslation(),
|
||||
reduxForm({ form: FORM_NAME.LEASE }),
|
||||
])(Form);
|
||||
export default reduxForm({ form: FORM_NAME.LEASE })(Form);
|
||||
|
||||
@@ -2,36 +2,37 @@ import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Trans, withTranslation } from 'react-i18next';
|
||||
import ReactModal from 'react-modal';
|
||||
|
||||
import { useDispatch } from 'react-redux';
|
||||
import Form from './Form';
|
||||
import { toggleLeaseModal } from '../../../../actions';
|
||||
|
||||
const Modal = (props) => {
|
||||
const {
|
||||
isModalOpen,
|
||||
handleSubmit,
|
||||
toggleLeaseModal,
|
||||
processingAdding,
|
||||
} = props;
|
||||
const Modal = ({
|
||||
isModalOpen,
|
||||
handleSubmit,
|
||||
processingAdding,
|
||||
}) => {
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const toggleModal = () => dispatch(toggleLeaseModal());
|
||||
|
||||
return (
|
||||
<ReactModal
|
||||
className="Modal__Bootstrap modal-dialog modal-dialog-centered modal-dialog--clients"
|
||||
closeTimeoutMS={0}
|
||||
isOpen={isModalOpen}
|
||||
onRequestClose={() => toggleLeaseModal()}
|
||||
onRequestClose={toggleModal}
|
||||
>
|
||||
<div className="modal-content">
|
||||
<div className="modal-header">
|
||||
<h4 className="modal-title">
|
||||
<Trans>dhcp_new_static_lease</Trans>
|
||||
</h4>
|
||||
<button type="button" className="close" onClick={() => toggleLeaseModal()}>
|
||||
<button type="button" className="close" onClick={toggleModal}>
|
||||
<span className="sr-only">Close</span>
|
||||
</button>
|
||||
</div>
|
||||
<Form
|
||||
onSubmit={handleSubmit}
|
||||
toggleLeaseModal={toggleLeaseModal}
|
||||
processingAdding={processingAdding}
|
||||
/>
|
||||
</div>
|
||||
@@ -42,7 +43,6 @@ const Modal = (props) => {
|
||||
Modal.propTypes = {
|
||||
isModalOpen: PropTypes.bool.isRequired,
|
||||
handleSubmit: PropTypes.func.isRequired,
|
||||
toggleLeaseModal: PropTypes.func.isRequired,
|
||||
processingAdding: PropTypes.bool.isRequired,
|
||||
};
|
||||
|
||||
|
||||
@@ -1,115 +1,116 @@
|
||||
import React, { Component, Fragment } from 'react';
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import ReactTable from 'react-table';
|
||||
import { Trans, withTranslation } from 'react-i18next';
|
||||
import { Trans, useTranslation } from 'react-i18next';
|
||||
import { useDispatch } from 'react-redux';
|
||||
import { LEASES_TABLE_DEFAULT_PAGE_SIZE } from '../../../../helpers/constants';
|
||||
import { sortIp } from '../../../../helpers/helpers';
|
||||
import Modal from './Modal';
|
||||
import { addStaticLease, removeStaticLease } from '../../../../actions';
|
||||
|
||||
class StaticLeases extends Component {
|
||||
cellWrap = ({ value }) => (
|
||||
<div className="logs__row o-hidden">
|
||||
const cellWrap = ({ value }) => (
|
||||
<div className="logs__row o-hidden">
|
||||
<span className="logs__text" title={value}>
|
||||
{value}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
</div>
|
||||
);
|
||||
|
||||
handleSubmit = (data) => {
|
||||
this.props.addStaticLease(data);
|
||||
const StaticLeases = ({
|
||||
isModalOpen,
|
||||
processingAdding,
|
||||
processingDeleting,
|
||||
staticLeases,
|
||||
}) => {
|
||||
const [t] = useTranslation();
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const handleSubmit = (data) => {
|
||||
dispatch(addStaticLease(data));
|
||||
};
|
||||
|
||||
handleDelete = (ip, mac, hostname = '') => {
|
||||
const handleDelete = (ip, mac, hostname = '') => {
|
||||
const name = hostname || ip;
|
||||
// eslint-disable-next-line no-alert
|
||||
if (window.confirm(this.props.t('delete_confirm', { key: name }))) {
|
||||
this.props.removeStaticLease({ ip, mac, hostname });
|
||||
if (window.confirm(t('delete_confirm', { key: name }))) {
|
||||
dispatch(removeStaticLease({
|
||||
ip,
|
||||
mac,
|
||||
hostname,
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const {
|
||||
isModalOpen,
|
||||
toggleLeaseModal,
|
||||
processingAdding,
|
||||
processingDeleting,
|
||||
staticLeases,
|
||||
t,
|
||||
} = this.props;
|
||||
return (
|
||||
<Fragment>
|
||||
<ReactTable
|
||||
data={staticLeases || []}
|
||||
columns={[
|
||||
{
|
||||
Header: 'MAC',
|
||||
accessor: 'mac',
|
||||
Cell: this.cellWrap,
|
||||
},
|
||||
{
|
||||
Header: 'IP',
|
||||
accessor: 'ip',
|
||||
sortMethod: sortIp,
|
||||
Cell: this.cellWrap,
|
||||
},
|
||||
{
|
||||
Header: <Trans>dhcp_table_hostname</Trans>,
|
||||
accessor: 'hostname',
|
||||
Cell: this.cellWrap,
|
||||
},
|
||||
{
|
||||
Header: <Trans>actions_table_header</Trans>,
|
||||
accessor: 'actions',
|
||||
maxWidth: 150,
|
||||
Cell: (row) => {
|
||||
const { ip, mac, hostname } = row.original;
|
||||
return (
|
||||
<>
|
||||
<ReactTable
|
||||
data={staticLeases || []}
|
||||
columns={[
|
||||
{
|
||||
Header: 'MAC',
|
||||
accessor: 'mac',
|
||||
Cell: cellWrap,
|
||||
},
|
||||
{
|
||||
Header: 'IP',
|
||||
accessor: 'ip',
|
||||
sortMethod: sortIp,
|
||||
Cell: cellWrap,
|
||||
},
|
||||
{
|
||||
Header: <Trans>dhcp_table_hostname</Trans>,
|
||||
accessor: 'hostname',
|
||||
Cell: cellWrap,
|
||||
},
|
||||
{
|
||||
Header: <Trans>actions_table_header</Trans>,
|
||||
accessor: 'actions',
|
||||
maxWidth: 150,
|
||||
// eslint-disable-next-line react/display-name
|
||||
Cell: (row) => {
|
||||
const { ip, mac, hostname } = row.original;
|
||||
|
||||
return (
|
||||
<div className="logs__row logs__row--center">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-icon btn-icon--green btn-outline-secondary btn-sm"
|
||||
title={t('delete_table_action')}
|
||||
disabled={processingDeleting}
|
||||
onClick={() => this.handleDelete(ip, mac, hostname)
|
||||
}
|
||||
>
|
||||
<svg className="icons">
|
||||
<use xlinkHref="#delete"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
return <div className="logs__row logs__row--center">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-icon btn-icon--green btn-outline-secondary btn-sm"
|
||||
title={t('delete_table_action')}
|
||||
disabled={processingDeleting}
|
||||
onClick={() => handleDelete(ip, mac, hostname)}
|
||||
>
|
||||
<svg className="icons">
|
||||
<use xlinkHref="#delete" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>;
|
||||
},
|
||||
]}
|
||||
pageSize={LEASES_TABLE_DEFAULT_PAGE_SIZE}
|
||||
showPageSizeOptions={false}
|
||||
showPagination={staticLeases.length > LEASES_TABLE_DEFAULT_PAGE_SIZE}
|
||||
noDataText={t('dhcp_static_leases_not_found')}
|
||||
className="-striped -highlight card-table-overflow"
|
||||
minRows={6}
|
||||
/>
|
||||
<Modal
|
||||
isModalOpen={isModalOpen}
|
||||
toggleLeaseModal={toggleLeaseModal}
|
||||
handleSubmit={this.handleSubmit}
|
||||
processingAdding={processingAdding}
|
||||
/>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
},
|
||||
]}
|
||||
pageSize={LEASES_TABLE_DEFAULT_PAGE_SIZE}
|
||||
showPageSizeOptions={false}
|
||||
showPagination={staticLeases.length > LEASES_TABLE_DEFAULT_PAGE_SIZE}
|
||||
noDataText={t('dhcp_static_leases_not_found')}
|
||||
className="-striped -highlight card-table-overflow"
|
||||
minRows={6}
|
||||
/>
|
||||
<Modal
|
||||
isModalOpen={isModalOpen}
|
||||
handleSubmit={handleSubmit}
|
||||
processingAdding={processingAdding}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
StaticLeases.propTypes = {
|
||||
staticLeases: PropTypes.array.isRequired,
|
||||
isModalOpen: PropTypes.bool.isRequired,
|
||||
toggleLeaseModal: PropTypes.func.isRequired,
|
||||
removeStaticLease: PropTypes.func.isRequired,
|
||||
addStaticLease: PropTypes.func.isRequired,
|
||||
processingAdding: PropTypes.bool.isRequired,
|
||||
processingDeleting: PropTypes.bool.isRequired,
|
||||
t: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
export default withTranslation()(StaticLeases);
|
||||
cellWrap.propTypes = {
|
||||
value: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
export default StaticLeases;
|
||||
|
||||
@@ -1,274 +1,277 @@
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import classnames from 'classnames';
|
||||
import { Trans, withTranslation } from 'react-i18next';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Trans, useTranslation } from 'react-i18next';
|
||||
|
||||
import { DHCP_STATUS_RESPONSE } from '../../../helpers/constants';
|
||||
import Form from './Form';
|
||||
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
|
||||
import classNames from 'classnames';
|
||||
import { destroy } from 'redux-form';
|
||||
import {
|
||||
DHCP_DESCRIPTION_PLACEHOLDERS,
|
||||
DHCP_FORM_NAMES,
|
||||
STATUS_RESPONSE,
|
||||
FORM_NAME,
|
||||
} from '../../../helpers/constants';
|
||||
import Leases from './Leases';
|
||||
import StaticLeases from './StaticLeases/index';
|
||||
import Card from '../../ui/Card';
|
||||
import Accordion from '../../ui/Accordion';
|
||||
import PageTitle from '../../ui/PageTitle';
|
||||
import Loading from '../../ui/Loading';
|
||||
import {
|
||||
findActiveDhcp,
|
||||
getDhcpInterfaces,
|
||||
getDhcpStatus,
|
||||
resetDhcp,
|
||||
setDhcpConfig,
|
||||
toggleDhcp,
|
||||
toggleLeaseModal,
|
||||
} from '../../../actions';
|
||||
import FormDHCPv4 from './FormDHCPv4';
|
||||
import FormDHCPv6 from './FormDHCPv6';
|
||||
import Interfaces from './Interfaces';
|
||||
import {
|
||||
calculateDhcpPlaceholdersIpv4,
|
||||
calculateDhcpPlaceholdersIpv6,
|
||||
} from '../../../helpers/helpers';
|
||||
|
||||
class Dhcp extends Component {
|
||||
componentDidMount() {
|
||||
this.props.getDhcpStatus();
|
||||
this.props.getDhcpInterfaces();
|
||||
}
|
||||
const Dhcp = () => {
|
||||
const { t } = useTranslation();
|
||||
const dispatch = useDispatch();
|
||||
const {
|
||||
processingStatus,
|
||||
processingConfig,
|
||||
processing,
|
||||
processingInterfaces,
|
||||
check,
|
||||
leases,
|
||||
staticLeases,
|
||||
isModalOpen,
|
||||
processingAdding,
|
||||
processingDeleting,
|
||||
processingDhcp,
|
||||
v4,
|
||||
v6,
|
||||
interface_name: interfaceName,
|
||||
enabled,
|
||||
dhcp_available,
|
||||
interfaces,
|
||||
} = useSelector((state) => state.dhcp, shallowEqual);
|
||||
|
||||
handleFormSubmit = (values) => {
|
||||
if (values.interface_name) {
|
||||
this.props.setDhcpConfig(values);
|
||||
const interface_name = useSelector(
|
||||
(state) => state.form[FORM_NAME.DHCP_INTERFACES]?.values?.interface_name,
|
||||
);
|
||||
|
||||
const [ipv4placeholders, setIpv4Placeholders] = useState(DHCP_DESCRIPTION_PLACEHOLDERS.ipv4);
|
||||
const [ipv6placeholders, setIpv6Placeholders] = useState(DHCP_DESCRIPTION_PLACEHOLDERS.ipv6);
|
||||
|
||||
useEffect(() => {
|
||||
dispatch(getDhcpStatus());
|
||||
dispatch(getDhcpInterfaces());
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const [ipv4] = interfaces?.[interface_name]?.ipv4_addresses ?? [];
|
||||
const [ipv6] = interfaces?.[interface_name]?.ipv6_addresses ?? [];
|
||||
const gateway_ip = interfaces?.[interface_name]?.gateway_ip;
|
||||
|
||||
const v4placeholders = ipv4
|
||||
? calculateDhcpPlaceholdersIpv4(ipv4, gateway_ip)
|
||||
: DHCP_DESCRIPTION_PLACEHOLDERS.ipv4;
|
||||
|
||||
const v6placeholders = ipv6
|
||||
? calculateDhcpPlaceholdersIpv6()
|
||||
: DHCP_DESCRIPTION_PLACEHOLDERS.ipv6;
|
||||
|
||||
setIpv4Placeholders(v4placeholders);
|
||||
setIpv6Placeholders(v6placeholders);
|
||||
}, [interface_name]);
|
||||
|
||||
const clear = () => {
|
||||
// eslint-disable-next-line no-alert
|
||||
if (window.confirm(t('dhcp_reset'))) {
|
||||
Object.values(DHCP_FORM_NAMES)
|
||||
.forEach((formName) => dispatch(destroy(formName)));
|
||||
dispatch(resetDhcp());
|
||||
}
|
||||
};
|
||||
|
||||
handleToggle = (config) => {
|
||||
this.props.toggleDhcp(config);
|
||||
const handleSubmit = (values) => {
|
||||
dispatch(setDhcpConfig({
|
||||
interface_name,
|
||||
...values,
|
||||
}));
|
||||
};
|
||||
|
||||
getToggleDhcpButton = () => {
|
||||
const {
|
||||
config, check, processingDhcp, processingConfig,
|
||||
} = this.props.dhcp;
|
||||
const otherDhcpFound = check?.otherServer
|
||||
&& check.otherServer.found === DHCP_STATUS_RESPONSE.YES;
|
||||
const filledConfig = Object.keys(config)
|
||||
.every((key) => {
|
||||
if (key === 'enabled' || key === 'icmp_timeout_msec') {
|
||||
return true;
|
||||
}
|
||||
const enteredSomeV4Value = Object.values(v4)
|
||||
.some(Boolean);
|
||||
const enteredSomeV6Value = Object.values(v6)
|
||||
.some(Boolean);
|
||||
const enteredSomeValue = enteredSomeV4Value || enteredSomeV6Value || interfaceName;
|
||||
|
||||
return config[key];
|
||||
});
|
||||
const getToggleDhcpButton = () => {
|
||||
const otherDhcpFound = check && (check.v4.other_server.found === STATUS_RESPONSE.YES
|
||||
|| check.v6.other_server.found === STATUS_RESPONSE.YES);
|
||||
|
||||
if (config.enabled) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-standard mr-2 btn-gray"
|
||||
onClick={() => this.props.toggleDhcp(config)}
|
||||
disabled={processingDhcp || processingConfig}
|
||||
>
|
||||
<Trans>dhcp_disable</Trans>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
const filledConfig = interface_name && (Object.values(v4)
|
||||
.every(Boolean) || Object.values(v6)
|
||||
.every(Boolean));
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-standard mr-2 btn-success"
|
||||
onClick={() => this.handleToggle(config)}
|
||||
disabled={
|
||||
!filledConfig || !check || otherDhcpFound || processingDhcp || processingConfig
|
||||
}
|
||||
>
|
||||
<Trans>dhcp_enable</Trans>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
getActiveDhcpMessage = (t, check) => {
|
||||
const { found } = check.otherServer;
|
||||
|
||||
if (found === DHCP_STATUS_RESPONSE.ERROR) {
|
||||
return (
|
||||
<div className="text-danger mb-2">
|
||||
<Trans>dhcp_error</Trans>
|
||||
<div className="mt-2 mb-2">
|
||||
<Accordion label={t('error_details')}>
|
||||
<span>{check.otherServer.error}</span>
|
||||
</Accordion>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mb-2">
|
||||
{found === DHCP_STATUS_RESPONSE.YES ? (
|
||||
<div className="text-danger">
|
||||
<Trans>dhcp_found</Trans>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-secondary">
|
||||
<Trans>dhcp_not_found</Trans>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
getDhcpWarning = (check) => {
|
||||
if (check.otherServer.found === DHCP_STATUS_RESPONSE.NO) {
|
||||
return '';
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="text-danger">
|
||||
<Trans>dhcp_warning</Trans>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
getStaticIpWarning = (t, check, interfaceName) => {
|
||||
if (check.staticIP.static === DHCP_STATUS_RESPONSE.ERROR) {
|
||||
return <>
|
||||
<div className="text-danger mb-2">
|
||||
<Trans>dhcp_static_ip_error</Trans>
|
||||
<div className="mt-2 mb-2">
|
||||
<Accordion label={t('error_details')}>
|
||||
<span>{check.staticIP.error}</span>
|
||||
</Accordion>
|
||||
</div>
|
||||
</div>
|
||||
<hr className="mt-4 mb-4" />
|
||||
</>;
|
||||
}
|
||||
if (check.staticIP.static === DHCP_STATUS_RESPONSE.NO
|
||||
&& check.staticIP.ip
|
||||
&& interfaceName) {
|
||||
return <>
|
||||
<div className="text-secondary mb-2">
|
||||
<Trans
|
||||
components={[<strong key="0">example</strong>]}
|
||||
values={{
|
||||
interfaceName,
|
||||
ipAddress: check.staticIP.ip,
|
||||
}}
|
||||
>
|
||||
dhcp_dynamic_ip_found
|
||||
</Trans>
|
||||
</div>
|
||||
<hr className="mt-4 mb-4" />
|
||||
</>;
|
||||
}
|
||||
|
||||
return '';
|
||||
};
|
||||
|
||||
render() {
|
||||
const {
|
||||
t,
|
||||
dhcp,
|
||||
resetDhcp,
|
||||
findActiveDhcp,
|
||||
addStaticLease,
|
||||
removeStaticLease,
|
||||
toggleLeaseModal,
|
||||
} = this.props;
|
||||
|
||||
const statusButtonClass = classnames({
|
||||
'btn btn-primary btn-standard': true,
|
||||
'btn btn-primary btn-standard btn-loading': dhcp.processingStatus,
|
||||
const className = classNames('btn btn-sm mr-2', {
|
||||
'btn-gray': enabled,
|
||||
'btn-outline-success': !enabled,
|
||||
});
|
||||
const { enabled, interface_name, ...values } = dhcp.config;
|
||||
|
||||
return <>
|
||||
<PageTitle title={t('dhcp_settings')} />
|
||||
{(dhcp.processing || dhcp.processingInterfaces) && <Loading />}
|
||||
{!dhcp.processing && !dhcp.processingInterfaces && <>
|
||||
<Card
|
||||
title={t('dhcp_title')}
|
||||
subtitle={t('dhcp_description')}
|
||||
bodyType="card-body box-body--settings"
|
||||
>
|
||||
<div className="dhcp">
|
||||
<>
|
||||
<Form
|
||||
onSubmit={this.handleFormSubmit}
|
||||
initialValues={{
|
||||
interface_name,
|
||||
...values,
|
||||
}}
|
||||
interfaces={dhcp.interfaces}
|
||||
processingConfig={dhcp.processingConfig}
|
||||
processingInterfaces={dhcp.processingInterfaces}
|
||||
enabled={enabled}
|
||||
resetDhcp={resetDhcp}
|
||||
/>
|
||||
<hr />
|
||||
<div className="card-actions mb-3">
|
||||
{this.getToggleDhcpButton()}
|
||||
<button
|
||||
type="button"
|
||||
className={statusButtonClass}
|
||||
onClick={() => findActiveDhcp(interface_name)}
|
||||
disabled={
|
||||
enabled || !interface_name || dhcp.processingConfig
|
||||
}
|
||||
>
|
||||
<Trans>check_dhcp_servers</Trans>
|
||||
</button>
|
||||
</div>
|
||||
{!enabled && dhcp.check && (
|
||||
<>
|
||||
{this.getStaticIpWarning(t, dhcp.check, interface_name)}
|
||||
{this.getActiveDhcpMessage(t, dhcp.check)}
|
||||
{this.getDhcpWarning(dhcp.check)}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
</div>
|
||||
</Card>
|
||||
{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>
|
||||
)}
|
||||
<Card
|
||||
title={t('dhcp_static_leases')}
|
||||
bodyType="card-body box-body--settings"
|
||||
>
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<StaticLeases
|
||||
staticLeases={dhcp.staticLeases}
|
||||
isModalOpen={dhcp.isModalOpen}
|
||||
addStaticLease={addStaticLease}
|
||||
removeStaticLease={removeStaticLease}
|
||||
toggleLeaseModal={toggleLeaseModal}
|
||||
processingAdding={dhcp.processingAdding}
|
||||
processingDeleting={dhcp.processingDeleting}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-12">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-success btn-standard mt-3"
|
||||
onClick={() => toggleLeaseModal()}
|
||||
>
|
||||
<Trans>dhcp_add_static_lease</Trans>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</>}
|
||||
</>;
|
||||
const onClickDisable = () => dispatch(toggleDhcp({ enabled }));
|
||||
const onClickEnable = () => {
|
||||
const values = {
|
||||
enabled,
|
||||
interface_name,
|
||||
v4: enteredSomeV4Value ? v4 : {},
|
||||
v6: enteredSomeV6Value ? v6 : {},
|
||||
};
|
||||
dispatch(toggleDhcp(values));
|
||||
};
|
||||
|
||||
return <button
|
||||
type="button"
|
||||
className={className}
|
||||
onClick={enabled ? onClickDisable : onClickEnable}
|
||||
disabled={processingDhcp || processingConfig
|
||||
|| (!enabled && (!filledConfig || !check || otherDhcpFound))}
|
||||
>
|
||||
<Trans>{enabled ? 'dhcp_disable' : 'dhcp_enable'}</Trans>
|
||||
</button>;
|
||||
};
|
||||
|
||||
const statusButtonClass = classNames('btn btn-sm mx-2', {
|
||||
'btn-loading btn-primary': processingStatus,
|
||||
'btn-outline-primary': !processingStatus,
|
||||
});
|
||||
|
||||
const onClick = () => dispatch(findActiveDhcp(interface_name));
|
||||
|
||||
const toggleModal = () => dispatch(toggleLeaseModal());
|
||||
|
||||
const initialV4 = enteredSomeV4Value ? v4 : {};
|
||||
const initialV6 = enteredSomeV6Value ? v6 : {};
|
||||
|
||||
if (processing || processingInterfaces) {
|
||||
return <Loading />;
|
||||
}
|
||||
}
|
||||
|
||||
Dhcp.propTypes = {
|
||||
dhcp: PropTypes.object.isRequired,
|
||||
toggleDhcp: PropTypes.func.isRequired,
|
||||
getDhcpStatus: PropTypes.func.isRequired,
|
||||
setDhcpConfig: PropTypes.func.isRequired,
|
||||
findActiveDhcp: PropTypes.func.isRequired,
|
||||
addStaticLease: PropTypes.func.isRequired,
|
||||
removeStaticLease: PropTypes.func.isRequired,
|
||||
toggleLeaseModal: PropTypes.func.isRequired,
|
||||
getDhcpInterfaces: PropTypes.func.isRequired,
|
||||
t: PropTypes.func.isRequired,
|
||||
resetDhcp: PropTypes.func.isRequired,
|
||||
if (!processing && !dhcp_available) {
|
||||
return <div className="text-center pt-5">
|
||||
<h2>
|
||||
<Trans>unavailable_dhcp</Trans>
|
||||
</h2>
|
||||
<h4>
|
||||
<Trans>unavailable_dhcp_desc</Trans>
|
||||
</h4>
|
||||
</div>;
|
||||
}
|
||||
|
||||
const toggleDhcpButton = getToggleDhcpButton();
|
||||
|
||||
return <>
|
||||
<PageTitle title={t('dhcp_settings')} subtitle={t('dhcp_description')}>
|
||||
<div className="page-title__actions">
|
||||
<div className="mb-3">
|
||||
{toggleDhcpButton}
|
||||
<button
|
||||
type="button"
|
||||
className={statusButtonClass}
|
||||
onClick={onClick}
|
||||
disabled={enabled || !interface_name || processingConfig}
|
||||
>
|
||||
<Trans>check_dhcp_servers</Trans>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className='btn btn-sm mx-2 btn-outline-secondary'
|
||||
disabled={!enteredSomeValue || processingConfig}
|
||||
onClick={clear}
|
||||
>
|
||||
<Trans>reset_settings</Trans>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</PageTitle>
|
||||
{!processing && !processingInterfaces
|
||||
&& <>
|
||||
{!enabled
|
||||
&& check
|
||||
&& (check.v4.other_server.found !== STATUS_RESPONSE.NO
|
||||
|| check.v6.other_server.found !== STATUS_RESPONSE.NO)
|
||||
&& <div className="mb-5">
|
||||
<hr />
|
||||
<div className="text-danger">
|
||||
<Trans>dhcp_warning</Trans>
|
||||
</div>
|
||||
</div>}
|
||||
<Interfaces
|
||||
initialValues={{ interface_name: interfaceName }}
|
||||
/>
|
||||
<Card
|
||||
title={t('dhcp_ipv4_settings')}
|
||||
bodyType="card-body box-body--settings"
|
||||
>
|
||||
<div>
|
||||
<FormDHCPv4
|
||||
onSubmit={handleSubmit}
|
||||
initialValues={{ v4: initialV4 }}
|
||||
processingConfig={processingConfig}
|
||||
ipv4placeholders={ipv4placeholders}
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
<Card
|
||||
title={t('dhcp_ipv6_settings')}
|
||||
bodyType="card-body box-body--settings"
|
||||
>
|
||||
<div>
|
||||
<FormDHCPv6
|
||||
onSubmit={handleSubmit}
|
||||
initialValues={{ v6: initialV6 }}
|
||||
processingConfig={processingConfig}
|
||||
ipv6placeholders={ipv6placeholders}
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
{enabled
|
||||
&& <Card
|
||||
title={t('dhcp_leases')}
|
||||
bodyType="card-body box-body--settings"
|
||||
>
|
||||
<div className="row">
|
||||
<div className="col">
|
||||
<Leases leases={leases} />
|
||||
</div>
|
||||
</div>
|
||||
</Card>}
|
||||
<Card
|
||||
title={t('dhcp_static_leases')}
|
||||
bodyType="card-body box-body--settings"
|
||||
>
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<StaticLeases
|
||||
staticLeases={staticLeases}
|
||||
isModalOpen={isModalOpen}
|
||||
processingAdding={processingAdding}
|
||||
processingDeleting={processingDeleting}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-12">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-success btn-standard mt-3"
|
||||
onClick={toggleModal}
|
||||
>
|
||||
<Trans>dhcp_add_static_lease</Trans>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</>}
|
||||
</>;
|
||||
};
|
||||
|
||||
export default withTranslation()(Dhcp);
|
||||
export default Dhcp;
|
||||
|
||||
@@ -6,7 +6,7 @@ import { Trans, useTranslation } from 'react-i18next';
|
||||
import {
|
||||
renderInputField,
|
||||
renderRadioField,
|
||||
renderSelectField,
|
||||
renderCheckboxField,
|
||||
toNumber,
|
||||
} from '../../../../helpers/form';
|
||||
import {
|
||||
@@ -96,7 +96,7 @@ const Form = ({
|
||||
<Field
|
||||
name={name}
|
||||
type="checkbox"
|
||||
component={renderSelectField}
|
||||
component={renderCheckboxField}
|
||||
placeholder={t(placeholder)}
|
||||
disabled={processing}
|
||||
subtitle={t(subtitle)}
|
||||
|
||||
@@ -7,7 +7,7 @@ import flow from 'lodash/flow';
|
||||
|
||||
import {
|
||||
renderInputField,
|
||||
renderSelectField,
|
||||
renderCheckboxField,
|
||||
renderRadioField,
|
||||
toNumber,
|
||||
} from '../../../helpers/form';
|
||||
@@ -15,7 +15,7 @@ import { validateIsSafePort, validatePort, validatePortTLS } from '../../../help
|
||||
import i18n from '../../../i18n';
|
||||
import KeyStatus from './KeyStatus';
|
||||
import CertificateStatus from './CertificateStatus';
|
||||
import { FORM_NAME } from '../../../helpers/constants';
|
||||
import { DNS_OVER_TLS_PORT, FORM_NAME, STANDARD_HTTPS_PORT } from '../../../helpers/constants';
|
||||
|
||||
const validate = (values) => {
|
||||
const errors = {};
|
||||
@@ -36,8 +36,8 @@ const clearFields = (change, setTlsConfig, t) => {
|
||||
certificate_chain: '',
|
||||
private_key_path: '',
|
||||
certificate_path: '',
|
||||
port_https: 443,
|
||||
port_dns_over_tls: 853,
|
||||
port_https: STANDARD_HTTPS_PORT,
|
||||
port_dns_over_tls: DNS_OVER_TLS_PORT,
|
||||
server_name: '',
|
||||
force_https: false,
|
||||
enabled: false,
|
||||
@@ -96,7 +96,7 @@ let Form = (props) => {
|
||||
<Field
|
||||
name="enabled"
|
||||
type="checkbox"
|
||||
component={renderSelectField}
|
||||
component={renderCheckboxField}
|
||||
placeholder={t('encryption_enable')}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
@@ -133,7 +133,7 @@ let Form = (props) => {
|
||||
<Field
|
||||
name="force_https"
|
||||
type="checkbox"
|
||||
component={renderSelectField}
|
||||
component={renderCheckboxField}
|
||||
placeholder={t('encryption_redirect')}
|
||||
onChange={handleChange}
|
||||
disabled={!isEnabled}
|
||||
|
||||
@@ -4,7 +4,7 @@ import { Field, reduxForm } from 'redux-form';
|
||||
import { Trans, withTranslation } from 'react-i18next';
|
||||
import flow from 'lodash/flow';
|
||||
|
||||
import { renderSelectField, toNumber } from '../../../helpers/form';
|
||||
import { renderCheckboxField, toNumber } from '../../../helpers/form';
|
||||
import { FILTERS_INTERVALS_HOURS, FORM_NAME } from '../../../helpers/constants';
|
||||
|
||||
const getTitleForInterval = (interval, t) => {
|
||||
@@ -49,7 +49,7 @@ const Form = (props) => {
|
||||
name="enabled"
|
||||
type="checkbox"
|
||||
modifier="checkbox--settings"
|
||||
component={renderSelectField}
|
||||
component={renderCheckboxField}
|
||||
placeholder={t('block_domain_use_filters_and_hosts')}
|
||||
subtitle={t('filters_block_toggle_hint')}
|
||||
onChange={handleChange}
|
||||
|
||||
@@ -4,7 +4,7 @@ import { Field, reduxForm } from 'redux-form';
|
||||
import { Trans, withTranslation } from 'react-i18next';
|
||||
import flow from 'lodash/flow';
|
||||
|
||||
import { renderSelectField, renderRadioField, toNumber } from '../../../helpers/form';
|
||||
import { renderCheckboxField, renderRadioField, toNumber } from '../../../helpers/form';
|
||||
import { FORM_NAME, QUERY_LOG_INTERVALS_DAYS } from '../../../helpers/constants';
|
||||
|
||||
const getIntervalFields = (processing, t, toNumber) => QUERY_LOG_INTERVALS_DAYS.map((interval) => {
|
||||
@@ -35,7 +35,7 @@ const Form = (props) => {
|
||||
<Field
|
||||
name="enabled"
|
||||
type="checkbox"
|
||||
component={renderSelectField}
|
||||
component={renderCheckboxField}
|
||||
placeholder={t('query_log_enable')}
|
||||
disabled={processing}
|
||||
/>
|
||||
@@ -44,7 +44,7 @@ const Form = (props) => {
|
||||
<Field
|
||||
name="anonymize_client_ip"
|
||||
type="checkbox"
|
||||
component={renderSelectField}
|
||||
component={renderCheckboxField}
|
||||
placeholder={t('anonymize_client_ip')}
|
||||
subtitle={t('anonymize_client_ip_desc')}
|
||||
disabled={processing}
|
||||
|
||||
@@ -54,7 +54,11 @@
|
||||
}
|
||||
|
||||
.form__message--error {
|
||||
color: #cd201f;
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
.form__message--left-pad {
|
||||
padding-left: 0.85rem;
|
||||
}
|
||||
|
||||
.interface__title {
|
||||
@@ -70,10 +74,6 @@
|
||||
content: "";
|
||||
}
|
||||
|
||||
.dhcp {
|
||||
min-height: 450px;
|
||||
}
|
||||
|
||||
.form__desc {
|
||||
margin-top: 10px;
|
||||
font-size: 13px;
|
||||
|
||||
Reference in New Issue
Block a user