68 lines
2.5 KiB
TypeScript
68 lines
2.5 KiB
TypeScript
|
import { faNetworkWired } from '@fortawesome/free-solid-svg-icons';
|
||
|
|
import { useFormikContext } from 'formik';
|
||
|
|
import tw from 'twin.macro';
|
||
|
|
|
||
|
|
import getAllocations from '@/api/admin/nodes/getAllocations';
|
||
|
|
import { useServerFromRoute } from '@/api/admin/server';
|
||
|
|
import AdminBox from '@/components/admin/AdminBox';
|
||
|
|
import Label from '@/components/elements/Label';
|
||
|
|
import Select from '@/components/elements/Select';
|
||
|
|
import type { Option } from '@/components/elements/SelectField';
|
||
|
|
import SelectField, { AsyncSelectField } from '@/components/elements/SelectField';
|
||
|
|
|
||
|
|
export default () => {
|
||
|
|
const { isSubmitting } = useFormikContext();
|
||
|
|
const { data: server } = useServerFromRoute();
|
||
|
|
|
||
|
|
const loadOptions = async (inputValue: string, callback: (options: Option[]) => void) => {
|
||
|
|
if (!server) {
|
||
|
|
callback([] as Option[]);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
const allocations = await getAllocations(server.nodeId, { ip: inputValue, server_id: '0' });
|
||
|
|
|
||
|
|
callback(
|
||
|
|
allocations.map(a => {
|
||
|
|
return { value: a.id.toString(), label: a.getDisplayText() };
|
||
|
|
}),
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<AdminBox icon={faNetworkWired} title={'Networking'} isLoading={isSubmitting}>
|
||
|
|
<div css={tw`grid grid-cols-1 gap-4 lg:gap-6`}>
|
||
|
|
<div>
|
||
|
|
<Label htmlFor={'allocationId'}>Primary Allocation</Label>
|
||
|
|
<Select id={'allocationId'} name={'allocationId'}>
|
||
|
|
{server?.relationships.allocations?.map(a => (
|
||
|
|
<option key={a.id} value={a.id}>
|
||
|
|
{a.getDisplayText()}
|
||
|
|
</option>
|
||
|
|
))}
|
||
|
|
</Select>
|
||
|
|
</div>
|
||
|
|
<AsyncSelectField
|
||
|
|
id={'addAllocations'}
|
||
|
|
name={'addAllocations'}
|
||
|
|
label={'Add Allocations'}
|
||
|
|
loadOptions={loadOptions}
|
||
|
|
isMulti
|
||
|
|
/>
|
||
|
|
<SelectField
|
||
|
|
id={'removeAllocations'}
|
||
|
|
name={'removeAllocations'}
|
||
|
|
label={'Remove Allocations'}
|
||
|
|
options={
|
||
|
|
server?.relationships.allocations?.map(a => {
|
||
|
|
return { value: a.id.toString(), label: a.getDisplayText() };
|
||
|
|
}) || []
|
||
|
|
}
|
||
|
|
isMulti
|
||
|
|
isSearchable
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</AdminBox>
|
||
|
|
);
|
||
|
|
};
|