PartitionConfigFields.tsx63 lines · main

1	import { UseFormReturn } from 'react-hook-form'
2	import {
3	FormField,
4	InputGroup,
5	InputGroupAddon,
6	InputGroupInput,
7	InputGroupText,
8	Separator,
9	SheetSection,
10	} from 'ui'
11	import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
12
13	import { CreateQueueForm } from './CreateQueueSheet.schema'
14
15	export function PartitionConfigFields({ form }: { form: UseFormReturn<CreateQueueForm> }) {
16	const queueType = form.watch('values.type')
17
18	if (queueType !== 'partitioned') return null
19
20	return (
21	<>
22	<SheetSection className="flex flex-col gap-3">
23	<FormField
24	control={form.control}
25	name="values.partitionInterval"
26	render={({ field: { ref, ...rest } }) => (
27	<FormItemLayout
28	label="Partition interval"
29	description="Number of messages per partition"
30	className="gap-1"
31	>
32	<InputGroup>
33	<InputGroupInput {...rest} type="number" placeholder="10000" />
34	<InputGroupAddon align="inline-end">
35	<InputGroupText>messages</InputGroupText>
36	</InputGroupAddon>
37	</InputGroup>
38	</FormItemLayout>
39	)}
40	/>
41	<FormField
42	control={form.control}
43	name="values.retentionInterval"
44	render={({ field: { ref, ...rest } }) => (
45	<FormItemLayout
46	label="Retention interval"
47	description="Partitions older than this many messages behind the latest will be dropped"
48	className="gap-1"
49	>
50	<InputGroup>
51	<InputGroupInput {...rest} type="number" placeholder="10000" />
52	<InputGroupAddon align="inline-end">
53	<InputGroupText>messages</InputGroupText>
54	</InputGroupAddon>
55	</InputGroup>
56	</FormItemLayout>
57	)}
58	/>
59	</SheetSection>
60	<Separator />
61	</>
62	)
63	}