+ client: handle static leases form

client/src/__locales/en.json

@@ -38,6 +38,13 @@
     "dhcp_error": "We could not determine whether there is another DHCP server in the network.",
     "dhcp_static_ip_error": "In order to use DHCP server a static IP address must be set. We failed to determine if this network interface is configured using static IP address. Please set a static IP address manually.",
     "dhcp_dynamic_ip_found": "Your system uses dynamic IP address configuration for interface <0>{{interfaceName}}</0>. In order to use DHCP server a static IP address must be set. Your current IP address is <0>{{ipAddress}}</0>. We will automatically set this IP address as static if you press Enable DHCP button.",
+    "dhcp_lease_added": "Static lease \"{{key}}\" successfully added",
+    "dhcp_lease_deleted": "Static lease \"{{key}}\" successfully deleted",
+    "dhcp_new_static_lease": "New static lease",
+    "dhcp_static_leases_not_found": "No DHCP static leases found",
+    "dhcp_add_static_lease": "Add static lease",
+    "delete_confirm": "Are you sure you want to delete \"{{key}}\"?",
+    "form_enter_hostname": "Enter hostname",
     "error_details": "Error details",
     "back": "Back",
     "dashboard": "Dashboard",

client/src/actions/index.js

@@ -662,41 +662,18 @@ export const setDhcpConfigRequest = createAction('SET_DHCP_CONFIG_REQUEST');
 export const setDhcpConfigSuccess = createAction('SET_DHCP_CONFIG_SUCCESS');
 export const setDhcpConfigFailure = createAction('SET_DHCP_CONFIG_FAILURE');
 
