Skip to content

Commit 3223654

Browse files
kunishkunish
committed
feat: orchestrate page
1 parent 038b1e4 commit 3223654

File tree

11 files changed

+751
-264
lines changed

11 files changed

+751
-264
lines changed

‎src/app/(protected)/config/page.tsx‎

Lines changed: 75 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -117,8 +117,8 @@ const CreateOrEditModal: FC<CreateOrEditModalContentProps & (CreateModalContentP
117117
/>
118118
)}
119119

120-
<Accordion defaultValue={['software-options']} selectionMode="multiple">
121-
<AccordionItem value="software-options" title={t('primitives.softwareOptions')}>
120+
<Accordion defaultExpandedKeys={['software-options']} selectionMode="multiple">
121+
<AccordionItem key="software-options" title={t('primitives.softwareOptions')}>
122122
<div className="space-y-4 px-1">
123123
<Input
124124
type="number"
@@ -196,7 +196,7 @@ const CreateOrEditModal: FC<CreateOrEditModalContentProps & (CreateModalContentP
196196
</div>
197197
</AccordionItem>
198198

199-
<AccordionItem value="interface-and-kernel-options" title={t('primitives.interfaceAndKernelOptions')}>
199+
<AccordionItem key="interface-and-kernel-options" title={t('primitives.interfaceAndKernelOptions')}>
200200
<div className="space-y-4 px-1">
201201
<Controller
202202
name="lanInterface"
@@ -256,7 +256,7 @@ const CreateOrEditModal: FC<CreateOrEditModalContentProps & (CreateModalContentP
256256
</div>
257257
</AccordionItem>
258258

259-
<AccordionItem value="node-connectivity-check" title={t('primitives.nodeConnectivityCheck')}>
259+
<AccordionItem key="node-connectivity-check" title={t('primitives.nodeConnectivityCheck')}>
260260
<div className="space-y-4 px-1">
261261
<Controller
262262
name="tcpCheckUrl"
@@ -326,7 +326,7 @@ const CreateOrEditModal: FC<CreateOrEditModalContentProps & (CreateModalContentP
326326
</div>
327327
</AccordionItem>
328328

329-
<AccordionItem value="connecting-options" title={t('primitives.connectingOptions')}>
329+
<AccordionItem key="connecting-options" title={t('primitives.connectingOptions')}>
330330
<div className="space-y-4 px-1">
331331
<Controller
332332
name="dialMode"
@@ -516,73 +516,77 @@ const DetailsCard: FC<{
516516
<RandomUnsplashImage sig={details.id} />
517517
</CardBody>
518518

519-
<CardFooter className="gap-2">
520-
<Button isIconOnly onPress={onDetailsOpen}>
521-
<IconCode />
522-
</Button>
523-
524-
<DetailsModal details={details} isOpen={isDetailsOpen} onOpenChange={onDetailsOpenChange} />
525-
526-
<Button
527-
color="secondary"
528-
isIconOnly
529-
onPress={() => {
530-
editForm.reset({
531-
...details.global,
532-
checkIntervalSeconds: deriveTime(details.global.checkInterval, 's'),
533-
sniffingTimeoutMS: deriveTime(details.global.sniffingTimeout, 'ms'),
534-
checkToleranceMS: deriveTime(details.global.checkTolerance, 'ms')
535-
})
536-
onEditOpen()
537-
}}
538-
>
539-
<IconEdit />
540-
</Button>
541-
542-
<CreateOrEditModal
543-
type="edit"
544-
isOpen={isEditOpen}
545-
onOpenChange={onEditOpenChange}
546-
name={details.name}
547-
id={details.id}
548-
lanInterfaces={lanInterfaces}
549-
wanInterfaces={wanInterfaces}
550-
form={editForm}
551-
onSubmit={onEditSubmit(details.id)}
552-
/>
553-
554-
{!isDefault && (
555-
<Fragment>
556-
<Button color="danger" isIconOnly isDisabled={details.selected} onPress={onRemoveOpen}>
557-
<IconTrash />
558-
</Button>
519+
<CardFooter className="justify-between">
520+
<div className="flex gap-2">
521+
<Button isIconOnly onPress={onDetailsOpen}>
522+
<IconCode />
523+
</Button>
524+
525+
<DetailsModal details={details} isOpen={isDetailsOpen} onOpenChange={onDetailsOpenChange} />
526+
</div>
527+
528+
<div className="flex gap-2">
529+
<Button
530+
color="secondary"
531+
isIconOnly
532+
onPress={() => {
533+
editForm.reset({
534+
...details.global,
535+
checkIntervalSeconds: deriveTime(details.global.checkInterval, 's'),
536+
sniffingTimeoutMS: deriveTime(details.global.sniffingTimeout, 'ms'),
537+
checkToleranceMS: deriveTime(details.global.checkTolerance, 'ms')
538+
})
539+
onEditOpen()
540+
}}
541+
>
542+
<IconEdit />
543+
</Button>
544+
545+
<CreateOrEditModal
546+
type="edit"
547+
isOpen={isEditOpen}
548+
onOpenChange={onEditOpenChange}
549+
name={details.name}
550+
id={details.id}
551+
lanInterfaces={lanInterfaces}
552+
wanInterfaces={wanInterfaces}
553+
form={editForm}
554+
onSubmit={onEditSubmit(details.id)}
555+
/>
559556

560-
<Modal isOpen={isRemoveOpen} onOpenChange={onRemoveOpenChange}>
561-
<ModalContent>
562-
<ModalHeader>{t('primitives.remove', { resourceName: t('primitives.config') })}</ModalHeader>
563-
<ModalBody>{details.name}</ModalBody>
564-
565-
<ModalFooter>
566-
<Button color="secondary" isLoading={removeMutation.isPending} onPress={onRemoveClose}>
567-
{t('actions.cancel')}
568-
</Button>
569-
570-
<Button
571-
color="danger"
572-
isLoading={removeMutation.isPending}
573-
onPress={async () => {
574-
await removeMutation.mutateAsync({ id: details.id })
575-
await refetch()
576-
onRemoveClose()
577-
}}
578-
>
579-
{t('actions.confirm')}
580-
</Button>
581-
</ModalFooter>
582-
</ModalContent>
583-
</Modal>
584-
</Fragment>
585-
)}
557+
{!isDefault && (
558+
<Fragment>
559+
<Button color="danger" isIconOnly isDisabled={details.selected} onPress={onRemoveOpen}>
560+
<IconTrash />
561+
</Button>
562+
563+
<Modal isOpen={isRemoveOpen} onOpenChange={onRemoveOpenChange}>
564+
<ModalContent>
565+
<ModalHeader>{t('primitives.remove', { resourceName: t('primitives.config') })}</ModalHeader>
566+
<ModalBody>{details.name}</ModalBody>
567+
568+
<ModalFooter>
569+
<Button color="secondary" isLoading={removeMutation.isPending} onPress={onRemoveClose}>
570+
{t('actions.cancel')}
571+
</Button>
572+
573+
<Button
574+
color="danger"
575+
isLoading={removeMutation.isPending}
576+
onPress={async () => {
577+
await removeMutation.mutateAsync({ id: details.id })
578+
await refetch()
579+
onRemoveClose()
580+
}}
581+
>
582+
{t('actions.confirm')}
583+
</Button>
584+
</ModalFooter>
585+
</ModalContent>
586+
</Modal>
587+
</Fragment>
588+
)}
589+
</div>
586590
</CardFooter>
587591
</Card>
588592
)

‎src/app/(protected)/dns/page.tsx‎

Lines changed: 65 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -203,68 +203,72 @@ const DetailsCard: FC<{
203203
<RandomUnsplashImage sig={details.id} />
204204
</CardBody>
205205

206-
<CardFooter className="gap-2">
207-
<Button isIconOnly onPress={onDetailsOpen}>
208-
<IconCode />
209-
</Button>
210-
211-
<DetailsModal details={details} isOpen={isDetailsOpen} onOpenChange={onDetailsOpenChange} />
212-
213-
<Button
214-
color="secondary"
215-
isIconOnly
216-
onPress={() => {
217-
editForm.reset({
218-
text: details.dns.string
219-
})
220-
onEditOpen()
221-
}}
222-
>
223-
<IconEdit />
224-
</Button>
225-
226-
<CreateOrEditModal
227-
type="edit"
228-
isOpen={isEditOpen}
229-
onOpenChange={onEditOpenChange}
230-
name={details.name}
231-
id={details.id}
232-
form={editForm}
233-
onSubmit={onEditSubmit(details.id)}
234-
/>
235-
236-
{!isDefault && (
237-
<Fragment>
238-
<Button color="danger" isIconOnly isDisabled={details.selected} onPress={onRemoveOpen}>
239-
<IconTrash />
240-
</Button>
206+
<CardFooter className="justify-between">
207+
<div className="flex gap-2">
208+
<Button isIconOnly onPress={onDetailsOpen}>
209+
<IconCode />
210+
</Button>
211+
212+
<DetailsModal details={details} isOpen={isDetailsOpen} onOpenChange={onDetailsOpenChange} />
213+
</div>
214+
215+
<div className="flex gap-2">
216+
<Button
217+
color="secondary"
218+
isIconOnly
219+
onPress={() => {
220+
editForm.reset({
221+
text: details.dns.string
222+
})
223+
onEditOpen()
224+
}}
225+
>
226+
<IconEdit />
227+
</Button>
241228

242-
<Modal isOpen={isRemoveOpen} onOpenChange={onRemoveOpenChange}>
243-
<ModalContent>
244-
<ModalHeader>{t('primitives.remove', { resourceName: t('primitives.dns') })}</ModalHeader>
245-
<ModalBody>{details.name}</ModalBody>
246-
247-
<ModalFooter>
248-
<Button color="secondary" isLoading={removeMutation.isPending} onPress={onRemoveClose}>
249-
{t('actions.cancel')}
250-
</Button>
251-
252-
<Button
253-
color="danger"
254-
isLoading={removeMutation.isPending}
255-
onPress={async () => {
256-
await removeMutation.mutateAsync({ id: details.id })
257-
await refetch()
258-
onRemoveClose()
259-
}}
260-
>
261-
{t('actions.confirm')}
262-
</Button>
263-
</ModalFooter>
264-
</ModalContent>
265-
</Modal>
266-
</Fragment>
267-
)}
229+
<CreateOrEditModal
230+
type="edit"
231+
isOpen={isEditOpen}
232+
onOpenChange={onEditOpenChange}
233+
name={details.name}
234+
id={details.id}
235+
form={editForm}
236+
onSubmit={onEditSubmit(details.id)}
237+
/>
238+
239+
{!isDefault && (
240+
<Fragment>
241+
<Button color="danger" isIconOnly isDisabled={details.selected} onPress={onRemoveOpen}>
242+
<IconTrash />
243+
</Button>
244+
245+
<Modal isOpen={isRemoveOpen} onOpenChange={onRemoveOpenChange}>
246+
<ModalContent>
247+
<ModalHeader>{t('primitives.remove', { resourceName: t('primitives.dns') })}</ModalHeader>
248+
<ModalBody>{details.name}</ModalBody>
249+
250+
<ModalFooter>
251+
<Button color="secondary" isLoading={removeMutation.isPending} onPress={onRemoveClose}>
252+
{t('actions.cancel')}
253+
</Button>
254+
255+
<Button
256+
color="danger"
257+
isLoading={removeMutation.isPending}
258+
onPress={async () => {
259+
await removeMutation.mutateAsync({ id: details.id })
260+
await refetch()
261+
onRemoveClose()
262+
}}
263+
>
264+
{t('actions.confirm')}
265+
</Button>
266+
</ModalFooter>
267+
</ModalContent>
268+
</Modal>
269+
</Fragment>
270+
)}
271+
</div>
268272
</CardFooter>
269273
</Card>
270274
)

0 commit comments

Comments
 (0)