Added check for active DHCP before enable

2018-12-29 18:43:17 +03:00
parent d8802a9709
commit 568784b992
8 changed files with 282 additions and 150 deletions
--- a/client/src/components/Settings/Dhcp/Interface.js
+++ b/client/src/components/Settings/Dhcp/Interface.js
@@ -0,0 +1,113 @@
+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--dhcp">
+                            <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">
+                            {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);