konnosDashboard
RestartTableDialog.tsx110 lines · main
1import { useParams } from 'common'
2import { toast } from 'sonner'
3import {
4 AlertDialog,
5 AlertDialogAction,
6 AlertDialogCancel,
7 AlertDialogContent,
8 AlertDialogDescription,
9 AlertDialogFooter,
10 AlertDialogHeader,
11 AlertDialogTitle,
12} from 'ui'
13
14import { PipelineStatusName } from './Replication.constants'
15import { useRollbackTablesMutation } from '@/data/replication/rollback-tables-mutation'
16
17interface RestartTableDialogProps {
18 open: boolean
19 onOpenChange: (open: boolean) => void
20 tableId: number
21 tableName: string
22 pipelineStatusName?: PipelineStatusName
23 onRestartStart?: () => void
24 onRestartComplete?: () => void
25}
26
27export const RestartTableDialog = ({
28 open,
29 onOpenChange,
30 tableId,
31 tableName,
32 pipelineStatusName,
33 onRestartStart,
34 onRestartComplete,
35}: RestartTableDialogProps) => {
36 const { ref: projectRef, pipelineId: _pipelineId } = useParams()
37 const pipelineId = Number(_pipelineId)
38
39 const { mutate: rollbackTables, isPending: isResetting } = useRollbackTablesMutation({
40 onSuccess: () => {
41 toast.success(
42 `Restarting replication for "${tableName}". Pipeline will ${pipelineStatusName === PipelineStatusName.STOPPED ? 'start' : 'restart'} automatically.`
43 )
44 },
45 onSettled: () => {
46 onRestartComplete?.()
47 onOpenChange(false)
48 },
49 onError: (error) => {
50 toast.error(`Failed to restart replication: ${error.message}`)
51 },
52 })
53
54 const handleReset = () => {
55 if (!projectRef) return toast.error('Project ref is required')
56 if (!pipelineId) return toast.error('Pipeline ID is required')
57
58 onRestartStart?.()
59 rollbackTables({
60 projectRef,
61 pipelineId,
62 target: { type: 'single_table', table_id: tableId },
63 rollbackType: 'full',
64 pipelineStatusName,
65 })
66 }
67
68 return (
69 <AlertDialog open={open} onOpenChange={onOpenChange}>
70 <AlertDialogContent>
71 <AlertDialogHeader>
72 <AlertDialogTitle>
73 Restart replication for <code className="text-code-inline">{tableName}</code>
74 </AlertDialogTitle>
75 <AlertDialogDescription asChild>
76 <div className="space-y-3 text-sm">
77 <p>
78 This will restart replication for{' '}
79 <code className="text-code-inline">{tableName}</code> from scratch:
80 </p>
81 <ul className="list-disc list-inside space-y-1.5 pl-2">
82 <li>
83 <strong>The table copy will be re-initialized.</strong> All data will be copied
84 again from the source.
85 </li>
86 <li>
87 <strong>Existing downstream data will be deleted.</strong> Any replicated data for
88 this table will be removed.
89 </li>
90 <li>
91 <strong>All other tables remain untouched.</strong> Only this table is affected.
92 </li>
93 <li>
94 <strong>The pipeline will restart automatically.</strong> This is required to
95 apply this change.
96 </li>
97 </ul>
98 </div>
99 </AlertDialogDescription>
100 </AlertDialogHeader>
101 <AlertDialogFooter>
102 <AlertDialogCancel disabled={isResetting}>Cancel</AlertDialogCancel>
103 <AlertDialogAction disabled={isResetting} onClick={handleReset} variant="warning">
104 {isResetting ? 'Restarting replication...' : 'Restart replication'}
105 </AlertDialogAction>
106 </AlertDialogFooter>
107 </AlertDialogContent>
108 </AlertDialog>
109 )
110}