119 lines
3.8 KiB
TypeScript
119 lines
3.8 KiB
TypeScript
import React from 'react';
|
|
import { shallowEqual, useSelector } from 'react-redux';
|
|
|
|
import { Field, reduxForm } from 'redux-form';
|
|
import { Trans, useTranslation } from 'react-i18next';
|
|
|
|
import { renderSelectField } from '../../../helpers/form';
|
|
import { validateRequiredValue } from '../../../helpers/validators';
|
|
import { FORM_NAME } from '../../../helpers/constants';
|
|
import { RootState } from '../../../initialState';
|
|
|
|
const renderInterfaces = (interfaces: any) =>
|
|
Object.keys(interfaces).map((item) => {
|
|
const option = interfaces[item];
|
|
const { name } = option;
|
|
|
|
const [interfaceIPv4] = option?.ipv4_addresses ?? [];
|
|
const [interfaceIPv6] = option?.ipv6_addresses ?? [];
|
|
|
|
const optionContent = [name, interfaceIPv4, interfaceIPv6].filter(Boolean).join(' - ');
|
|
|
|
return (
|
|
<option value={name} key={name}>
|
|
{optionContent}
|
|
</option>
|
|
);
|
|
});
|
|
|
|
const getInterfaceValues = ({ gateway_ip, hardware_address, ip_addresses }: any) => [
|
|
{
|
|
name: 'dhcp_form_gateway_input',
|
|
value: gateway_ip,
|
|
},
|
|
{
|
|
name: 'dhcp_hardware_address',
|
|
value: hardware_address,
|
|
},
|
|
{
|
|
name: 'dhcp_ip_addresses',
|
|
value: ip_addresses,
|
|
render: (ip_addresses: any) =>
|
|
ip_addresses.map((ip: any) => (
|
|
<span key={ip} className="interface__ip">
|
|
{ip}
|
|
</span>
|
|
)),
|
|
},
|
|
];
|
|
|
|
interface renderInterfaceValuesProps {
|
|
gateway_ip: string;
|
|
hardware_address: string;
|
|
ip_addresses: string[];
|
|
}
|
|
|
|
const renderInterfaceValues = ({ gateway_ip, hardware_address, ip_addresses }: renderInterfaceValuesProps) => (
|
|
<div className="d-flex align-items-end dhcp__interfaces-info">
|
|
<ul className="list-unstyled m-0">
|
|
{getInterfaceValues({
|
|
gateway_ip,
|
|
hardware_address,
|
|
ip_addresses,
|
|
}).map(
|
|
({ name, value, render }) =>
|
|
value && (
|
|
<li key={name}>
|
|
<span className="interface__title">
|
|
<Trans>{name}</Trans>:{' '}
|
|
</span>
|
|
{render?.(value) || value}
|
|
</li>
|
|
),
|
|
)}
|
|
</ul>
|
|
</div>
|
|
);
|
|
|
|
const Interfaces = () => {
|
|
const { t } = useTranslation();
|
|
|
|
const { processingInterfaces, interfaces, enabled } = useSelector((store: RootState) => store.dhcp, shallowEqual);
|
|
|
|
const interface_name =
|
|
useSelector((store: RootState) => store.form[FORM_NAME.DHCP_INTERFACES]?.values?.interface_name);
|
|
|
|
if (processingInterfaces || !interfaces) {
|
|
return null;
|
|
}
|
|
|
|
const interfaceValue = interface_name && interfaces[interface_name];
|
|
|
|
return (
|
|
<div className="row dhcp__interfaces">
|
|
<div className="col col__dhcp">
|
|
<Field
|
|
name="interface_name"
|
|
component={renderSelectField}
|
|
className="form-control custom-select pl-4 col-md"
|
|
validate={[validateRequiredValue]}
|
|
label="dhcp_interface_select">
|
|
<option value="" disabled={enabled}>
|
|
{t('dhcp_interface_select')}
|
|
</option>
|
|
{renderInterfaces(interfaces)}
|
|
</Field>
|
|
</div>
|
|
{interfaceValue && renderInterfaceValues({
|
|
gateway_ip: interfaceValue.gateway_ip,
|
|
hardware_address: interfaceValue.hardware_address,
|
|
ip_addresses: interfaceValue.ip_addresses
|
|
})}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default reduxForm({
|
|
form: FORM_NAME.DHCP_INTERFACES,
|
|
})(Interfaces);
|