98 lines
3.3 KiB
TypeScript
98 lines
3.3 KiB
TypeScript
|
import { Form, Formik, FormikHelpers } from 'formik';
|
||
|
|
import React, { useEffect, useState } from 'react';
|
||
|
|
import tw from 'twin.macro';
|
||
|
|
import { array, number, object, string } from 'yup';
|
||
|
|
import getAllocations from '@/api/admin/nodes/getAllocations';
|
||
|
|
import Button from '@/components/elements/Button';
|
||
|
|
import SelectField, { Option } from '@/components/elements/SelectField';
|
||
|
|
|
||
|
|
interface Values {
|
||
|
|
ips: string[];
|
||
|
|
ports: number[];
|
||
|
|
}
|
||
|
|
|
||
|
|
const distinct = (value: any, index: any, self: any) => {
|
||
|
|
return self.indexOf(value) === index;
|
||
|
|
};
|
||
|
|
|
||
|
|
function CreateAllocationForm ({ nodeId }: { nodeId: string | number }) {
|
||
|
|
const [ ips, setIPs ] = useState<Option[]>([]);
|
||
|
|
const [ ports ] = useState<Option[]>([]);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
getAllocations(nodeId)
|
||
|
|
.then(allocations => {
|
||
|
|
setIPs(allocations.map(a => a.ip).filter(distinct).map(ip => {
|
||
|
|
return { value: ip, label: ip };
|
||
|
|
}));
|
||
|
|
});
|
||
|
|
}, [ nodeId ]);
|
||
|
|
|
||
|
|
const isValidIP = (inputValue: string): boolean => {
|
||
|
|
// TODO: Better way of checking for a valid ip (and CIDR).
|
||
|
|
return inputValue.match(/^([0-9a-f.:/]+)$/) !== null;
|
||
|
|
};
|
||
|
|
|
||
|
|
const isValidPort = (inputValue: string): boolean => {
|
||
|
|
// TODO: Better way of checking for a valid port (and port range)
|
||
|
|
return inputValue.match(/^([0-9-]+)$/) !== null;
|
||
|
|
};
|
||
|
|
|
||
|
|
const submit = (values: Values, { setSubmitting }: FormikHelpers<Values>) => {
|
||
|
|
setSubmitting(false);
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Formik
|
||
|
|
onSubmit={submit}
|
||
|
|
initialValues={{
|
||
|
|
ips: [] as string[],
|
||
|
|
ports: [] as number[],
|
||
|
|
}}
|
||
|
|
validationSchema={object().shape({
|
||
|
|
ips: array(string()).min(1, 'You must select at least one ip address.'),
|
||
|
|
ports: array(number()).min(1, 'You must select at least one port.'),
|
||
|
|
})}
|
||
|
|
>
|
||
|
|
{
|
||
|
|
({ isSubmitting, isValid }) => (
|
||
|
|
<Form>
|
||
|
|
<SelectField
|
||
|
|
id={'ips'}
|
||
|
|
name={'ips'}
|
||
|
|
label={'IPs and CIDRs'}
|
||
|
|
options={ips}
|
||
|
|
isValidNewOption={isValidIP}
|
||
|
|
isMulti
|
||
|
|
isSearchable
|
||
|
|
isCreatable
|
||
|
|
css={tw`mb-6`}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<SelectField
|
||
|
|
id={'ports'}
|
||
|
|
name={'ports'}
|
||
|
|
label={'Ports'}
|
||
|
|
options={ports}
|
||
|
|
isValidNewOption={isValidPort}
|
||
|
|
isMulti
|
||
|
|
isSearchable
|
||
|
|
isCreatable
|
||
|
|
/>
|
||
|
|
|
||
|
|
<div css={tw`w-full flex flex-row items-center mt-6`}>
|
||
|
|
<div css={tw`flex ml-auto`}>
|
||
|
|
<Button type={'submit'} disabled={isSubmitting || !isValid}>
|
||
|
|
Create Allocations
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Form>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
</Formik>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default CreateAllocationForm;
|