+ 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' }),