-// TODO rewrite findActiveDhcp part
 export const setDhcpConfig = values => async (dispatch, getState) => {
     const { config } = getState().dhcp;
     const updatedConfig = { ...config, ...values };
     dispatch(setDhcpConfigRequest());
-    if (values.interface_name) {
-        dispatch(findActiveDhcpRequest());
-        try {
-            const activeDhcp = await apiClient.findActiveDhcp(values.interface_name);
-            dispatch(findActiveDhcpSuccess(activeDhcp));
-            if (!activeDhcp.found) {
-                try {
-                    await apiClient.setDhcpConfig(updatedConfig);
-                    dispatch(setDhcpConfigSuccess(updatedConfig));
-                    dispatch(addSuccessToast('dhcp_config_saved'));
-                } catch (error) {
-                    dispatch(addErrorToast({ error }));
-                    dispatch(setDhcpConfigFailure());
-                }
-            } else {
-                dispatch(addErrorToast({ error: 'dhcp_found' }));
-            }
-        } catch (error) {
-            dispatch(addErrorToast({ error }));
-            dispatch(findActiveDhcpFailure());
-        }
-    } else {
-        try {
-            await apiClient.setDhcpConfig(updatedConfig);
-            dispatch(setDhcpConfigSuccess(updatedConfig));
-            dispatch(addSuccessToast('dhcp_config_saved'));
-        } catch (error) {
-            dispatch(addErrorToast({ error }));
-            dispatch(setDhcpConfigFailure());
-        }
+    dispatch(findActiveDhcp(values.interface_name));
+    try {
+        await apiClient.setDhcpConfig(updatedConfig);
+        dispatch(setDhcpConfigSuccess(updatedConfig));
+        dispatch(addSuccessToast('dhcp_config_saved'));
+    } catch (error) {
+        dispatch(addErrorToast({ error }));
+        dispatch(setDhcpConfigFailure());
     }
 };
 
@@ -704,40 +681,60 @@ export const toggleDhcpRequest = createAction('TOGGLE_DHCP_REQUEST');
 export const toggleDhcpFailure = createAction('TOGGLE_DHCP_FAILURE');
 export const toggleDhcpSuccess = createAction('TOGGLE_DHCP_SUCCESS');
 
-// TODO rewrite findActiveDhcp part
-export const toggleDhcp = config => async (dispatch) => {
+export const toggleDhcp = values => async (dispatch) => {
     dispatch(toggleDhcpRequest());
+    let config = { ...values, enabled: false };
+    let successMessage = 'disabled_dhcp';
 
-    if (config.enabled) {
-        try {
-            await apiClient.setDhcpConfig({ ...config, enabled: false });
-            dispatch(toggleDhcpSuccess());
-            dispatch(addSuccessToast('disabled_dhcp'));
-        } catch (error) {
-            dispatch(addErrorToast({ error }));
-            dispatch(toggleDhcpFailure());
-        }
-    } else {
-        dispatch(findActiveDhcpRequest());
-        try {
-            const activeDhcp = await apiClient.findActiveDhcp(config.interface_name);
-            dispatch(findActiveDhcpSuccess(activeDhcp));
+    if (!values.enabled) {
+        config = { ...values, enabled: true };
+        successMessage = 'enabled_dhcp';
+        dispatch(findActiveDhcp(values.interface_name));
+    }
 
-            if (!activeDhcp.found) {
-                try {
-                    await apiClient.setDhcpConfig({ ...config, enabled: true });
-                    dispatch(toggleDhcpSuccess());
-                    dispatch(addSuccessToast('enabled_dhcp'));
-                } catch (error) {
-                    dispatch(addErrorToast({ error }));
-                    dispatch(toggleDhcpFailure());
-                }
-            } else {
-                dispatch(addErrorToast({ error: 'dhcp_found' }));
-            }
-        } catch (error) {
-            dispatch(addErrorToast({ error }));
-            dispatch(findActiveDhcpFailure());
-        }
+    try {
+        await apiClient.setDhcpConfig(config);
+        dispatch(toggleDhcpSuccess());
+        dispatch(addSuccessToast(successMessage));
+    } catch (error) {
+        dispatch(addErrorToast({ error }));
+        dispatch(toggleDhcpFailure());
+    }
+};
+
+export const toggleLeaseModal = createAction('TOGGLE_LEASE_MODAL');
+
+export const addStaticLeaseRequest = createAction('ADD_STATIC_LEASE_REQUEST');
+export const addStaticLeaseFailure = createAction('ADD_STATIC_LEASE_FAILURE');
+export const addStaticLeaseSuccess = createAction('ADD_STATIC_LEASE_SUCCESS');
+
+export const addStaticLease = config => async (dispatch) => {
+    dispatch(addStaticLeaseRequest());
+    try {
+        await apiClient.addStaticLease(config);
+        dispatch(addStaticLeaseSuccess());
+        dispatch(addSuccessToast(t('dhcp_lease_added', { key: config.hostname })));
+        dispatch(toggleLeaseModal());
+        dispatch(getDhcpStatus());
+    } catch (error) {
+        dispatch(addErrorToast({ error }));
+        dispatch(addStaticLeaseFailure());
+    }
+};
+
+export const removeStaticLeaseRequest = createAction('REMOVE_STATIC_LEASE_REQUEST');
+export const removeStaticLeaseFailure = createAction('REMOVE_STATIC_LEASE_FAILURE');
+export const removeStaticLeaseSuccess = createAction('REMOVE_STATIC_LEASE_SUCCESS');
+
+export const removeStaticLease = config => async (dispatch) => {
+    dispatch(removeStaticLeaseRequest());
+    try {
+        await apiClient.removeStaticLease(config);
+        dispatch(removeStaticLeaseSuccess());
+        dispatch(addSuccessToast(t('dhcp_lease_deleted', { key: config.hostname })));
+        dispatch(getDhcpStatus());
+    } catch (error) {
+        dispatch(addErrorToast({ error }));
+        dispatch(removeStaticLeaseFailure());
     }
 };

client/src/api/Api.js

@@ -318,6 +318,8 @@ export default class Api {
     DHCP_SET_CONFIG = { path: 'dhcp/set_config', method: 'POST' };
     DHCP_FIND_ACTIVE = { path: 'dhcp/find_active_dhcp', method: 'POST' };
     DHCP_INTERFACES = { path: 'dhcp/interfaces', method: 'GET' };
+    DHCP_ADD_STATIC_LEASE = { path: 'dhcp/add_static_lease', method: 'POST' };
+    DHCP_REMOVE_STATIC_LEASE = { path: 'dhcp/remove_static_lease', method: 'POST' };
 
     getDhcpStatus() {
         const { path, method } = this.DHCP_STATUS;
@@ -347,6 +349,24 @@ export default class Api {
         return this.makeRequest(path, method, parameters);
     }
 
+    addStaticLease(config) {
+        const { path, method } = this.DHCP_ADD_STATIC_LEASE;
+        const parameters = {
+            data: config,
+            headers: { 'Content-Type': 'application/json' },
+        };
+        return this.makeRequest(path, method, parameters);
+    }
+
+    removeStaticLease(config) {
+        const { path, method } = this.DHCP_REMOVE_STATIC_LEASE;
+        const parameters = {
+            data: config,
+            headers: { 'Content-Type': 'application/json' },
+        };
+        return this.makeRequest(path, method, parameters);
+    }
+
     // Installation
     INSTALL_GET_ADDRESSES = { path: 'install/get_addresses', method: 'GET' };
     INSTALL_CONFIGURE = { path: 'install/configure', method: 'POST' };

client/src/components/Settings/Dhcp/Form.js

@@ -1,22 +1,97 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
-import { Field, reduxForm } from 'redux-form';
-import { withNamespaces } from 'react-i18next';
+import { Field, reduxForm, formValueSelector } from 'redux-form';
+import { Trans, withNamespaces } from 'react-i18next';
 import flow from 'lodash/flow';
 
 import { renderField, required, ipv4, isPositive, toNumber } from '../../../helpers/form';
 
-const Form = (props) => {
+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>
+));
+
+let Form = (props) => {
     const {
         t,
         handleSubmit,
         submitting,
         invalid,
+        enabled,
+        interfaces,
+        interfaceValue,
         processingConfig,
+        processingInterfaces,
     } = 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={[required]}
+                            >
+                                <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">
@@ -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' }),

client/src/components/Settings/Dhcp/Interface.js

@@ -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 (
-            <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>
-));
-
-let Interface = (props) => {
-    const {
-        t,
-        handleChange,
-        interfaces,
-        processing,
-        interfaceValue,
-        enabled,
-    } = props;
-
-    return (
-        <form>
-            {!processing && 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"
-                                onChange={handleChange}
-                            >
-                                <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/>
-        </form>
-    );
-};
-
-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);

client/src/components/Settings/Dhcp/StaticLeases.js

@@ -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 }) => (
-        <div className="logs__row logs__row--overflow">
-            <span className="logs__text" title={value}>
-                {value}
-            </span>
-        </div>
-    );
-
-    render() {
-        const { staticLeases, t } = this.props;
-        return (
-            <ReactTable
-                data={staticLeases || []}
-                columns={[
-                    {
-                        Header: 'MAC',
-                        accessor: 'mac',
-                        Cell: this.cellWrap,
-                    }, {
-                        Header: 'IP',
-                        accessor: 'ip',
-                        Cell: this.cellWrap,
-                    }, {
-                        Header: <Trans>dhcp_table_hostname</Trans>,
-                        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);

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 onSubmit={handleSubmit}>
+            <div className="modal-body">
+                <div className="form__group">
+                    <Field
+                        id="mac"
+                        name="mac"
+                        component={renderField}
+                        type="text"
+                        className="form-control"
+                        placeholder={t('form_enter_mac')}
+                        validate={[required, mac]}
+                    />
+                </div>
+                <div className="form__group">
+                    <Field
+                        id="ip"
+                        name="ip"
+                        component={renderField}
+                        type="text"
+                        className="form-control"
+                        placeholder={t('form_enter_ip')}
+                        validate={[required, ipv4]}
+                    />
+                </div>
+                <div className="form__group">
+                    <Field
+                        id="hostname"
+                        name="hostname"
+                        component={renderField}
+                        type="text"
+                        className="form-control"
+                        placeholder={t('form_enter_hostname')}
+                        validate={[required]}
+                    />
+                </div>
+            </div>
+
+            <div className="modal-footer">
+                <div className="btn-list">
+                    <button
+                        type="button"
+                        className="btn btn-secondary btn-standard"
+                        disabled={submitting}
+                        onClick={() => {
+                            reset();
+                            toggleLeaseModal();
+                        }}
+                    >
+                        <Trans>cancel_btn</Trans>
+                    </button>
+                    <button
+                        type="submit"
+                        className="btn btn-success btn-standard"
+                        disabled={submitting || pristine || processingAdding}
+                    >
+                        <Trans>save_btn</Trans>
+                    </button>
+                </div>
+            </div>
+        </form>
+    );
+};
+
+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);

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 (
+        <ReactModal
+            className="Modal__Bootstrap modal-dialog modal-dialog-centered modal-dialog--clients"
+            closeTimeoutMS={0}
+            isOpen={isModalOpen}
+            onRequestClose={() => toggleLeaseModal()}
+        >
+            <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()}>
+                        <span className="sr-only">Close</span>
+                    </button>
+                </div>
+                <Form
+                    onSubmit={handleSubmit}
+                    toggleLeaseModal={toggleLeaseModal}
+                    processingAdding={processingAdding}
+                />
+            </div>
+        </ReactModal>
+    );
+};
+
+Modal.propTypes = {
+    isModalOpen: PropTypes.bool.isRequired,
+    handleSubmit: PropTypes.func.isRequired,
+    toggleLeaseModal: PropTypes.func.isRequired,
+    processingAdding: PropTypes.bool.isRequired,
+};
+
+export default withNamespaces()(Modal);

client/src/components/Settings/Dhcp/StaticLeases/index.js

@@ -0,0 +1,111 @@
+import React, { Component, Fragment } from 'react';
+import PropTypes from 'prop-types';
+import ReactTable from 'react-table';
+import { Trans, withNamespaces } from 'react-i18next';
+
+import Modal from './Modal';
+
+class StaticLeases extends Component {
+    cellWrap = ({ value }) => (
+        <div className="logs__row logs__row--overflow">
+            <span className="logs__text" title={value}>
+                {value}
+            </span>
+        </div>
+    );
+
+    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 (
+            <Fragment>
+                <ReactTable
+                    data={staticLeases || []}
+                    columns={[
+                        {
+                            Header: 'MAC',
+                            accessor: 'mac',
+                            Cell: this.cellWrap,
+                        },
+                        {
+                            Header: 'IP',
+                            accessor: 'ip',
+                            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 (
+                                    <div className="logs__row logs__row--center">
+                                        <button
+                                            type="button"
+                                            className="btn btn-icon 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>
+                                );
+                            },
+                        },
+                    ]}
+                    showPagination={false}
+                    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>
+        );
+    }
+}
+
+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);

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 {
                     <div className="dhcp">
                         {!dhcp.processing &&
                             <Fragment>
-                                <Interface
-                                    onChange={this.handleFormSubmit}
-                                    initialValues={{ interface_name }}
-                                    interfaces={dhcp.interfaces}
-                                    processing={dhcp.processingInterfaces}
-                                    enabled={dhcp.config.enabled}
-                                />
                                 <Form
                                     onSubmit={this.handleFormSubmit}
-                                    initialValues={{ ...values }}
+                                    initialValues={{
+                                        interface_name,
+                                        ...values,
+                                    }}
                                     interfaces={dhcp.interfaces}
                                     processingConfig={dhcp.processingConfig}
+                                    processingInterfaces={dhcp.processingInterfaces}
+                                    enabled={enabled}
                                 />
                                 <hr/>
                                 <div className="card-actions mb-3">
@@ -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 {
                         </Card>
                         <Card title={ t('dhcp_static_leases') } bodyType="card-body box-body--settings">
                             <div className="row">
-                                <div className="col">
-                                    <StaticLeases staticLeases={dhcp.staticLeases} />
+                                <div className="col-12">
+                                    <StaticLeases
+                                        staticLeases={dhcp.staticLeases}
+                                        isModalOpen={dhcp.isModalOpen}
+                                        addStaticLease={this.props.addStaticLease}
+                                        removeStaticLease={this.props.removeStaticLease}
+                                        toggleLeaseModal={this.props.toggleLeaseModal}
+                                        processingAdding={dhcp.processingAdding}
+                                        processingDeleting={dhcp.processingDeleting}
+                                    />
+                                </div>
+                                <div className="col-12">
+                                    <button
+                                        type="button"
+                                        className="btn btn-success btn-standard mt-3"
+                                        onClick={() => this.props.toggleLeaseModal()}
+                                    >
+                                        <Trans>dhcp_add_static_lease</Trans>
+                                    </button>
                                 </div>
                             </div>
                         </Card>
@@ -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,
 };
 

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}
                                 />
                             </div>
                         </div>

client/src/containers/Settings.js

@@ -11,6 +11,9 @@ import {
     getDhcpInterfaces,
     setDhcpConfig,
     findActiveDhcp,
+    addStaticLease,
+    removeStaticLease,
+    toggleLeaseModal,
 } from '../actions';
 import {
     getTlsStatus,
@@ -62,6 +65,9 @@ const mapDispatchToProps = {
     updateClient,
     deleteClient,
     toggleClientModal,
+    addStaticLease,
+    removeStaticLease,
+    toggleLeaseModal,
 };
 
 export default connect(

client/src/reducers/index.js

@@ -351,18 +351,49 @@ const dhcp = handleActions({
         const newState = { ...state, config: newConfig, processingConfig: false };
         return newState;
     },
+
+    [actions.toggleLeaseModal]: (state) => {
+        const newState = {
+            ...state,
+            isModalOpen: !state.isModalOpen,
+        };
+        return newState;
+    },
+
+    [actions.addStaticLeaseRequest]: state => ({ ...state, processingAdding: true }),
+    [actions.addStaticLeaseFailure]: state => ({ ...state, processingAdding: false }),
+    [actions.addStaticLeaseSuccess]: (state) => {
+        const newState = {
+            ...state,
+            processingAdding: false,
+        };
+        return newState;
+    },
+
+    [actions.removeStaticLeaseRequest]: state => ({ ...state, processingDeleting: true }),
+    [actions.removeStaticLeaseFailure]: state => ({ ...state, processingDeleting: false }),
+    [actions.removeStaticLeaseSuccess]: (state) => {
+        const newState = {
+            ...state,
+            processingDeleting: false,
+        };
+        return newState;
+    },
 }, {
     processing: true,
     processingStatus: false,
     processingInterfaces: false,
     processingDhcp: false,
     processingConfig: false,
+    processingAdding: false,
+    processingDeleting: false,
     config: {
         enabled: false,
     },
     check: null,
     leases: [],
     staticLeases: [],
+    isModalOpen: false,
 });
 
 export default combineReducers({