diff --git a/client/src/__locales/en.json b/client/src/__locales/en.json index 0ffe12f7..463ccc1a 100644 --- a/client/src/__locales/en.json +++ b/client/src/__locales/en.json @@ -149,5 +149,8 @@ "dhcp_form_range_start": "Range start", "dhcp_form_range_end": "Range end", "dhcp_form_lease_title": "DHCP lease time (in seconds)", - "dhcp_form_lease_input": "Lease duration" + "dhcp_form_lease_input": "Lease duration", + "dhcp_interface_select": "Select DHCP interface", + "dhcp_hardware_address": "Hardware address", + "dhcp_ip_addresses": "IP addresses" } diff --git a/client/src/actions/index.js b/client/src/actions/index.js index 7e07c6a0..bb9d9bbb 100644 --- a/client/src/actions/index.js +++ b/client/src/actions/index.js @@ -538,6 +538,21 @@ export const getDhcpStatus = () => async (dispatch) => { } }; +export const getDhcpInterfacesRequest = createAction('GET_DHCP_INTERFACES_REQUEST'); +export const getDhcpInterfacesSuccess = createAction('GET_DHCP_INTERFACES_SUCCESS'); +export const getDhcpInterfacesFailure = createAction('GET_DHCP_INTERFACES_FAILURE'); + +export const getDhcpInterfaces = () => async (dispatch) => { + dispatch(getDhcpInterfacesRequest()); + try { + const interfaces = await apiClient.getDhcpInterfaces(); + dispatch(getDhcpInterfacesSuccess(interfaces)); + } catch (error) { + dispatch(addErrorToast({ error })); + dispatch(getDhcpInterfacesFailure()); + } +}; + export const setDhcpConfigRequest = createAction('SET_DHCP_CONFIG_REQUEST'); export const setDhcpConfigSuccess = createAction('SET_DHCP_CONFIG_SUCCESS'); export const setDhcpConfigFailure = createAction('SET_DHCP_CONFIG_FAILURE'); diff --git a/client/src/api/Api.js b/client/src/api/Api.js index 4aac23f5..2bb0277a 100644 --- a/client/src/api/Api.js +++ b/client/src/api/Api.js @@ -307,12 +307,18 @@ export default class Api { DHCP_STATUS = { path: 'dhcp/status', method: 'GET' }; 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' }; getDhcpStatus() { const { path, method } = this.DHCP_STATUS; return this.makeRequest(path, method); } + getDhcpInterfaces() { + const { path, method } = this.DHCP_INTERFACES; + return this.makeRequest(path, method); + } + setDhcpConfig(config) { const { path, method } = this.DHCP_SET_CONFIG; const parameters = { diff --git a/client/src/components/Settings/Dhcp/Form.js b/client/src/components/Settings/Dhcp/Form.js index da761892..93140580 100644 --- a/client/src/components/Settings/Dhcp/Form.js +++ b/client/src/components/Settings/Dhcp/Form.js @@ -1,6 +1,7 @@ import React, { Fragment } from 'react'; +import { connect } from 'react-redux'; import PropTypes from 'prop-types'; -import { Field, reduxForm } from 'redux-form'; +import { Field, reduxForm, formValueSelector } from 'redux-form'; import { withNamespaces, Trans } from 'react-i18next'; import flow from 'lodash/flow'; @@ -44,14 +45,82 @@ const renderField = ({ ); -const Form = (props) => { +const renderInterfaces = (interfaces => ( + Object.keys(interfaces).map((item) => { + const option = interfaces[item]; + const { name } = option; + let interfaceIP = option.ip_addresses[0]; + + option.ip_addresses.forEach((ip) => { + if (!ip.includes(':')) { + interfaceIP = ip; + } + }); + + return ( + + ); + }) +)); + +const renderInterfaceValues = (interfaceValues => ( +