@@ -101,11 +176,24 @@ Form.propTypes = {
submitting: PropTypes.bool,
invalid: PropTypes.bool,
interfaces: PropTypes.object,
+ interfaceValue: PropTypes.string,
initialValues: PropTypes.object,
processingConfig: PropTypes.bool,
+ processingInterfaces: PropTypes.bool,
+ enabled: PropTypes.bool,
t: PropTypes.func,
};
+
+const selector = formValueSelector('dhcpForm');
+
+Form = connect((state) => {
+ const interfaceValue = selector(state, 'interface_name');
+ return {
+ interfaceValue,
+ };
+})(Form);
+
export default flow([
withNamespaces(),
reduxForm({ form: 'dhcpForm' }),
diff --git a/client/src/components/Settings/Dhcp/Interface.js b/client/src/components/Settings/Dhcp/Interface.js
deleted file mode 100644
index 3b9d3e03..00000000
--- a/client/src/components/Settings/Dhcp/Interface.js
+++ /dev/null
@@ -1,114 +0,0 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import PropTypes from 'prop-types';
-import { Field, reduxForm, formValueSelector } from 'redux-form';
-import { withNamespaces, Trans } from 'react-i18next';
-import flow from 'lodash/flow';
-
-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 (
-
- );
- })
-));
-
-const renderInterfaceValues = (interfaceValues => (
-
- -
- MTU:
- {interfaceValues.mtu}
-
- -
- dhcp_hardware_address:
- {interfaceValues.hardware_address}
-
- -
- dhcp_ip_addresses:
- {
- interfaceValues.ip_addresses
- .map(ip => {ip})
- }
-
-
-));
-
-let Interface = (props) => {
- const {
- t,
- handleChange,
- interfaces,
- processing,
- interfaceValue,
- enabled,
- } = props;
-
- return (
-
- );
-};
-
-Interface.propTypes = {
- handleChange: PropTypes.func,
- interfaces: PropTypes.object,
- processing: PropTypes.bool,
- interfaceValue: PropTypes.string,
- initialValues: PropTypes.object,
- enabled: PropTypes.bool,
- t: PropTypes.func,
-};
-
-const selector = formValueSelector('dhcpInterface');
-
-Interface = connect((state) => {
- const interfaceValue = selector(state, 'interface_name');
- return {
- interfaceValue,
- };
-})(Interface);
-
-export default flow([
- withNamespaces(),
- reduxForm({ form: 'dhcpInterface' }),
-])(Interface);
diff --git a/client/src/components/Settings/Dhcp/StaticLeases.js b/client/src/components/Settings/Dhcp/StaticLeases.js
deleted file mode 100644
index 6bcf596c..00000000
--- a/client/src/components/Settings/Dhcp/StaticLeases.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import ReactTable from 'react-table';
-import { Trans, withNamespaces } from 'react-i18next';
-
-class StaticLeases extends Component {
- cellWrap = ({ value }) => (
-
-
- {value}
-
-
- );
-
- render() {
- const { staticLeases, t } = this.props;
- return (
-
dhcp_table_hostname,
- accessor: 'hostname',
- Cell: this.cellWrap,
- },
- ]}
- showPagination={false}
- noDataText={t('dhcp_leases_not_found')}
- minRows={6}
- className="-striped -highlight card-table-overflow"
- />
- );
- }
-}
-
-StaticLeases.propTypes = {
- staticLeases: PropTypes.array,
- t: PropTypes.func,
-};
-
-export default withNamespaces()(StaticLeases);
diff --git a/client/src/components/Settings/Dhcp/StaticLeases/Form.js b/client/src/components/Settings/Dhcp/StaticLeases/Form.js
new file mode 100644
index 00000000..28f843ed
--- /dev/null
+++ b/client/src/components/Settings/Dhcp/StaticLeases/Form.js
@@ -0,0 +1,97 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Field, reduxForm } from 'redux-form';
+import { Trans, withNamespaces } from 'react-i18next';
+import flow from 'lodash/flow';
+
+import { renderField, ipv4, mac, required } from '../../../../helpers/form';
+
+const Form = (props) => {
+ const {
+ t,
+ handleSubmit,
+ reset,
+ pristine,
+ submitting,
+ toggleLeaseModal,
+ processingAdding,
+ } = props;
+
+ return (
+
+ );
+};
+
+Form.propTypes = {
+ pristine: PropTypes.bool.isRequired,
+ 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([
+ withNamespaces(),
+ reduxForm({ form: 'leaseForm' }),
+])(Form);
diff --git a/client/src/components/Settings/Dhcp/StaticLeases/Modal.js b/client/src/components/Settings/Dhcp/StaticLeases/Modal.js
new file mode 100644
index 00000000..6291f274
--- /dev/null
+++ b/client/src/components/Settings/Dhcp/StaticLeases/Modal.js
@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Trans, withNamespaces } from 'react-i18next';
+import ReactModal from 'react-modal';
+
+import Form from './Form';
+
+const Modal = (props) => {
+ const {
+ isModalOpen,
+ handleSubmit,
+ toggleLeaseModal,
+ processingAdding,
+ } = props;
+
+ return (
+ toggleLeaseModal()}
+ >
+
+
+
+ dhcp_new_static_lease
+
+
+
+
+
+
+ {value}
+
+
+ );
+
+ handleSubmit = (data) => {
+ this.props.addStaticLease(data);
+ }
+
+ handleDelete = (ip, mac, hostname) => {
+ // eslint-disable-next-line no-alert
+ if (window.confirm(this.props.t('delete_confirm', { key: hostname }))) {
+ this.props.removeStaticLease({ ip, mac, hostname });
+ }
+ }
+
+ render() {
+ const {
+ isModalOpen,
+ toggleLeaseModal,
+ processingAdding,
+ processingDeleting,
+ staticLeases,
+ t,
+ } = this.props;
+ return (
+
+ dhcp_table_hostname,
+ accessor: 'hostname',
+ Cell: this.cellWrap,
+ },
+ {
+ Header: actions_table_header,
+ accessor: 'actions',
+ maxWidth: 150,
+ Cell: (row) => {
+ const { ip, mac, hostname } = row.original;
+
+ return (
+
+
+
+ );
+ },
+ },
+ ]}
+ showPagination={false}
+ noDataText={t('dhcp_static_leases_not_found')}
+ className="-striped -highlight card-table-overflow"
+ minRows={6}
+ />
+
+
+ );
+ }
+}
+
+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 withNamespaces()(StaticLeases);
diff --git a/client/src/components/Settings/Dhcp/index.js b/client/src/components/Settings/Dhcp/index.js
index b7b5ff53..d33f1bcf 100644
--- a/client/src/components/Settings/Dhcp/index.js
+++ b/client/src/components/Settings/Dhcp/index.js
@@ -6,14 +6,15 @@ import { Trans, withNamespaces } from 'react-i18next';
import { DHCP_STATUS_RESPONSE } from '../../../helpers/constants';
import Form from './Form';
import Leases from './Leases';
-import StaticLeases from './StaticLeases';
-import Interface from './Interface';
+import StaticLeases from './StaticLeases/index';
import Card from '../../ui/Card';
import Accordion from '../../ui/Accordion';
class Dhcp extends Component {
handleFormSubmit = (values) => {
- this.props.setDhcpConfig(values);
+ if (values.interface_name) {
+ this.props.setDhcpConfig(values);
+ }
};
handleToggle = (config) => {
@@ -169,18 +170,16 @@ class Dhcp extends Component {
{!dhcp.processing &&
-
@@ -189,11 +188,11 @@ class Dhcp extends Component {
type="button"
className={statusButtonClass}
onClick={() =>
- this.props.findActiveDhcp(dhcp.config.interface_name)
+ this.props.findActiveDhcp(interface_name)
}
disabled={
- dhcp.config.enabled
- || !dhcp.config.interface_name
+ enabled
+ || !interface_name
|| dhcp.processingConfig
}
>
@@ -222,8 +221,25 @@ class Dhcp extends Component {
-
-
+
+
+
+
+
@@ -241,6 +257,9 @@ Dhcp.propTypes = {
setDhcpConfig: PropTypes.func,
findActiveDhcp: PropTypes.func,
handleSubmit: PropTypes.func,
+ addStaticLease: PropTypes.func,
+ removeStaticLease: PropTypes.func,
+ toggleLeaseModal: PropTypes.func,
t: PropTypes.func,
};
diff --git a/client/src/components/Settings/index.js b/client/src/components/Settings/index.js
index 3435e610..8d36c6c4 100644
--- a/client/src/components/Settings/index.js
+++ b/client/src/components/Settings/index.js
@@ -128,6 +128,9 @@ class Settings extends Component {
getDhcpStatus={this.props.getDhcpStatus}
findActiveDhcp={this.props.findActiveDhcp}
setDhcpConfig={this.props.setDhcpConfig}
+ addStaticLease={this.props.addStaticLease}
+ removeStaticLease={this.props.removeStaticLease}
+ toggleLeaseModal={this.props.toggleLeaseModal}
/>