+ client: handle static leases form

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>