mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 01:45:10 +03:00
fix(pipelines): Make pipeline actions and status updates reliable (#50085)
## Summary Make pipeline actions and status feedback reliable while requests are running or fail. Let the backend coordinate table resets and restarts, keep stopped pipelines stopped after resets or settings changes, and refresh the UI from confirmed backend state. ## Pipeline actions and recovery - Reset one table, all errored tables, or all tables through the rollback endpoint without separate frontend stop/start requests. Explain which destination data is deleted, which rows are copied again, initial sync charges, and the skip-initial-sync setting. - Keep pending feedback until the action and a fresh status read finish, including across navigation and polling errors. Prevent overlapping actions and disable start/stop controls when status is unavailable or transitioning. - Close the creation form once the pipeline is created. If its initial start fails, users can retry Start on the existing pipeline without creating a duplicate. - Wait for confirmed shutdown before deletion; a shutdown error or timeout leaves deletion retryable. Keep failed version updates open and avoid reporting success. - Clarify recovery guidance and pending labels, suppress duplicate error toasts, and hide stale table errors during transitions. ## Status updates and shared UI - Poll pipeline status and table metrics one second after each response, share in-flight reads, pause dashboard polling in background tabs, and respect rate-limit backoff. The shutdown waiter continues in the background. - Refresh metadata after mutations even when an older read is in flight, while preserving shared polling requests. Refresh affected data after failures that may follow a committed reset or settings change. - Move pending request state into the shared, project-keyed `DatabaseLayout` so the list, detail page, and diagram stay consistent. The surrounding database-page changes update named imports in both Next.js and TanStack routes. - Simplify action, status, and form rendering; announce status changes to assistive technology; and sort table statuses without mutating cached data. --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com> Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com>
This commit is contained in:
67 files changed
+2164
-972
No files matched your search
@@ -85,6 +85,7 @@ These are the layout-only TanStack files. Most hold a single product layout comp
|
||||
- [x] `routes/project/$ref.tsx` — DefaultLayout only. **Delta vs plan:** ProjectLayoutWithAuth omitted from the shell because product layouts (DatabaseLayout, AuthLayout, StorageLayout, …) already render `withAuth(... ProjectLayout ...)` internally — adding it here would double-wrap. The home page (`/project/$ref/index.tsx`) wraps itself in `ProjectLayoutWithAuth` since it has no product layout.
|
||||
- [x] `routes/project/$ref/database.tsx` — DatabaseLayout (reads `databaseLayoutTitle` from leaf `staticData`)
|
||||
- [x] `routes/project/$ref/database/triggers.tsx` — sub-shell with `PageLayout` + permission gate + nav items, inlined from `DatabaseTriggersLayout`. **Delta vs plan:** the existing `DatabaseTriggersLayout` component wraps `<DatabaseLayout title="Triggers">` internally, so re-using it inside the database.tsx shell would double-wrap. Inlined the inner part instead; the Next-side component is left untouched (still used by the `pages/...` files we re-export).
|
||||
- [x] `routes/project/$ref/database/replication.tsx` — sub-shell providing `PipelineRequestStatusProvider`, mirrors `ReplicationLayout` on the Next side. Sets `databaseLayoutTitle: 'Replication'` for the whole subtree (leaf routes no longer redeclare it) so the provider stays a single instance across navigation between `replication/index`, `replication/$pipelineId`, and `replication/replica/$replicaId` — those three leaves all read pipeline start/stop state via `usePipelineRequestStatus`, which previously lived on `DatabaseLayout` itself and mounted for every non-Replication Database page too.
|
||||
- [x] `routes/project/$ref/auth.tsx` — AuthLayout (reads `authLayoutTitle` from leaf `staticData`). **Delta vs plan:** shell honours a `skipAuthLayout: true` opt-out in `staticData` for leaves whose own body or sub-layout already wraps in `AuthLayout` (`AuthProvidersLayout`, `AuthEmailsLayout`, `pages/.../auth/third-party.tsx`) — without it those routes would double-wrap (which also doubles `withAuth` + `ProjectLayout`).
|
||||
- ~~`routes/project/$ref/auth/templates.tsx` — AuthEmailsLayout~~ **Delta vs plan: not landed.** A unified `templates.tsx` sub-shell would force `templates/$templateId.tsx` (which uses plain `AuthLayout`, not `AuthEmailsLayout`) into the wrong wrapping. Instead `templates/index.tsx` and `auth/smtp.tsx` each set `skipAuthLayout: true` and wrap themselves in `AuthEmailsLayout`; `templates/$templateId.tsx` uses the standard auth shell with `authLayoutTitle: 'Emails'`.
|
||||
- [x] `routes/project/$ref/storage.tsx` — StorageLayout + StorageBucketsLayout (reads `storageLayoutTitle`, optional `skipStorageBucketsLayout`, `storageBucketsLayoutTitle`, `storageBucketsLayoutHideSubtitle` from leaf `staticData`). **Delta vs plan:** the shell wraps in BOTH StorageLayout and StorageBucketsLayout by default — every storage page except bucket-detail pages uses both. Bucket-detail pages set `skipStorageBucketsLayout: true`. `/storage/s3` uses `storageBucketsLayout{Title,HideSubtitle}` to override the inner header.
|
||||
|
||||
+291
-45
@@ -1,22 +1,29 @@
|
||||
import { act, fireEvent, render, screen } from '@testing-library/react'
|
||||
import { QueryClient } from '@tanstack/react-query'
|
||||
import { act, fireEvent, screen, waitFor } from '@testing-library/react'
|
||||
import type { components } from 'api-types'
|
||||
import { HttpResponse } from 'msw'
|
||||
import { describe, expect, it, vi } from 'vitest'
|
||||
|
||||
import { BatchRestartDialog } from './BatchRestartDialog'
|
||||
import { PipelineStatusName } from './Replication.constants'
|
||||
import { getStatusName } from './Pipeline.utils'
|
||||
import { PipelineStatePill } from './PipelineStatePill'
|
||||
import { RestartTableDialog } from './RestartTableDialog'
|
||||
import { replicationKeys } from '@/data/replication/keys'
|
||||
import type { ReplicationPipelineTableStatus } from '@/data/replication/pipeline-replication-status-query'
|
||||
import {
|
||||
useReplicationPipelineStatusQuery,
|
||||
type ReplicationPipelineStatusResponse,
|
||||
} from '@/data/replication/pipeline-status-query'
|
||||
import {
|
||||
PipelineRequestStatusProvider,
|
||||
usePipelineRequestStatus,
|
||||
} from '@/state/replication-pipeline-request-status'
|
||||
import { customRender } from '@/tests/lib/custom-render'
|
||||
import { addAPIMock, type APIErrorBody } from '@/tests/lib/msw'
|
||||
|
||||
const mocks = vi.hoisted(() => ({
|
||||
rollbackTables: vi.fn().mockResolvedValue({ pipeline_id: 9, tables: [] }),
|
||||
}))
|
||||
|
||||
vi.mock('common', () => ({
|
||||
useParams: () => ({ ref: 'project-ref', pipelineId: '9' }),
|
||||
}))
|
||||
vi.mock('@/data/replication/rollback-tables-mutation', () => ({
|
||||
useRollbackTablesMutation: () => ({
|
||||
mutateAsync: mocks.rollbackTables,
|
||||
isPending: false,
|
||||
}),
|
||||
vi.mock('common', async (importOriginal) => ({
|
||||
...(await importOriginal<typeof import('common')>()),
|
||||
useParams: () => ({ ref: 'default', pipelineId: '9' }),
|
||||
}))
|
||||
vi.mock('./RestartCostEstimate', () => ({
|
||||
RestartCostEstimate: ({ tables }: { tables: { schema: string; name: string }[] }) => (
|
||||
@@ -40,7 +47,6 @@ const table = (
|
||||
|
||||
describe('BatchRestartDialog', () => {
|
||||
it('describes every table reset by the all-errored backend target', async () => {
|
||||
const onRestartStart = vi.fn()
|
||||
const tables = [
|
||||
table(1, { name: 'error', reason: 'manual', retry_policy: { policy: 'manual_retry' } }),
|
||||
table(2, { name: 'error', reason: 'terminal', retry_policy: { policy: 'no_retry' } }),
|
||||
@@ -52,22 +58,45 @@ describe('BatchRestartDialog', () => {
|
||||
table(4, { name: 'following_wal' }),
|
||||
]
|
||||
|
||||
render(
|
||||
<BatchRestartDialog
|
||||
open
|
||||
onOpenChange={vi.fn()}
|
||||
mode="errored"
|
||||
tables={tables}
|
||||
tableSyncCopy={{ type: 'include_tables', table_ids: [1, 2] }}
|
||||
pipelineStatusName={PipelineStatusName.STARTED}
|
||||
onRestartStart={onRestartStart}
|
||||
/>
|
||||
addAPIMock({
|
||||
method: 'get',
|
||||
path: '/platform/replication/:ref/pipelines/:pipeline_id/status',
|
||||
response: () =>
|
||||
HttpResponse.json<ReplicationPipelineStatusResponse>({
|
||||
pipeline_id: 9,
|
||||
status: { name: 'stopped' },
|
||||
}),
|
||||
})
|
||||
const requests: unknown[] = []
|
||||
const onOpenChange = vi.fn()
|
||||
addAPIMock({
|
||||
method: 'post',
|
||||
path: '/platform/replication/:ref/pipelines/:pipeline_id/rollback-tables',
|
||||
response: async ({ request }) => {
|
||||
requests.push(await request.json())
|
||||
return HttpResponse.json<components['schemas']['RollbackTablesResponse_Output']>({
|
||||
pipeline_id: 9,
|
||||
tables: [1, 2, 3].map((table_id) => ({ table_id, new_state: { name: 'queued' } })),
|
||||
})
|
||||
},
|
||||
})
|
||||
|
||||
customRender(
|
||||
<PipelineRequestStatusProvider>
|
||||
<BatchRestartDialog
|
||||
open
|
||||
onOpenChange={onOpenChange}
|
||||
mode="errored"
|
||||
tables={tables}
|
||||
tableSyncCopy={{ type: 'include_tables', table_ids: [1, 2] }}
|
||||
/>
|
||||
</PipelineRequestStatusProvider>
|
||||
)
|
||||
|
||||
expect(screen.getByText(/This resets 3 failed tables/)).toBeInTheDocument()
|
||||
expect(
|
||||
screen.getByText(
|
||||
/2 of 3 tables will sync existing rows again. The remaining 1 table will skip initial sync/
|
||||
/Existing rows sync again for 2 of 3 tables, while the remaining table skips initial sync/
|
||||
)
|
||||
).toBeInTheDocument()
|
||||
expect(screen.getByTestId('copy-targets')).toHaveTextContent('public.table_1,public.table_2')
|
||||
@@ -76,26 +105,243 @@ describe('BatchRestartDialog', () => {
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Reset failed tables' }))
|
||||
})
|
||||
|
||||
expect(onRestartStart).toHaveBeenCalledWith([1, 2, 3])
|
||||
expect(mocks.rollbackTables).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
pipelineId: 9,
|
||||
target: { type: 'all_errored_tables' },
|
||||
rollbackType: 'full',
|
||||
await waitFor(() => expect(onOpenChange).toHaveBeenCalledWith(false))
|
||||
expect(requests).toEqual([{ target: { type: 'all_errored_tables' } }])
|
||||
})
|
||||
|
||||
it('uses singular copy when resetting the only table', () => {
|
||||
customRender(
|
||||
<PipelineRequestStatusProvider>
|
||||
<BatchRestartDialog
|
||||
open
|
||||
onOpenChange={vi.fn()}
|
||||
mode="all"
|
||||
tables={[table(1, { name: 'following_wal' })]}
|
||||
tableSyncCopy={{ type: 'include_tables', table_ids: [1] }}
|
||||
/>
|
||||
</PipelineRequestStatusProvider>
|
||||
)
|
||||
|
||||
expect(
|
||||
screen.getByText(
|
||||
'This resets the table, deletes its destination data, and syncs existing rows again.'
|
||||
)
|
||||
).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it.each([
|
||||
{
|
||||
target: 'all',
|
||||
initialStatus: 'started',
|
||||
optimisticLabel: 'Stopping',
|
||||
nextStatus: 'starting',
|
||||
nextLabel: 'Starting',
|
||||
},
|
||||
{
|
||||
target: 'single',
|
||||
initialStatus: 'started',
|
||||
optimisticLabel: 'Stopping',
|
||||
nextStatus: 'starting',
|
||||
nextLabel: 'Starting',
|
||||
},
|
||||
{
|
||||
target: 'all',
|
||||
initialStatus: 'stopped',
|
||||
optimisticLabel: 'Stopped',
|
||||
nextStatus: 'stopped',
|
||||
nextLabel: 'Stopped',
|
||||
},
|
||||
{
|
||||
target: 'single',
|
||||
initialStatus: 'stopped',
|
||||
optimisticLabel: 'Stopped',
|
||||
nextStatus: 'stopped',
|
||||
nextLabel: 'Stopped',
|
||||
},
|
||||
] as const)(
|
||||
'resets $target tables while honoring a $initialStatus pipeline',
|
||||
async ({ target, initialStatus, optimisticLabel, nextStatus, nextLabel }) => {
|
||||
const onOpenChange = vi.fn()
|
||||
const onResetStart = vi.fn()
|
||||
const onResetComplete = vi.fn()
|
||||
const requests: unknown[] = []
|
||||
const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } })
|
||||
let backendStatus: ReplicationPipelineStatusResponse['status']['name'] = initialStatus
|
||||
let complete = () => {}
|
||||
const response = new Promise<void>((resolve) => {
|
||||
complete = resolve
|
||||
})
|
||||
)
|
||||
})
|
||||
addAPIMock({
|
||||
method: 'get',
|
||||
path: '/platform/replication/:ref/pipelines/:pipeline_id/status',
|
||||
response: () =>
|
||||
HttpResponse.json<ReplicationPipelineStatusResponse>({
|
||||
pipeline_id: 9,
|
||||
status: { name: backendStatus },
|
||||
}),
|
||||
})
|
||||
addAPIMock({
|
||||
method: 'post',
|
||||
path: '/platform/replication/:ref/pipelines/:pipeline_id/rollback-tables',
|
||||
response: async ({ request }) => {
|
||||
requests.push(await request.json())
|
||||
await response
|
||||
return HttpResponse.json<components['schemas']['RollbackTablesResponse_Output']>({
|
||||
pipeline_id: 9,
|
||||
tables: [{ table_id: 1, new_state: { name: 'queued' } }],
|
||||
})
|
||||
},
|
||||
})
|
||||
customRender(
|
||||
<PipelineRequestStatusProvider>
|
||||
<RestartDialogWithStatus
|
||||
target={target}
|
||||
onOpenChange={onOpenChange}
|
||||
onResetStart={onResetStart}
|
||||
onResetComplete={onResetComplete}
|
||||
/>
|
||||
</PipelineRequestStatusProvider>,
|
||||
{ queryClient }
|
||||
)
|
||||
await screen.findByText(initialStatus === 'started' ? 'Running' : 'Stopped')
|
||||
expect(
|
||||
screen.getByText(
|
||||
initialStatus === 'started'
|
||||
? 'This resets the table, deletes its destination data, and syncs existing rows again. The pipeline restarts automatically to apply the reset.'
|
||||
: 'This resets the table, deletes its destination data, and syncs existing rows again.'
|
||||
)
|
||||
).toBeInTheDocument()
|
||||
fireEvent.click(
|
||||
screen.getByRole('button', {
|
||||
name: target === 'all' ? 'Reset all tables' : 'Reset table',
|
||||
})
|
||||
)
|
||||
expect(onResetStart).toHaveBeenCalledWith(target === 'all' ? [1] : 1)
|
||||
expect(screen.getByText(optimisticLabel)).toBeInTheDocument()
|
||||
backendStatus = nextStatus
|
||||
await act(async () => {
|
||||
await queryClient.invalidateQueries(
|
||||
{ queryKey: replicationKeys.pipelinesStatus('default', 9) },
|
||||
{ cancelRefetch: false }
|
||||
)
|
||||
})
|
||||
expect(screen.getByText(optimisticLabel)).toBeInTheDocument()
|
||||
expect(screen.getByRole('button', { name: 'Resetting…' })).toBeDisabled()
|
||||
await act(async () => {
|
||||
complete()
|
||||
})
|
||||
await waitFor(() => expect(onOpenChange).toHaveBeenCalledWith(false))
|
||||
expect(onResetComplete).toHaveBeenCalledWith(target === 'all' ? [1] : 1)
|
||||
await waitFor(() => expect(screen.getByText(nextLabel)).toBeInTheDocument())
|
||||
expect(requests).toEqual([
|
||||
{
|
||||
target: target === 'all' ? { type: 'all_tables' } : { type: 'single_table', table_id: 1 },
|
||||
},
|
||||
])
|
||||
}
|
||||
)
|
||||
|
||||
it('prevents a reset when the pipeline status is unavailable', () => {
|
||||
render(
|
||||
<BatchRestartDialog
|
||||
open
|
||||
onOpenChange={vi.fn()}
|
||||
mode="all"
|
||||
tables={[table(1, { name: 'following_wal' })]}
|
||||
/>
|
||||
)
|
||||
it.each(['all', 'single'] as const)(
|
||||
'keeps the $target reset dialog open after an error',
|
||||
async (target) => {
|
||||
const onOpenChange = vi.fn()
|
||||
const onResetStart = vi.fn()
|
||||
const onResetComplete = vi.fn()
|
||||
|
||||
expect(screen.getByRole('button', { name: 'Reset all tables' })).toBeDisabled()
|
||||
})
|
||||
addAPIMock({
|
||||
method: 'get',
|
||||
path: '/platform/replication/:ref/pipelines/:pipeline_id/status',
|
||||
response: () =>
|
||||
HttpResponse.json<ReplicationPipelineStatusResponse>({
|
||||
pipeline_id: 9,
|
||||
status: { name: 'started' },
|
||||
}),
|
||||
})
|
||||
addAPIMock({
|
||||
method: 'post',
|
||||
path: '/platform/replication/:ref/pipelines/:pipeline_id/rollback-tables',
|
||||
response: () =>
|
||||
HttpResponse.json<APIErrorBody>({ message: 'Unable to reset tables' }, { status: 500 }),
|
||||
})
|
||||
|
||||
customRender(
|
||||
<PipelineRequestStatusProvider>
|
||||
<RestartDialogWithStatus
|
||||
target={target}
|
||||
onOpenChange={onOpenChange}
|
||||
onResetStart={onResetStart}
|
||||
onResetComplete={onResetComplete}
|
||||
/>
|
||||
</PipelineRequestStatusProvider>
|
||||
)
|
||||
|
||||
await screen.findByText('Running')
|
||||
fireEvent.click(
|
||||
screen.getByRole('button', {
|
||||
name: target === 'all' ? 'Reset all tables' : 'Reset table',
|
||||
})
|
||||
)
|
||||
|
||||
await waitFor(() => {
|
||||
expect(onResetComplete).toHaveBeenCalledWith(target === 'all' ? [1] : 1)
|
||||
})
|
||||
expect(onOpenChange).not.toHaveBeenCalled()
|
||||
expect(
|
||||
screen.getByRole('button', {
|
||||
name: target === 'all' ? 'Reset all tables' : 'Reset table',
|
||||
})
|
||||
).toBeEnabled()
|
||||
}
|
||||
)
|
||||
})
|
||||
|
||||
const RestartDialogWithStatus = ({
|
||||
target,
|
||||
onOpenChange,
|
||||
onResetStart,
|
||||
onResetComplete,
|
||||
}: {
|
||||
target: 'single' | 'all'
|
||||
onOpenChange: (open: boolean) => void
|
||||
onResetStart: (tableIds: number[] | number) => void
|
||||
onResetComplete: (tableIds: number[] | number) => void
|
||||
}) => {
|
||||
const { data, error, isPending, isError, isSuccess } = useReplicationPipelineStatusQuery({
|
||||
projectRef: 'default',
|
||||
pipelineId: 9,
|
||||
})
|
||||
const { getRequestStatus } = usePipelineRequestStatus()
|
||||
const pipelineStatusName = getStatusName(data?.status)
|
||||
return (
|
||||
<>
|
||||
<PipelineStatePill
|
||||
pipelineStatus={data?.status}
|
||||
error={error}
|
||||
isLoading={isPending}
|
||||
isError={isError}
|
||||
isSuccess={isSuccess}
|
||||
requestStatus={getRequestStatus(9)}
|
||||
/>
|
||||
{target === 'all' ? (
|
||||
<BatchRestartDialog
|
||||
open
|
||||
mode="all"
|
||||
tables={[table(1, { name: 'following_wal' })]}
|
||||
pipelineStatusName={pipelineStatusName}
|
||||
onOpenChange={onOpenChange}
|
||||
onResetStart={onResetStart}
|
||||
onResetComplete={onResetComplete}
|
||||
/>
|
||||
) : (
|
||||
<RestartTableDialog
|
||||
open
|
||||
table={table(1, { name: 'following_wal' })}
|
||||
pipelineStatusName={pipelineStatusName}
|
||||
onOpenChange={onOpenChange}
|
||||
onResetStart={onResetStart}
|
||||
onResetComplete={onResetComplete}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -12,14 +12,20 @@ import {
|
||||
AlertDialogTitle,
|
||||
} from 'ui'
|
||||
|
||||
import { PipelineStatusName } from './Replication.constants'
|
||||
import { getRestartRequestStatus } from './Pipeline.utils'
|
||||
import type { PipelineStatusName } from './Replication.constants'
|
||||
import { RestartCostEstimate } from './RestartCostEstimate'
|
||||
import { getTableCopyTargets } from './TableSyncCopy.utils'
|
||||
import { ReplicationPipelineTableStatus } from '@/data/replication/pipeline-replication-status-query'
|
||||
import { useRollbackTablesMutation } from '@/data/replication/rollback-tables-mutation'
|
||||
import type { TableSyncCopyConfig } from '@/data/replication/types'
|
||||
import {
|
||||
PipelineStatusRequestStatus,
|
||||
usePipelineRequestStatus,
|
||||
} from '@/state/replication-pipeline-request-status'
|
||||
|
||||
interface BatchRestartDialogProps {
|
||||
pipelineStatusName?: PipelineStatusName
|
||||
open: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
mode: 'all' | 'errored'
|
||||
@@ -27,9 +33,8 @@ interface BatchRestartDialogProps {
|
||||
sourceId?: number
|
||||
publicationName?: string
|
||||
tableSyncCopy?: TableSyncCopyConfig | null
|
||||
pipelineStatusName?: PipelineStatusName
|
||||
onRestartStart?: (tableIds: number[]) => void
|
||||
onRestartComplete?: (tableIds: number[]) => void
|
||||
onResetStart?: (tableIds: number[]) => void
|
||||
onResetComplete?: (tableIds: number[]) => void
|
||||
}
|
||||
|
||||
export const BatchRestartDialog = ({
|
||||
@@ -41,11 +46,13 @@ export const BatchRestartDialog = ({
|
||||
publicationName,
|
||||
tableSyncCopy,
|
||||
pipelineStatusName,
|
||||
onRestartStart,
|
||||
onRestartComplete,
|
||||
onResetStart,
|
||||
onResetComplete,
|
||||
}: BatchRestartDialogProps) => {
|
||||
const { ref: projectRef, pipelineId: _pipelineId } = useParams()
|
||||
const pipelineId = Number(_pipelineId)
|
||||
const { runWithRequestStatus } = usePipelineRequestStatus()
|
||||
const restartRequestStatus = getRestartRequestStatus(pipelineStatusName)
|
||||
const affectedTables = useMemo(() => {
|
||||
if (mode === 'all') {
|
||||
return tables
|
||||
@@ -53,24 +60,15 @@ export const BatchRestartDialog = ({
|
||||
return tables.filter((table) => table.state.name === 'error')
|
||||
}
|
||||
}, [mode, tables])
|
||||
const affectedTableIds = useMemo(() => affectedTables.map((table) => table.id), [affectedTables])
|
||||
const isPipelineStatusUnavailable = pipelineStatusName === undefined
|
||||
|
||||
const affectedTableIds = affectedTables.map((table) => table.id)
|
||||
const copiedTables = useMemo(
|
||||
() => getTableCopyTargets(affectedTables, tableSyncCopy),
|
||||
[affectedTables, tableSyncCopy]
|
||||
)
|
||||
const pipelineAction = pipelineStatusName === PipelineStatusName.STOPPED ? 'start' : 'restart'
|
||||
|
||||
const { mutateAsync: rollbackTables, isPending: isResetting } = useRollbackTablesMutation({
|
||||
onSuccess: (data) => {
|
||||
const count = data.tables.length
|
||||
toast.success(
|
||||
`Resetting ${count} table${count > 1 ? 's' : ''}. Pipeline will ${pipelineAction} automatically.`
|
||||
)
|
||||
},
|
||||
onSettled: () => {
|
||||
onRestartComplete?.(affectedTableIds)
|
||||
toast.success(`Resetting ${count} table${count > 1 ? 's' : ''}`)
|
||||
onOpenChange(false)
|
||||
},
|
||||
onError: (error) => {
|
||||
@@ -80,42 +78,56 @@ export const BatchRestartDialog = ({
|
||||
|
||||
const handleReset = async () => {
|
||||
if (!projectRef) return toast.error('Project ref is required')
|
||||
if (isPipelineStatusUnavailable) return
|
||||
|
||||
onRestartStart?.(affectedTableIds)
|
||||
|
||||
onResetStart?.(affectedTableIds)
|
||||
try {
|
||||
await rollbackTables({
|
||||
projectRef,
|
||||
pipelineId,
|
||||
target: mode === 'all' ? { type: 'all_tables' } : { type: 'all_errored_tables' },
|
||||
rollbackType: 'full',
|
||||
pipelineStatusName,
|
||||
})
|
||||
} catch (error) {}
|
||||
await runWithRequestStatus(pipelineId, restartRequestStatus, () =>
|
||||
rollbackTables({
|
||||
projectRef,
|
||||
pipelineId,
|
||||
target: mode === 'all' ? { type: 'all_tables' } : { type: 'all_errored_tables' },
|
||||
})
|
||||
)
|
||||
} finally {
|
||||
onResetComplete?.(affectedTableIds)
|
||||
}
|
||||
}
|
||||
|
||||
const count = affectedTables.length
|
||||
const tableWord = count === 1 ? 'table' : 'tables'
|
||||
const remainingTableCount = count - copiedTables.length
|
||||
const remainingTableWord = remainingTableCount === 1 ? 'table' : 'tables'
|
||||
const initialSyncDescription =
|
||||
copiedTables.length === 0
|
||||
? 'Initial sync is skipped, so replication resumes with new changes only.'
|
||||
: copiedTables.length === affectedTables.length
|
||||
? 'Existing rows will sync again.'
|
||||
: `${copiedTables.length} of ${count} ${tableWord} will sync existing rows again. The remaining ${remainingTableCount} ${remainingTableWord} will skip initial sync and resume with new changes only.`
|
||||
let resetScope = `${count} failed ${tableWord}`
|
||||
if (mode === 'all') {
|
||||
resetScope = count === 1 ? 'the table' : `all ${count} tables`
|
||||
}
|
||||
const destinationData = count === 1 ? 'its destination data' : 'their destination data'
|
||||
|
||||
let resetDescription = `This resets ${resetScope} and deletes ${destinationData}. Initial sync is skipped, so replication resumes with new changes only.`
|
||||
if (copiedTables.length === affectedTables.length) {
|
||||
resetDescription = `This resets ${resetScope}, deletes ${destinationData}, and syncs existing rows again.`
|
||||
} else if (copiedTables.length > 0) {
|
||||
const remainingTables =
|
||||
remainingTableCount === 1
|
||||
? 'the remaining table'
|
||||
: `the remaining ${remainingTableCount} tables`
|
||||
const remainingAction = remainingTableCount === 1 ? 'skips' : 'skip'
|
||||
resetDescription = `This resets ${resetScope} and deletes ${destinationData}. Existing rows sync again for ${copiedTables.length} of ${count} ${tableWord}, while ${remainingTables} ${remainingAction} initial sync and resume with new changes only.`
|
||||
}
|
||||
|
||||
const shouldRestartPipeline = restartRequestStatus !== PipelineStatusRequestStatus.None
|
||||
const description = shouldRestartPipeline
|
||||
? `${resetDescription} The pipeline restarts automatically to apply the reset.`
|
||||
: resetDescription
|
||||
|
||||
const dialogContent =
|
||||
mode === 'all'
|
||||
? {
|
||||
title: 'Reset all tables',
|
||||
description: `This resets all ${count} ${tableWord}. Destination data will be deleted. ${initialSyncDescription} The pipeline will ${pipelineAction} automatically.`,
|
||||
description,
|
||||
action: 'Reset all tables',
|
||||
}
|
||||
: {
|
||||
title: 'Reset failed tables',
|
||||
description: `This resets ${count} failed ${tableWord}. Destination data for those tables will be deleted. ${initialSyncDescription} The pipeline will ${pipelineAction} automatically. Other tables stay as they are.`,
|
||||
description,
|
||||
action: 'Reset failed tables',
|
||||
}
|
||||
|
||||
@@ -135,11 +147,7 @@ export const BatchRestartDialog = ({
|
||||
/>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel disabled={isResetting}>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
disabled={isResetting || isPipelineStatusUnavailable}
|
||||
onClick={handleReset}
|
||||
variant="warning"
|
||||
>
|
||||
<AlertDialogAction disabled={isResetting} onClick={handleReset} variant="warning">
|
||||
{isResetting ? 'Resetting…' : dialogContent.action}
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
|
||||
+66
-27
@@ -18,6 +18,7 @@ type ProjectSettingsResponse = components['schemas']['ProjectSettingsResponse_Ou
|
||||
type SourcesResponse = components['schemas']['SourcesResponse_Output']
|
||||
|
||||
const mocks = vi.hoisted(() => ({
|
||||
isSaving: false,
|
||||
resetValidation: vi.fn(),
|
||||
submitPipeline: vi.fn(),
|
||||
validateConfiguration: vi.fn(),
|
||||
@@ -191,7 +192,7 @@ vi.mock('./useDestinationForm', () => ({
|
||||
useDestinationForm: () => ({
|
||||
isValidating: false,
|
||||
validateConfiguration: mocks.validateConfiguration,
|
||||
isSaving: false,
|
||||
isSaving: mocks.isSaving,
|
||||
submitPipeline: mocks.submitPipeline,
|
||||
hasRunValidation: false,
|
||||
destinationValidationFailures: [],
|
||||
@@ -252,6 +253,7 @@ vi.mock('@/components/interfaces/Storage/AnalyticsBuckets/CreateAnalyticsBucketS
|
||||
describe('DestinationForm edit submission', () => {
|
||||
beforeEach(() => {
|
||||
pipelineTableIds = [101, 999]
|
||||
mocks.isSaving = false
|
||||
mocks.submitPipeline.mockResolvedValue(undefined)
|
||||
mocks.validateConfiguration.mockResolvedValue({ canContinue: true, warnings: [] })
|
||||
|
||||
@@ -293,36 +295,73 @@ describe('DestinationForm edit submission', () => {
|
||||
})
|
||||
})
|
||||
|
||||
it('bypasses create validation and submits the pruned table policy with the existing batch', async () => {
|
||||
const onClose = vi.fn()
|
||||
it.each([true, false])(
|
||||
'describes saving without claiming a stopped pipeline will start (enabled: %s)',
|
||||
(enabled) => {
|
||||
mocks.isSaving = true
|
||||
customRender(
|
||||
<DestinationForm
|
||||
selectedType="BigQuery"
|
||||
visible
|
||||
existingDestination={{
|
||||
...existingDestination,
|
||||
enabled,
|
||||
statusName: enabled ? 'started' : 'stopped',
|
||||
}}
|
||||
onClose={vi.fn()}
|
||||
/>
|
||||
)
|
||||
expect(
|
||||
screen.getByText(
|
||||
enabled ? 'Updating destination and restarting pipeline...' : 'Updating destination...'
|
||||
)
|
||||
).toBeInTheDocument()
|
||||
expect(
|
||||
screen.queryByText('Updating destination and starting pipeline...')
|
||||
).not.toBeInTheDocument()
|
||||
}
|
||||
)
|
||||
|
||||
customRender(
|
||||
<DestinationForm
|
||||
selectedType="BigQuery"
|
||||
visible
|
||||
existingDestination={existingDestination}
|
||||
onClose={onClose}
|
||||
/>
|
||||
)
|
||||
it.each([true, false])(
|
||||
'submits the pruned table policy with the existing batch (enabled: %s)',
|
||||
async (enabled) => {
|
||||
const destination = {
|
||||
...existingDestination,
|
||||
enabled,
|
||||
statusName: enabled ? 'started' : 'stopped',
|
||||
}
|
||||
const onClose = vi.fn()
|
||||
|
||||
const submitButton = screen.getByRole('button', { name: 'Apply and restart pipeline' })
|
||||
await waitFor(() => expect(submitButton).toBeEnabled())
|
||||
fireEvent.click(submitButton)
|
||||
customRender(
|
||||
<DestinationForm
|
||||
selectedType="BigQuery"
|
||||
visible
|
||||
existingDestination={destination}
|
||||
onClose={onClose}
|
||||
/>
|
||||
)
|
||||
|
||||
await waitFor(() => expect(mocks.submitPipeline).toHaveBeenCalledOnce())
|
||||
const submitButton = screen.getByRole('button', {
|
||||
name: enabled ? 'Apply and restart pipeline' : 'Apply changes',
|
||||
})
|
||||
await waitFor(() => expect(submitButton).toBeEnabled())
|
||||
fireEvent.click(submitButton)
|
||||
|
||||
expect(mocks.validateConfiguration).not.toHaveBeenCalled()
|
||||
expect(mocks.submitPipeline).toHaveBeenCalledWith({
|
||||
data: expect.objectContaining({
|
||||
tableSyncCopyMode: 'include_tables',
|
||||
tableSyncCopyTableIds: ['101'],
|
||||
}),
|
||||
existingDestination,
|
||||
existingBatch,
|
||||
onSuccess: expect.any(Function),
|
||||
onClose,
|
||||
})
|
||||
})
|
||||
await waitFor(() => expect(mocks.submitPipeline).toHaveBeenCalledOnce())
|
||||
|
||||
expect(mocks.validateConfiguration).not.toHaveBeenCalled()
|
||||
expect(mocks.submitPipeline).toHaveBeenCalledWith({
|
||||
data: expect.objectContaining({
|
||||
tableSyncCopyMode: 'include_tables',
|
||||
tableSyncCopyTableIds: ['101'],
|
||||
}),
|
||||
existingDestination: destination,
|
||||
existingBatch,
|
||||
onSuccess: expect.any(Function),
|
||||
onClose,
|
||||
})
|
||||
}
|
||||
)
|
||||
|
||||
it('rejects an edit when every selected table has left the publication', async () => {
|
||||
pipelineTableIds = [999]
|
||||
|
||||
+19
-18
@@ -280,9 +280,7 @@ export const DestinationForm = ({
|
||||
|
||||
const getSubmitButtonText = () => {
|
||||
if (editMode) {
|
||||
return existingDestination?.enabled
|
||||
? 'Apply and restart pipeline'
|
||||
: 'Apply and start pipeline'
|
||||
return existingDestination?.enabled ? 'Apply and restart pipeline' : 'Apply changes'
|
||||
} else {
|
||||
if (hasRunValidation && validationWarnings.length > 0 && !hasValidationFailures) {
|
||||
return 'Create and start pipeline anyway'
|
||||
@@ -292,6 +290,13 @@ export const DestinationForm = ({
|
||||
}
|
||||
}
|
||||
|
||||
const getSavingMessage = () => {
|
||||
if (isValidating) return 'Validating destination configuration...'
|
||||
if (!editMode) return 'Creating pipeline...'
|
||||
if (existingDestination?.enabled) return 'Updating destination and restarting pipeline...'
|
||||
return 'Updating destination...'
|
||||
}
|
||||
|
||||
// Stages the form values and opens the cost-estimation dialog, which is the final gate before
|
||||
// a pipeline is created and started.
|
||||
const openCostDialog = (data: z.infer<typeof FormSchema>) => {
|
||||
@@ -467,21 +472,25 @@ export const DestinationForm = ({
|
||||
|
||||
<DialogSectionSeparator />
|
||||
|
||||
{selectedType === 'BigQuery' && etlEnableBigQuery ? (
|
||||
{selectedType === 'BigQuery' && etlEnableBigQuery && (
|
||||
<BigQueryFields form={form} editMode={editMode} />
|
||||
) : selectedType === 'Analytics Bucket' && etlEnableIceberg ? (
|
||||
)}
|
||||
{selectedType === 'Analytics Bucket' && etlEnableIceberg && (
|
||||
<AnalyticsBucketFields
|
||||
form={form}
|
||||
editMode={editMode}
|
||||
onSelectNewBucket={() => setNewBucketSheetVisible(true)}
|
||||
/>
|
||||
) : selectedType === 'DuckLake' && etlEnableDucklake ? (
|
||||
)}
|
||||
{selectedType === 'DuckLake' && etlEnableDucklake && (
|
||||
<DuckLakeFields form={form} editMode={editMode} />
|
||||
) : selectedType === 'Snowflake' && etlEnableSnowflake ? (
|
||||
)}
|
||||
{selectedType === 'Snowflake' && etlEnableSnowflake && (
|
||||
<SnowflakeFields form={form} editMode={editMode} />
|
||||
) : selectedType === 'ClickHouse' && etlEnableClickHouse ? (
|
||||
)}
|
||||
{selectedType === 'ClickHouse' && etlEnableClickHouse && (
|
||||
<ClickHouseFields form={form} editMode={editMode} />
|
||||
) : null}
|
||||
)}
|
||||
|
||||
<DialogSectionSeparator />
|
||||
|
||||
@@ -516,15 +525,7 @@ export const DestinationForm = ({
|
||||
transition={{ duration: 0.2, ease: 'easeOut' }}
|
||||
>
|
||||
<Loader2 className="animate-spin" size={14} />
|
||||
<p className="text-foreground-light text-sm">
|
||||
{isValidating
|
||||
? 'Validating destination configuration...'
|
||||
: editMode
|
||||
? existingDestination?.enabled
|
||||
? 'Updating destination and restarting pipeline...'
|
||||
: 'Updating destination and starting pipeline...'
|
||||
: 'Creating pipeline...'}
|
||||
</p>
|
||||
<p className="text-foreground-light text-sm">{getSavingMessage()}</p>
|
||||
</motion.div>
|
||||
) : (
|
||||
<div />
|
||||
|
||||
+233
-148
@@ -1,181 +1,244 @@
|
||||
import { act, renderHook } from '@testing-library/react'
|
||||
import { QueryClient } from '@tanstack/react-query'
|
||||
import { act, waitFor } from '@testing-library/react'
|
||||
import type { components } from 'api-types'
|
||||
import { HttpResponse } from 'msw'
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest'
|
||||
|
||||
import type { DestinationPanelSchemaType } from './DestinationForm.schema'
|
||||
import { useDestinationForm } from './useDestinationForm'
|
||||
import { replicationKeys } from '@/data/replication/keys'
|
||||
import {
|
||||
PipelineRequestStatusProvider,
|
||||
PipelineStatusRequestStatus,
|
||||
usePipelineRequestStatus,
|
||||
} from '@/state/replication-pipeline-request-status'
|
||||
import { customRenderHook, CustomWrapper } from '@/tests/lib/custom-render'
|
||||
import { addAPIMock, type APIErrorBody } from '@/tests/lib/msw'
|
||||
|
||||
const mocks = vi.hoisted(() => ({
|
||||
validateDestination: vi.fn(),
|
||||
validatePipeline: vi.fn(),
|
||||
createS3AccessKey: vi.fn(),
|
||||
createNamespace: vi.fn(),
|
||||
createDestinationPipeline: vi.fn(),
|
||||
updateDestinationPipeline: vi.fn(),
|
||||
startPipeline: vi.fn(),
|
||||
setRequestStatus: vi.fn(),
|
||||
}))
|
||||
type ValidationResponse = components['schemas']['ValidatePipelineResponse_Output']
|
||||
const updateRequests: unknown[] = []
|
||||
const validationRequests: unknown[] = []
|
||||
const startRequests = vi.fn()
|
||||
const createRequests = vi.fn()
|
||||
let validationResponse: ValidationResponse
|
||||
|
||||
vi.mock('common', () => ({ useParams: () => ({ ref: 'project-ref' }) }))
|
||||
vi.mock('@/data/replication/sources-query', () => ({
|
||||
useReplicationSourcesQuery: () => ({
|
||||
data: { sources: [{ id: 42, name: 'project-ref' }] },
|
||||
}),
|
||||
}))
|
||||
vi.mock('@/data/replication/validate-destination-mutation', () => ({
|
||||
useValidateDestinationMutation: () => ({
|
||||
mutateAsync: mocks.validateDestination,
|
||||
isPending: false,
|
||||
}),
|
||||
}))
|
||||
vi.mock('@/data/replication/validate-pipeline-mutation', () => ({
|
||||
useValidatePipelineMutation: () => ({
|
||||
mutateAsync: mocks.validatePipeline,
|
||||
isPending: false,
|
||||
}),
|
||||
}))
|
||||
vi.mock('@/data/storage/s3-access-key-create-mutation', () => ({
|
||||
useS3AccessKeyCreateMutation: () => ({
|
||||
mutateAsync: mocks.createS3AccessKey,
|
||||
isPending: false,
|
||||
}),
|
||||
}))
|
||||
vi.mock('@/data/storage/iceberg-namespace-create-mutation', () => ({
|
||||
useIcebergNamespaceCreateMutation: () => ({
|
||||
mutateAsync: mocks.createNamespace,
|
||||
isPending: false,
|
||||
}),
|
||||
}))
|
||||
vi.mock('@/data/replication/create-destination-pipeline-mutation', () => ({
|
||||
useCreateDestinationPipelineMutation: () => ({
|
||||
mutateAsync: mocks.createDestinationPipeline,
|
||||
isPending: false,
|
||||
}),
|
||||
}))
|
||||
vi.mock('@/data/replication/update-destination-pipeline-mutation', () => ({
|
||||
useUpdateDestinationPipelineMutation: () => ({
|
||||
mutateAsync: mocks.updateDestinationPipeline,
|
||||
isPending: false,
|
||||
}),
|
||||
}))
|
||||
vi.mock('@/data/replication/start-pipeline-mutation', () => ({
|
||||
useStartPipelineMutation: () => ({
|
||||
mutateAsync: mocks.startPipeline,
|
||||
isPending: false,
|
||||
}),
|
||||
}))
|
||||
vi.mock('@/state/replication-pipeline-request-status', () => ({
|
||||
PipelineStatusRequestStatus: {
|
||||
RestartRequested: 'restart-requested',
|
||||
StartRequested: 'start-requested',
|
||||
},
|
||||
usePipelineRequestStatus: () => ({ setRequestStatus: mocks.setRequestStatus }),
|
||||
}))
|
||||
|
||||
const formData = {
|
||||
const formData: DestinationPanelSchemaType = {
|
||||
name: 'Analytics',
|
||||
publicationName: 'analytics',
|
||||
tableSyncCopyMode: 'include_tables',
|
||||
tableSyncCopyTableIds: ['101'],
|
||||
maxFillMs: 500,
|
||||
maxTableSyncWorkers: 4,
|
||||
maxCopyConnectionsPerTable: 1,
|
||||
maxStalenessMins: 0,
|
||||
projectId: 'example-project',
|
||||
datasetId: 'analytics',
|
||||
serviceAccountKey: '',
|
||||
connectionPoolSize: 5,
|
||||
} as DestinationPanelSchemaType
|
||||
}
|
||||
|
||||
describe('useDestinationForm validation', () => {
|
||||
const renderDestinationForm = async () => {
|
||||
const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } })
|
||||
const view = customRenderHook(
|
||||
() => ({
|
||||
...useDestinationForm({ selectedType: 'BigQuery' }),
|
||||
requestStatus: usePipelineRequestStatus().getRequestStatus(8),
|
||||
}),
|
||||
{
|
||||
wrapper: ({ children }) => (
|
||||
<CustomWrapper queryClient={queryClient}>
|
||||
<PipelineRequestStatusProvider>{children}</PipelineRequestStatusProvider>
|
||||
</CustomWrapper>
|
||||
),
|
||||
}
|
||||
)
|
||||
await waitFor(() =>
|
||||
expect(queryClient.getQueryState(replicationKeys.sources('default'))?.status).toBe('success')
|
||||
)
|
||||
return view
|
||||
}
|
||||
|
||||
describe('useDestinationForm', () => {
|
||||
beforeEach(() => {
|
||||
mocks.validateDestination.mockResolvedValue({ validation_failures: [] })
|
||||
mocks.validatePipeline.mockResolvedValue({ validation_failures: [] })
|
||||
addAPIMock({
|
||||
method: 'get',
|
||||
path: '/platform/replication/:ref/pipelines/:pipeline_id/status',
|
||||
response: ({ params }) =>
|
||||
HttpResponse.json<components['schemas']['PipelineStatusResponse_Output']>({
|
||||
pipeline_id: Number(params.pipeline_id),
|
||||
status: { name: 'stopped' },
|
||||
}),
|
||||
})
|
||||
updateRequests.length = 0
|
||||
validationRequests.length = 0
|
||||
startRequests.mockClear()
|
||||
createRequests.mockClear()
|
||||
validationResponse = { validation_failures: [] }
|
||||
addAPIMock({
|
||||
method: 'get',
|
||||
path: '/platform/replication/:ref/sources',
|
||||
response: () =>
|
||||
HttpResponse.json<components['schemas']['SourcesResponse_Output']>({
|
||||
sources: [
|
||||
{
|
||||
id: 42,
|
||||
name: 'default',
|
||||
tenant_id: 'tenant',
|
||||
config: {
|
||||
host: 'localhost',
|
||||
port: 5432,
|
||||
name: 'postgres',
|
||||
username: 'postgres',
|
||||
},
|
||||
},
|
||||
],
|
||||
}),
|
||||
})
|
||||
addAPIMock({
|
||||
method: 'post',
|
||||
path: '/platform/replication/:ref/pipelines/validate',
|
||||
response: async ({ request }) => {
|
||||
validationRequests.push(await request.json())
|
||||
return HttpResponse.json<ValidationResponse>(validationResponse)
|
||||
},
|
||||
})
|
||||
addAPIMock({
|
||||
method: 'post',
|
||||
path: '/platform/replication/:ref/destinations/validate',
|
||||
response: () =>
|
||||
HttpResponse.json<components['schemas']['ValidateDestinationResponse_Output']>({
|
||||
validation_failures: [],
|
||||
}),
|
||||
})
|
||||
addAPIMock({
|
||||
method: 'post',
|
||||
path: '/platform/replication/:ref/destinations-pipelines/:destination_id/:pipeline_id',
|
||||
response: async ({ request }) => {
|
||||
updateRequests.push(await request.json())
|
||||
return HttpResponse.json<Record<string, never>>({})
|
||||
},
|
||||
})
|
||||
addAPIMock({
|
||||
method: 'post',
|
||||
path: '/platform/replication/:ref/pipelines/:pipeline_id/start',
|
||||
response: () => {
|
||||
startRequests()
|
||||
return HttpResponse.json<Record<string, never>>({})
|
||||
},
|
||||
})
|
||||
addAPIMock({
|
||||
method: 'post',
|
||||
path: '/platform/replication/:ref/destinations-pipelines',
|
||||
response: () => {
|
||||
createRequests()
|
||||
return HttpResponse.json<components['schemas']['CreateDestinationPipelineResponse_Output']>(
|
||||
{ pipeline_id: 8, destination_id: 7 }
|
||||
)
|
||||
},
|
||||
})
|
||||
})
|
||||
|
||||
it('validates both destination and pipeline while creating', async () => {
|
||||
const { result } = renderHook(() => useDestinationForm({ selectedType: 'BigQuery' }))
|
||||
|
||||
it('closes a committed creation even if its start request fails', async () => {
|
||||
addAPIMock({
|
||||
method: 'post',
|
||||
path: '/platform/replication/:ref/pipelines/:pipeline_id/start',
|
||||
response: () =>
|
||||
HttpResponse.json<APIErrorBody>({ message: 'Start unavailable' }, { status: 503 }),
|
||||
})
|
||||
const { result } = await renderDestinationForm()
|
||||
const onClose = vi.fn()
|
||||
await act(async () => {
|
||||
await result.current.validateConfiguration({
|
||||
await result.current.submitPipeline({
|
||||
data: { ...formData, serviceAccountKey: '{"type":"service_account"}' },
|
||||
onValidationFail: vi.fn(),
|
||||
onSuccess: vi.fn(),
|
||||
onClose,
|
||||
})
|
||||
})
|
||||
expect(createRequests).toHaveBeenCalledOnce()
|
||||
expect(onClose).toHaveBeenCalledOnce()
|
||||
expect(result.current.requestStatus).toBe(PipelineStatusRequestStatus.None)
|
||||
})
|
||||
|
||||
expect(mocks.validateDestination).toHaveBeenCalledOnce()
|
||||
expect(mocks.validatePipeline).toHaveBeenCalledWith(
|
||||
it('validates destination and pipeline configuration before creating', async () => {
|
||||
const { result } = await renderDestinationForm()
|
||||
await act(async () => {
|
||||
expect(
|
||||
await result.current.validateConfiguration({
|
||||
data: { ...formData, serviceAccountKey: '{"type":"service_account"}' },
|
||||
onValidationFail: vi.fn(),
|
||||
})
|
||||
).toEqual({ canContinue: true, warnings: [] })
|
||||
})
|
||||
expect(validationRequests).toEqual([
|
||||
expect.objectContaining({
|
||||
projectRef: 'project-ref',
|
||||
sourceId: 42,
|
||||
publicationName: 'analytics',
|
||||
tableSyncCopy: { type: 'include_tables', table_ids: [101] },
|
||||
})
|
||||
)
|
||||
source_id: 42,
|
||||
config: expect.objectContaining({
|
||||
publication_name: 'analytics',
|
||||
table_sync_copy: { type: 'include_tables', table_ids: [101] },
|
||||
}),
|
||||
}),
|
||||
])
|
||||
})
|
||||
|
||||
it('blocks creation when pipeline validation returns a critical failure', async () => {
|
||||
const failure = {
|
||||
failure_type: 'critical',
|
||||
name: 'Invalid table selection',
|
||||
reason: 'Refresh the publication selection.',
|
||||
validationResponse = {
|
||||
validation_failures: [
|
||||
{
|
||||
failure_type: 'critical',
|
||||
name: 'Invalid table selection',
|
||||
reason: 'Refresh the publication selection.',
|
||||
},
|
||||
],
|
||||
}
|
||||
mocks.validatePipeline.mockResolvedValue({ validation_failures: [failure] })
|
||||
const onValidationFail = vi.fn()
|
||||
const { result } = renderHook(() => useDestinationForm({ selectedType: 'BigQuery' }))
|
||||
|
||||
let validationResult: Awaited<ReturnType<typeof result.current.validateConfiguration>>
|
||||
const { result } = await renderDestinationForm()
|
||||
await act(async () => {
|
||||
validationResult = await result.current.validateConfiguration({
|
||||
data: { ...formData, serviceAccountKey: '{"type":"service_account"}' },
|
||||
onValidationFail,
|
||||
})
|
||||
expect(
|
||||
await result.current.validateConfiguration({
|
||||
data: { ...formData, serviceAccountKey: '{"type":"service_account"}' },
|
||||
onValidationFail,
|
||||
})
|
||||
).toEqual({ canContinue: false, warnings: [] })
|
||||
})
|
||||
|
||||
expect(validationResult!).toEqual({ canContinue: false, warnings: [] })
|
||||
expect(onValidationFail).toHaveBeenCalledOnce()
|
||||
})
|
||||
|
||||
it('preserves hidden batch fields and submits the selected table-copy policy on edit', async () => {
|
||||
const { result } = renderHook(() => useDestinationForm({ selectedType: 'BigQuery' }))
|
||||
|
||||
await act(async () => {
|
||||
await result.current.submitPipeline({
|
||||
data: formData,
|
||||
existingDestination: {
|
||||
destinationId: 7,
|
||||
pipelineId: 8,
|
||||
enabled: true,
|
||||
statusName: 'started',
|
||||
},
|
||||
existingBatch: {
|
||||
max_fill_ms: 200,
|
||||
max_bytes: 8_388_608,
|
||||
memory_budget_ratio: 0.2,
|
||||
},
|
||||
onSuccess: vi.fn(),
|
||||
onClose: vi.fn(),
|
||||
})
|
||||
})
|
||||
|
||||
expect(mocks.updateDestinationPipeline).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
destinationId: 7,
|
||||
pipelineId: 8,
|
||||
pipelineConfig: expect.objectContaining({
|
||||
tableSyncCopy: { type: 'include_tables', table_ids: [101] },
|
||||
batch: {
|
||||
maxFillMs: 500,
|
||||
maxBytes: 8_388_608,
|
||||
memoryBudgetRatio: 0.2,
|
||||
it.each([true, false])(
|
||||
'preserves edit settings without an extra start (enabled: %s)',
|
||||
async (enabled) => {
|
||||
const { result } = await renderDestinationForm()
|
||||
const onClose = vi.fn()
|
||||
await act(async () => {
|
||||
await result.current.submitPipeline({
|
||||
data: formData,
|
||||
existingDestination: {
|
||||
destinationId: 7,
|
||||
pipelineId: 8,
|
||||
enabled,
|
||||
statusName: enabled ? 'started' : 'stopped',
|
||||
},
|
||||
existingBatch: { max_fill_ms: 200, max_bytes: 8_388_608, memory_budget_ratio: 0.2 },
|
||||
onSuccess: vi.fn(),
|
||||
onClose,
|
||||
})
|
||||
})
|
||||
expect(updateRequests).toEqual([
|
||||
expect.objectContaining({
|
||||
pipeline_config: expect.objectContaining({
|
||||
table_sync_copy: { type: 'include_tables', table_ids: [101] },
|
||||
batch: { max_fill_ms: 500, max_bytes: 8_388_608, memory_budget_ratio: 0.2 },
|
||||
}),
|
||||
}),
|
||||
}),
|
||||
expect.any(Object)
|
||||
)
|
||||
expect(mocks.createDestinationPipeline).not.toHaveBeenCalled()
|
||||
expect(mocks.startPipeline).not.toHaveBeenCalled()
|
||||
})
|
||||
])
|
||||
expect(createRequests).not.toHaveBeenCalled()
|
||||
expect(startRequests).not.toHaveBeenCalled()
|
||||
expect(onClose).toHaveBeenCalledOnce()
|
||||
expect(result.current.requestStatus).toBe(PipelineStatusRequestStatus.None)
|
||||
}
|
||||
)
|
||||
|
||||
it('omits an unchanged batch when editing only the table-copy policy', async () => {
|
||||
const { result } = renderHook(() => useDestinationForm({ selectedType: 'BigQuery' }))
|
||||
|
||||
const { result } = await renderDestinationForm()
|
||||
await act(async () => {
|
||||
await result.current.submitPipeline({
|
||||
data: formData,
|
||||
@@ -185,20 +248,42 @@ describe('useDestinationForm validation', () => {
|
||||
enabled: true,
|
||||
statusName: 'started',
|
||||
},
|
||||
existingBatch: {
|
||||
max_fill_ms: formData.maxFillMs,
|
||||
max_bytes: 0,
|
||||
memory_budget_ratio: 2,
|
||||
},
|
||||
existingBatch: { max_fill_ms: formData.maxFillMs, max_bytes: 0, memory_budget_ratio: 2 },
|
||||
onSuccess: vi.fn(),
|
||||
onClose: vi.fn(),
|
||||
})
|
||||
})
|
||||
expect(updateRequests).toEqual([
|
||||
expect.objectContaining({
|
||||
pipeline_config: expect.not.objectContaining({ batch: expect.anything() }),
|
||||
}),
|
||||
])
|
||||
})
|
||||
|
||||
const updateParams = mocks.updateDestinationPipeline.mock.calls[0][0]
|
||||
expect(updateParams.pipelineConfig).toMatchObject({
|
||||
tableSyncCopy: { type: 'include_tables', table_ids: [101] },
|
||||
it('keeps the form open without requesting a restart when updating fails', async () => {
|
||||
addAPIMock({
|
||||
method: 'post',
|
||||
path: '/platform/replication/:ref/destinations-pipelines/:destination_id/:pipeline_id',
|
||||
response: () =>
|
||||
HttpResponse.json<APIErrorBody>({ message: 'Update failed' }, { status: 503 }),
|
||||
})
|
||||
expect(updateParams.pipelineConfig).not.toHaveProperty('batch')
|
||||
const { result } = await renderDestinationForm()
|
||||
const onClose = vi.fn()
|
||||
await act(async () => {
|
||||
await result.current.submitPipeline({
|
||||
data: formData,
|
||||
existingDestination: {
|
||||
destinationId: 7,
|
||||
pipelineId: 8,
|
||||
enabled: true,
|
||||
statusName: 'started',
|
||||
},
|
||||
onSuccess: vi.fn(),
|
||||
onClose,
|
||||
})
|
||||
})
|
||||
expect(onClose).not.toHaveBeenCalled()
|
||||
expect(startRequests).not.toHaveBeenCalled()
|
||||
expect(result.current.requestStatus).toBe(PipelineStatusRequestStatus.None)
|
||||
})
|
||||
})
|
||||
+42
-43
@@ -33,7 +33,7 @@ import { type ResponseError } from '@/types'
|
||||
|
||||
export const useDestinationForm = ({ selectedType }: { selectedType: DestinationType }) => {
|
||||
const { ref: projectRef } = useParams()
|
||||
const { setRequestStatus } = usePipelineRequestStatus()
|
||||
const { runWithRequestStatus } = usePipelineRequestStatus()
|
||||
|
||||
const [hasRunValidation, setHasRunValidation] = useState(false)
|
||||
const [destinationValidationFailures, setDestinationValidationFailures] = useState<
|
||||
@@ -68,7 +68,9 @@ export const useDestinationForm = ({ selectedType }: { selectedType: Destination
|
||||
onError: () => {},
|
||||
})
|
||||
|
||||
const { mutateAsync: startPipeline, isPending: startingPipeline } = useStartPipelineMutation()
|
||||
const { mutateAsync: startPipeline, isPending: startingPipeline } = useStartPipelineMutation({
|
||||
onError: () => {},
|
||||
})
|
||||
|
||||
const isValidating = isValidatingDestination || isValidatingPipeline
|
||||
|
||||
@@ -248,41 +250,35 @@ export const useDestinationForm = ({ selectedType }: { selectedType: Destination
|
||||
}
|
||||
|
||||
if (editMode && existingDestination) {
|
||||
if (!existingDestination.pipelineId) return console.error('Pipeline id is required')
|
||||
const pipelineId = existingDestination.pipelineId
|
||||
if (!pipelineId) return console.error('Pipeline id is required')
|
||||
|
||||
await updateDestinationPipeline(
|
||||
{
|
||||
destinationId: existingDestination.destinationId,
|
||||
pipelineId: existingDestination.pipelineId,
|
||||
projectRef,
|
||||
destinationName: data.name,
|
||||
destinationConfig,
|
||||
pipelineConfig,
|
||||
sourceId,
|
||||
},
|
||||
{ onSuccess }
|
||||
const update = () =>
|
||||
updateDestinationPipeline(
|
||||
{
|
||||
destinationId: existingDestination.destinationId,
|
||||
pipelineId,
|
||||
projectRef,
|
||||
destinationName: data.name,
|
||||
destinationConfig,
|
||||
pipelineConfig,
|
||||
sourceId,
|
||||
},
|
||||
{ onSuccess }
|
||||
)
|
||||
|
||||
await runWithRequestStatus(
|
||||
pipelineId,
|
||||
existingDestination.enabled
|
||||
? PipelineStatusRequestStatus.StopRequested
|
||||
: PipelineStatusRequestStatus.None,
|
||||
update
|
||||
)
|
||||
toast.success(
|
||||
existingDestination.enabled
|
||||
? 'Settings applied.'
|
||||
: 'Settings applied. The pipeline remains stopped.'
|
||||
)
|
||||
|
||||
// Set request status only right before starting, then fire and close
|
||||
const snapshot =
|
||||
existingDestination.statusName ?? (existingDestination.enabled ? 'started' : 'stopped')
|
||||
if (existingDestination.enabled) {
|
||||
// The pipeline restarts automatically on the backend when its config is updated
|
||||
setRequestStatus(
|
||||
existingDestination.pipelineId,
|
||||
PipelineStatusRequestStatus.RestartRequested,
|
||||
snapshot
|
||||
)
|
||||
toast.success('Settings applied. Restarting the pipeline...')
|
||||
} else {
|
||||
setRequestStatus(
|
||||
existingDestination.pipelineId,
|
||||
PipelineStatusRequestStatus.StartRequested,
|
||||
snapshot
|
||||
)
|
||||
toast.success('Settings applied. Starting the pipeline...')
|
||||
startPipeline({ projectRef, pipelineId: existingDestination.pipelineId })
|
||||
}
|
||||
onClose()
|
||||
} else {
|
||||
const { pipeline_id: pipelineId } = await createDestinationPipeline(
|
||||
@@ -295,18 +291,21 @@ export const useDestinationForm = ({ selectedType }: { selectedType: Destination
|
||||
},
|
||||
{ onSuccess }
|
||||
)
|
||||
// Set request status only right before starting, then fire and close
|
||||
setRequestStatus(pipelineId, PipelineStatusRequestStatus.StartRequested, undefined)
|
||||
toast.success('Pipeline created. Starting the pipeline...')
|
||||
startPipeline({ projectRef, pipelineId })
|
||||
// Creation has committed. Close the form even if starting fails, so retrying cannot
|
||||
// create a duplicate pipeline; the new row offers its own start action.
|
||||
onClose()
|
||||
await runWithRequestStatus(pipelineId, PipelineStatusRequestStatus.StartRequested, () =>
|
||||
startPipeline({ projectRef, pipelineId })
|
||||
)
|
||||
toast.success('Pipeline created. Starting…')
|
||||
}
|
||||
} catch (error) {
|
||||
const action = editMode
|
||||
? existingDestination?.enabled
|
||||
let action = 'create and start pipeline'
|
||||
if (editMode) {
|
||||
action = existingDestination?.enabled
|
||||
? 'apply changes and restart pipeline'
|
||||
: 'apply changes and start pipeline'
|
||||
: 'create and start pipeline'
|
||||
: 'apply changes'
|
||||
}
|
||||
toast.error(`Failed to ${action}: ${(error as ResponseError).message}`)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,11 +1,13 @@
|
||||
import { screen } from '@testing-library/react'
|
||||
import { QueryClient } from '@tanstack/react-query'
|
||||
import { act, fireEvent, screen, waitFor } from '@testing-library/react'
|
||||
import userEvent from '@testing-library/user-event'
|
||||
import { platformComponents as components } from 'api-types'
|
||||
import { mockAnimationsApi } from 'jsdom-testing-mocks'
|
||||
import { HttpResponse } from 'msw'
|
||||
import { describe, expect, test, vi } from 'vitest'
|
||||
|
||||
import { DestinationRow } from './DestinationRow'
|
||||
import { DestinationRow as DestinationRowComponent } from './DestinationRow'
|
||||
import { PipelineRequestStatusProvider } from '@/state/replication-pipeline-request-status'
|
||||
import { customRender } from '@/tests/lib/custom-render'
|
||||
import { addAPIMock, type APIErrorBody } from '@/tests/lib/msw'
|
||||
import { routerMock } from '@/tests/lib/route-mock'
|
||||
@@ -21,27 +23,11 @@ type ReplicationPipelineVersionResponse = components['schemas']['PipelineVersion
|
||||
// Tooltip/Popover descendants use Web Animations
|
||||
mockAnimationsApi()
|
||||
|
||||
// Prevent retries on mocked error responses — replication queries override the
|
||||
// QueryClient default with checkReplicationFeatureFlagRetry, which retries up to
|
||||
// 3 times. Without this mock error tests would time-out.
|
||||
vi.mock('@/data/replication/utils', () => ({
|
||||
checkReplicationFeatureFlagRetry: () => false,
|
||||
}))
|
||||
|
||||
// DestinationRow requires a PipelineRequestStatusContext provider.
|
||||
// Mock the module so tests don't need to wrap with the provider.
|
||||
vi.mock('@/state/replication-pipeline-request-status', () => ({
|
||||
PipelineStatusRequestStatus: {
|
||||
None: 'None',
|
||||
StartRequested: 'StartRequested',
|
||||
StopRequested: 'StopRequested',
|
||||
RestartRequested: 'RestartRequested',
|
||||
},
|
||||
usePipelineRequestStatus: () => ({
|
||||
getRequestStatus: () => 'None',
|
||||
updatePipelineStatus: () => {},
|
||||
}),
|
||||
}))
|
||||
const DestinationRow = (props: { destinationId: number }) => (
|
||||
<PipelineRequestStatusProvider>
|
||||
<DestinationRowComponent {...props} />
|
||||
</PipelineRequestStatusProvider>
|
||||
)
|
||||
|
||||
const DESTINATION_ID = 1
|
||||
const PIPELINE_ID = 42
|
||||
@@ -159,6 +145,134 @@ describe('DestinationRow', () => {
|
||||
addVersionMock()
|
||||
}
|
||||
|
||||
test('waits for asynchronous shutdown before deleting the pipeline', async () => {
|
||||
addAllMocks()
|
||||
routerMock.setCurrentUrl('/project/default/database/replication')
|
||||
let isStopping = false
|
||||
let completeShutdown: () => void = () => {}
|
||||
const shutdown = new Promise<void>((resolve) => {
|
||||
completeShutdown = resolve
|
||||
})
|
||||
const shutdownStatusRequested = vi.fn()
|
||||
const deleted = vi.fn()
|
||||
addAPIMock({
|
||||
method: 'post',
|
||||
path: '/platform/replication/:ref/pipelines/:pipeline_id/stop',
|
||||
response: () => {
|
||||
isStopping = true
|
||||
return HttpResponse.json<Record<string, never>>({}, { status: 202 })
|
||||
},
|
||||
})
|
||||
addAPIMock({
|
||||
method: 'get',
|
||||
path: '/platform/replication/:ref/pipelines/:pipeline_id/status',
|
||||
response: async () => {
|
||||
if (isStopping) {
|
||||
shutdownStatusRequested()
|
||||
await shutdown
|
||||
}
|
||||
return HttpResponse.json<ReplicationPipelineStatusResponse>({
|
||||
pipeline_id: PIPELINE_ID,
|
||||
status: { name: isStopping ? 'stopped' : 'started' },
|
||||
})
|
||||
},
|
||||
})
|
||||
addAPIMock({
|
||||
method: 'delete',
|
||||
path: '/platform/replication/:ref/destinations-pipelines/:destination_id/:pipeline_id',
|
||||
response: () => {
|
||||
deleted()
|
||||
return HttpResponse.json<components['schemas']['DeleteDestinationPipelineResponse_Output']>(
|
||||
{ destination_deleted: true, destination_id: DESTINATION_ID, pipeline_id: PIPELINE_ID }
|
||||
)
|
||||
},
|
||||
})
|
||||
customRender(<DestinationRow destinationId={DESTINATION_ID} />)
|
||||
await screen.findByText('supabase_realtime')
|
||||
await userEvent.click(screen.getByRole('button', { name: 'Pipeline options' }))
|
||||
await userEvent.click(screen.getByRole('menuitem', { name: 'Delete pipeline' }))
|
||||
await userEvent.type(
|
||||
screen.getByPlaceholderText('Type the pipeline name'),
|
||||
'My BigQuery Destination'
|
||||
)
|
||||
await waitFor(() =>
|
||||
expect(screen.getByRole('button', { name: 'Delete pipeline' })).toBeEnabled()
|
||||
)
|
||||
// jsdom does not reliably submit portalled forms through button activation.
|
||||
fireEvent.submit(screen.getByRole('dialog').querySelector('form')!)
|
||||
await waitFor(() => expect(shutdownStatusRequested).toHaveBeenCalledOnce())
|
||||
expect(deleted).not.toHaveBeenCalled()
|
||||
expect(screen.getByRole('button', { name: 'Deleting…' })).toBeDisabled()
|
||||
await act(async () => {
|
||||
completeShutdown()
|
||||
})
|
||||
await waitFor(() => expect(deleted).toHaveBeenCalledOnce())
|
||||
await waitFor(() =>
|
||||
expect(screen.queryByRole('button', { name: 'Deleting…' })).not.toBeInTheDocument()
|
||||
)
|
||||
})
|
||||
|
||||
test('keeps deletion retryable when shutdown status cannot be verified', async () => {
|
||||
addAllMocks()
|
||||
routerMock.setCurrentUrl('/project/default/database/replication')
|
||||
let isStopping = false
|
||||
const deleted = vi.fn()
|
||||
addAPIMock({
|
||||
method: 'post',
|
||||
path: '/platform/replication/:ref/pipelines/:pipeline_id/stop',
|
||||
response: () => {
|
||||
isStopping = true
|
||||
return HttpResponse.json<Record<string, never>>({}, { status: 202 })
|
||||
},
|
||||
})
|
||||
addAPIMock({
|
||||
method: 'get',
|
||||
path: '/platform/replication/:ref/pipelines/:pipeline_id/status',
|
||||
response: () => {
|
||||
if (isStopping)
|
||||
return HttpResponse.json<APIErrorBody>({ message: 'Status unavailable' }, { status: 503 })
|
||||
return HttpResponse.json<ReplicationPipelineStatusResponse>({
|
||||
pipeline_id: PIPELINE_ID,
|
||||
status: { name: 'started' },
|
||||
})
|
||||
},
|
||||
})
|
||||
addAPIMock({
|
||||
method: 'delete',
|
||||
path: '/platform/replication/:ref/destinations-pipelines/:destination_id/:pipeline_id',
|
||||
response: () => {
|
||||
deleted()
|
||||
return HttpResponse.json<components['schemas']['DeleteDestinationPipelineResponse_Output']>(
|
||||
{ destination_deleted: true, destination_id: DESTINATION_ID, pipeline_id: PIPELINE_ID }
|
||||
)
|
||||
},
|
||||
})
|
||||
const queryClient = new QueryClient()
|
||||
customRender(<DestinationRow destinationId={DESTINATION_ID} />, { queryClient })
|
||||
await screen.findByText('supabase_realtime')
|
||||
await userEvent.click(screen.getByRole('button', { name: 'Pipeline options' }))
|
||||
await userEvent.click(screen.getByRole('menuitem', { name: 'Delete pipeline' }))
|
||||
await userEvent.type(
|
||||
screen.getByPlaceholderText('Type the pipeline name'),
|
||||
'My BigQuery Destination'
|
||||
)
|
||||
await waitFor(() =>
|
||||
expect(screen.getByRole('button', { name: 'Delete pipeline' })).toBeEnabled()
|
||||
)
|
||||
// jsdom does not reliably submit portalled forms through button activation.
|
||||
fireEvent.submit(screen.getByRole('dialog').querySelector('form')!)
|
||||
await waitFor(() =>
|
||||
expect(
|
||||
queryClient
|
||||
.getMutationCache()
|
||||
.getAll()
|
||||
.some((mutation) => mutation.state.status === 'error')
|
||||
).toBe(true)
|
||||
)
|
||||
expect(deleted).not.toHaveBeenCalled()
|
||||
expect(screen.getByRole('button', { name: 'Delete pipeline' })).toBeEnabled()
|
||||
})
|
||||
|
||||
test('navigates to the pipeline when the row is clicked', async () => {
|
||||
addAllMocks()
|
||||
routerMock.setCurrentUrl('/project/default/database/replication')
|
||||
@@ -442,7 +556,9 @@ describe('DestinationRow', () => {
|
||||
HttpResponse.json<APIErrorBody>({ message: 'Internal server error' }, { status: 500 }),
|
||||
})
|
||||
|
||||
customRender(<DestinationRow destinationId={DESTINATION_ID} />)
|
||||
customRender(<DestinationRow destinationId={DESTINATION_ID} />, {
|
||||
queryClient: new QueryClient({ defaultOptions: { queries: { retryDelay: 0 } } }),
|
||||
})
|
||||
|
||||
expect(await screen.findByText('Failed to retrieve pipeline information')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { useParams } from 'common'
|
||||
import { ChevronRight, Minus } from 'lucide-react'
|
||||
import { useRouter } from 'next/router'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useState } from 'react'
|
||||
import { toast } from 'sonner'
|
||||
import { TableCell, TableRow } from 'ui'
|
||||
import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
|
||||
@@ -10,7 +10,7 @@ import { DeleteDestination } from './DeleteDestination'
|
||||
import { DestinationLogo } from './DestinationLogo'
|
||||
import { DetailSubtext } from './DetailSubtext'
|
||||
import { PipelineStatePill } from './PipelineStatePill'
|
||||
import { PipelineStatusName, STATUS_REFRESH_FREQUENCY_MS } from './Replication.constants'
|
||||
import { PipelineStatusName } from './Replication.constants'
|
||||
import {
|
||||
getFormattedLagValue,
|
||||
getInitialSyncProgress,
|
||||
@@ -59,30 +59,26 @@ export const DestinationRow = ({ destinationId }: DestinationRowProps) => {
|
||||
isPending: isPipelineStatusLoading,
|
||||
isError: isPipelineStatusError,
|
||||
isSuccess: isPipelineStatusSuccess,
|
||||
} = useReplicationPipelineStatusQuery(
|
||||
{
|
||||
projectRef,
|
||||
pipelineId: pipeline?.id,
|
||||
},
|
||||
{ refetchInterval: STATUS_REFRESH_FREQUENCY_MS }
|
||||
)
|
||||
const { getRequestStatus, updatePipelineStatus } = usePipelineRequestStatus()
|
||||
} = useReplicationPipelineStatusQuery({
|
||||
projectRef,
|
||||
pipelineId: pipeline?.id,
|
||||
})
|
||||
const { getRequestStatus } = usePipelineRequestStatus()
|
||||
const requestStatus = pipeline?.id
|
||||
? getRequestStatus(pipeline.id)
|
||||
: PipelineStatusRequestStatus.None
|
||||
|
||||
const { mutateAsync: stopPipeline } = useStopPipelineMutation()
|
||||
const { mutateAsync: deleteDestinationPipeline } = useDeleteDestinationPipelineMutation({})
|
||||
const { mutateAsync: stopPipeline } = useStopPipelineMutation({ onError: () => {} })
|
||||
const { mutateAsync: deleteDestinationPipeline } = useDeleteDestinationPipelineMutation({
|
||||
onError: () => {},
|
||||
})
|
||||
|
||||
// Fetch table-level replication status to surface errors in list view
|
||||
const {
|
||||
data: replicationStatusData,
|
||||
isPending: isReplicationStatusLoading,
|
||||
isError: isReplicationStatusError,
|
||||
} = useReplicationPipelineReplicationStatusQuery(
|
||||
{ projectRef, pipelineId: pipeline?.id },
|
||||
{ refetchInterval: STATUS_REFRESH_FREQUENCY_MS }
|
||||
)
|
||||
} = useReplicationPipelineReplicationStatusQuery({ projectRef, pipelineId: pipeline?.id }, {})
|
||||
const tableStatuses = replicationStatusData?.table_statuses ?? []
|
||||
const errorCount = tableStatuses.filter((t) => t.state?.name === 'error').length
|
||||
const applyLag = replicationStatusData?.apply_lag
|
||||
@@ -96,10 +92,10 @@ export const DestinationRow = ({ destinationId }: DestinationRowProps) => {
|
||||
const { syncingCount } = getInitialSyncProgress(tableStatuses)
|
||||
const isInitialSyncRunning = syncingCount > 0
|
||||
const isCaughtUp = lagBytes === 0
|
||||
// Only show errors when pipeline is running (not when stopped or restarting)
|
||||
// Hide old table errors while an optimistic lifecycle action is displayed.
|
||||
const isPipelineStopped = statusName === PipelineStatusName.STOPPED
|
||||
const isRestarting = requestStatus === PipelineStatusRequestStatus.RestartRequested
|
||||
const hasTableErrors = errorCount > 0 && !isPipelineStopped && !isRestarting
|
||||
const isTransitioning = requestStatus !== PipelineStatusRequestStatus.None
|
||||
const hasTableErrors = errorCount > 0 && !isPipelineStopped && !isTransitioning
|
||||
|
||||
// Check if a newer pipeline version is available (one-time check cached for session)
|
||||
const { data: versionData } = useReplicationPipelineVersionQuery({
|
||||
@@ -122,7 +118,7 @@ export const DestinationRow = ({ destinationId }: DestinationRowProps) => {
|
||||
|
||||
try {
|
||||
setIsDeleting(true)
|
||||
await stopPipeline({ projectRef, pipelineId: pipeline.id })
|
||||
await stopPipeline({ projectRef, pipelineId: pipeline.id, waitUntilStopped: true })
|
||||
await deleteDestinationPipeline({
|
||||
projectRef,
|
||||
destinationId: destinationId,
|
||||
@@ -138,12 +134,6 @@ export const DestinationRow = ({ destinationId }: DestinationRowProps) => {
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (pipeline?.id) {
|
||||
updatePipelineStatus(pipeline.id, statusName)
|
||||
}
|
||||
}, [pipeline?.id, statusName, updatePipelineStatus])
|
||||
|
||||
// Five distinct states, so early returns rather than a ternary chain. The row only renders once
|
||||
// a pipeline exists, so there is no "no pipeline" case to handle here.
|
||||
const renderLag = () => {
|
||||
@@ -285,11 +275,6 @@ export const DestinationRow = ({ destinationId }: DestinationRowProps) => {
|
||||
visible={showUpdateVersionModal}
|
||||
pipeline={pipeline}
|
||||
onClose={() => setShowUpdateVersionModal(false)}
|
||||
confirmLabel={
|
||||
statusName === PipelineStatusName.STARTED || statusName === PipelineStatusName.FAILED
|
||||
? 'Update and restart'
|
||||
: 'Update version'
|
||||
}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
|
||||
@@ -0,0 +1,29 @@
|
||||
import { describe, expect, test } from 'vitest'
|
||||
|
||||
import { getPipelineDisplayState, getRestartRequestStatus } from './Pipeline.utils'
|
||||
import { PipelineStatusName } from './Replication.constants'
|
||||
import { PipelineStatusRequestStatus } from '@/state/replication-pipeline-request-status'
|
||||
|
||||
describe('restart feedback', () => {
|
||||
test.each([PipelineStatusName.STARTED, PipelineStatusName.FAILED])(
|
||||
'shows Stopping when an active pipeline (%s) restarts',
|
||||
(status) => {
|
||||
expect(getPipelineDisplayState(getRestartRequestStatus(status), status).label).toBe(
|
||||
'Stopping'
|
||||
)
|
||||
}
|
||||
)
|
||||
|
||||
test.each([
|
||||
PipelineStatusName.STOPPED,
|
||||
PipelineStatusName.STARTING,
|
||||
PipelineStatusName.STOPPING,
|
||||
PipelineStatusName.UNKNOWN,
|
||||
undefined,
|
||||
])('keeps the backend state for %s', (status) => {
|
||||
expect(getRestartRequestStatus(status)).toBe(PipelineStatusRequestStatus.None)
|
||||
expect(getPipelineDisplayState(getRestartRequestStatus(status), status)).toEqual(
|
||||
getPipelineDisplayState(undefined, status)
|
||||
)
|
||||
})
|
||||
})
|
||||
@@ -15,21 +15,9 @@ export const normalizePipelineStatusName = (statusName?: string): PipelineStatus
|
||||
? (statusName as PipelineStatusName)
|
||||
: undefined
|
||||
|
||||
export const PIPELINE_ENABLE_ALLOWED_FROM: PipelineStatusName[] = [PipelineStatusName.STOPPED]
|
||||
export const PIPELINE_DISABLE_ALLOWED_FROM: PipelineStatusName[] = [
|
||||
PipelineStatusName.STARTED,
|
||||
PipelineStatusName.FAILED,
|
||||
]
|
||||
export const PIPELINE_ACTIONABLE_STATES: PipelineStatusName[] = [
|
||||
PipelineStatusName.FAILED,
|
||||
PipelineStatusName.STARTED,
|
||||
PipelineStatusName.STOPPED,
|
||||
]
|
||||
|
||||
export type PipelineDisplayStateKey =
|
||||
| 'starting'
|
||||
| 'stopping'
|
||||
| 'restarting'
|
||||
| 'failed'
|
||||
| 'stopped'
|
||||
| 'running'
|
||||
@@ -63,14 +51,6 @@ const PIPELINE_DISPLAY_STATES: Record<PipelineDisplayStateKey, PipelineDisplaySt
|
||||
badge: 'Stopping',
|
||||
type: 'loading',
|
||||
},
|
||||
restarting: {
|
||||
key: 'restarting',
|
||||
label: 'Restarting',
|
||||
title: 'Restarting pipeline',
|
||||
message: 'Applying settings and restarting the pipeline',
|
||||
badge: 'Restarting',
|
||||
type: 'loading',
|
||||
},
|
||||
failed: {
|
||||
key: 'failed',
|
||||
label: 'Failed',
|
||||
@@ -109,9 +89,6 @@ export const getPipelineDisplayState = (
|
||||
requestStatus?: PipelineStatusRequestStatus,
|
||||
statusName?: PipelineStatusName
|
||||
): PipelineDisplayState => {
|
||||
if (requestStatus === PipelineStatusRequestStatus.RestartRequested) {
|
||||
return PIPELINE_DISPLAY_STATES.restarting
|
||||
}
|
||||
if (requestStatus === PipelineStatusRequestStatus.StartRequested) {
|
||||
return PIPELINE_DISPLAY_STATES.starting
|
||||
}
|
||||
@@ -135,3 +112,11 @@ export const getPipelineDisplayState = (
|
||||
return PIPELINE_DISPLAY_STATES.unknown
|
||||
}
|
||||
}
|
||||
|
||||
/** Resetting tables or applying settings must not imply starting an inactive pipeline. */
|
||||
export const getRestartRequestStatus = (statusName?: PipelineStatusName) => {
|
||||
if (statusName === PipelineStatusName.STARTED || statusName === PipelineStatusName.FAILED) {
|
||||
return PipelineStatusRequestStatus.StopRequested
|
||||
}
|
||||
return PipelineStatusRequestStatus.None
|
||||
}
|
||||
@@ -23,7 +23,7 @@ interface PipelineStatePillProps {
|
||||
isLoading: boolean
|
||||
isError: boolean
|
||||
isSuccess: boolean
|
||||
requestStatus?: PipelineStatusRequestStatus
|
||||
requestStatus: PipelineStatusRequestStatus
|
||||
projectRef?: string
|
||||
pipelineId?: number
|
||||
}
|
||||
@@ -42,41 +42,50 @@ export const PipelineStatePill = ({
|
||||
}: PipelineStatePillProps) => {
|
||||
const statusName = getStatusName(pipelineStatus)
|
||||
const { type, message, label } = getPipelineDisplayState(requestStatus, statusName)
|
||||
const isRequestPending = requestStatus !== PipelineStatusRequestStatus.None
|
||||
const shouldShowError = isError && !isRequestPending
|
||||
|
||||
const showLogsHint =
|
||||
const shouldShowLogsHint =
|
||||
isSuccess &&
|
||||
!isRequestPending &&
|
||||
[PipelineStatusName.UNKNOWN, PipelineStatusName.FAILED].includes(
|
||||
statusName as PipelineStatusName
|
||||
)
|
||||
|
||||
if (isLoading && !isRequestPending) {
|
||||
return (
|
||||
<span className="inline-flex" aria-live="polite" aria-atomic="true">
|
||||
<span className="sr-only">Loading pipeline status</span>
|
||||
<ShimmeringLoader className="w-20" />
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
let tooltipMessage = message
|
||||
if (shouldShowError) {
|
||||
tooltipMessage = `Unable to retrieve status: ${error?.message}`
|
||||
} else if (shouldShowLogsHint) {
|
||||
tooltipMessage = `${message}. Check the logs for more information.`
|
||||
}
|
||||
|
||||
return (
|
||||
<span className="inline-flex" aria-live="polite" aria-atomic="true">
|
||||
{isLoading ? (
|
||||
<>
|
||||
<span className="sr-only">Loading pipeline status</span>
|
||||
<ShimmeringLoader className="w-20" />
|
||||
</>
|
||||
) : (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<StateDot
|
||||
tabIndex={0}
|
||||
variant={isError ? 'default' : VARIANT_BY_TYPE[type]}
|
||||
isPulsing={!isError && type === 'loading'}
|
||||
labelClassName={cn('text-foreground-light', TOOLTIP_UNDERLINE_CLASS_NAME)}
|
||||
>
|
||||
{isError ? 'Unknown' : label}
|
||||
</StateDot>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="bottom" className="max-w-xs">
|
||||
{isError
|
||||
? `Unable to retrieve status: ${error?.message}`
|
||||
: showLogsHint
|
||||
? `${message}. Check the logs for more information.`
|
||||
: message}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
)}
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<StateDot
|
||||
tabIndex={0}
|
||||
variant={shouldShowError ? 'default' : VARIANT_BY_TYPE[type]}
|
||||
isPulsing={!shouldShowError && type === 'loading'}
|
||||
labelClassName={cn('text-foreground-light', TOOLTIP_UNDERLINE_CLASS_NAME)}
|
||||
>
|
||||
{shouldShowError ? 'Unknown' : label}
|
||||
</StateDot>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="bottom" className="max-w-xs">
|
||||
{tooltipMessage}
|
||||
{isError && isRequestPending && ` Unable to refresh status: ${error?.message}.`}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</span>
|
||||
)
|
||||
}
|
||||
@@ -1,5 +1,3 @@
|
||||
export const STATUS_REFRESH_FREQUENCY_MS: number = 10000 // 10 seconds
|
||||
|
||||
export enum PipelineStatusName {
|
||||
FAILED = 'failed',
|
||||
STARTING = 'starting',
|
||||
|
||||
@@ -3,7 +3,6 @@ import { useParams, useReducedMotion } from 'common'
|
||||
import { useMemo } from 'react'
|
||||
|
||||
import { getStatusName } from '../Pipeline.utils'
|
||||
import { STATUS_REFRESH_FREQUENCY_MS } from '../Replication.constants'
|
||||
import {
|
||||
EdgeVisualChip,
|
||||
getEdgeVisual,
|
||||
@@ -43,7 +42,7 @@ export const SmoothstepEdge = ({
|
||||
)
|
||||
const { data: pipelineStatusData } = useReplicationPipelineStatusQuery(
|
||||
{ projectRef, pipelineId: pipeline?.id },
|
||||
{ enabled: !!pipeline?.id, refetchInterval: STATUS_REFRESH_FREQUENCY_MS }
|
||||
{ enabled: !!pipeline?.id }
|
||||
)
|
||||
const { getRequestStatus } = usePipelineRequestStatus()
|
||||
const requestStatus = pipeline?.id
|
||||
|
||||
@@ -6,7 +6,6 @@ import { cn, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
|
||||
|
||||
import { DestinationLogo } from '../DestinationLogo'
|
||||
import { getStatusName } from '../Pipeline.utils'
|
||||
import { STATUS_REFRESH_FREQUENCY_MS } from '../Replication.constants'
|
||||
import { getReplicationDestinationType } from './Nodes.utils'
|
||||
import { RegionFlag } from '@/components/ui/RegionFlag'
|
||||
import { useReplicationDestinationsQuery } from '@/data/replication/destinations-query'
|
||||
@@ -66,10 +65,10 @@ export const ReplicationNode = ({ id }: { id: string }) => {
|
||||
projectRef,
|
||||
})
|
||||
const pipeline = (pipelinesData?.pipelines ?? []).find((x) => x.destination_id.toString() === id)
|
||||
const { data: pipelineStatusData } = useReplicationPipelineStatusQuery(
|
||||
{ projectRef, pipelineId: pipeline?.id },
|
||||
{ refetchInterval: STATUS_REFRESH_FREQUENCY_MS }
|
||||
)
|
||||
const { data: pipelineStatusData } = useReplicationPipelineStatusQuery({
|
||||
projectRef,
|
||||
pipelineId: pipeline?.id,
|
||||
})
|
||||
const statusName = getStatusName(pipelineStatusData?.status)
|
||||
|
||||
const type = getReplicationDestinationType(destination?.config)
|
||||
|
||||
+29
-4
@@ -1,15 +1,18 @@
|
||||
import { useQueryClient } from '@tanstack/react-query'
|
||||
import { screen, waitFor } from '@testing-library/react'
|
||||
import userEvent from '@testing-library/user-event'
|
||||
import type { components } from 'api-types'
|
||||
import { mockAnimationsApi } from 'jsdom-testing-mocks'
|
||||
import { HttpResponse } from 'msw'
|
||||
import { ReactNode, type AnchorHTMLAttributes } from 'react'
|
||||
import { ReactNode, useRef, type AnchorHTMLAttributes } from 'react'
|
||||
import { beforeEach, describe, expect, test, vi } from 'vitest'
|
||||
|
||||
import { ReplicationPipelineLayout } from './ReplicationPipelineLayout'
|
||||
import { ReplicationPipelineStatus } from './ReplicationPipelineStatus/ReplicationPipelineStatus'
|
||||
import { replicationKeys } from '@/data/replication/keys'
|
||||
import {
|
||||
PipelineRequestStatusProvider,
|
||||
PipelineStatusRequestStatus,
|
||||
usePipelineRequestStatus,
|
||||
} from '@/state/replication-pipeline-request-status'
|
||||
import { customRender } from '@/tests/lib/custom-render'
|
||||
@@ -47,14 +50,36 @@ const renderLayout = (children?: ReactNode) =>
|
||||
)
|
||||
|
||||
const TableResetFixture = () => {
|
||||
const { setTableResetting } = usePipelineRequestStatus()
|
||||
const queryClient = useQueryClient()
|
||||
const { runWithRequestStatus } = usePipelineRequestStatus()
|
||||
const finishReset = useRef<() => void>(() => {})
|
||||
|
||||
return (
|
||||
<>
|
||||
<button tabIndex={0} onClick={() => setTableResetting(42, true)}>
|
||||
<button
|
||||
tabIndex={0}
|
||||
onClick={() =>
|
||||
void runWithRequestStatus(
|
||||
42,
|
||||
PipelineStatusRequestStatus.StopRequested,
|
||||
() =>
|
||||
new Promise<void>((resolve) => {
|
||||
finishReset.current = resolve
|
||||
})
|
||||
)
|
||||
}
|
||||
>
|
||||
Begin table reset
|
||||
</button>
|
||||
<button tabIndex={0} onClick={() => setTableResetting(42, false)}>
|
||||
<button
|
||||
tabIndex={0}
|
||||
onClick={async () => {
|
||||
finishReset.current()
|
||||
await queryClient.invalidateQueries({
|
||||
queryKey: replicationKeys.pipelinesStatus('default', 42),
|
||||
})
|
||||
}}
|
||||
>
|
||||
Finish table reset
|
||||
</button>
|
||||
</>
|
||||
|
||||
+21
-36
@@ -12,7 +12,7 @@ import {
|
||||
import Link from 'next/link'
|
||||
import { useRouter } from 'next/router'
|
||||
import { parseAsInteger, useQueryState } from 'nuqs'
|
||||
import { PropsWithChildren, useEffect, useState, type ReactNode } from 'react'
|
||||
import { PropsWithChildren, useState, type ReactNode } from 'react'
|
||||
import { toast } from 'sonner'
|
||||
import {
|
||||
BreadcrumbItem,
|
||||
@@ -42,13 +42,9 @@ import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
|
||||
import { DeleteDestination } from './DeleteDestination'
|
||||
import { DestinationLogo } from './DestinationLogo'
|
||||
import { DestinationPanel } from './DestinationPanel/DestinationPanel'
|
||||
import {
|
||||
getPipelineDisplayState,
|
||||
getStatusName,
|
||||
PIPELINE_ACTIONABLE_STATES,
|
||||
} from './Pipeline.utils'
|
||||
import { getPipelineDisplayState, getRestartRequestStatus, getStatusName } from './Pipeline.utils'
|
||||
import { PipelineStatePill } from './PipelineStatePill'
|
||||
import { PipelineStatusName, STATUS_REFRESH_FREQUENCY_MS } from './Replication.constants'
|
||||
import { PipelineStatusName } from './Replication.constants'
|
||||
import { getReplicationDestinationType } from './ReplicationDiagram/Nodes.utils'
|
||||
import { UpdateVersionModal } from './UpdateVersionModal'
|
||||
import { DocsButton } from '@/components/ui/DocsButton'
|
||||
@@ -88,10 +84,9 @@ export const ReplicationPipelineLayout = ({ children }: PropsWithChildren) => {
|
||||
'edit',
|
||||
parseAsInteger.withOptions({ history: 'push', clearOnDefault: true })
|
||||
)
|
||||
const { getRequestStatus, getIsTableResetting, setRequestStatus, updatePipelineStatus } =
|
||||
usePipelineRequestStatus()
|
||||
const { getRequestStatus, isRequestPending, runWithRequestStatus } = usePipelineRequestStatus()
|
||||
const requestStatus = getRequestStatus(pipelineId)
|
||||
const isTableResetting = getIsTableResetting(pipelineId)
|
||||
const isPipelineRequestPending = isRequestPending(pipelineId)
|
||||
|
||||
const {
|
||||
data: pipeline,
|
||||
@@ -107,10 +102,7 @@ export const ReplicationPipelineLayout = ({ children }: PropsWithChildren) => {
|
||||
isLoading: isPipelineStatusLoading,
|
||||
isError: isPipelineStatusError,
|
||||
isSuccess: isPipelineStatusSuccess,
|
||||
} = useReplicationPipelineStatusQuery(
|
||||
{ projectRef, pipelineId },
|
||||
{ enabled: !!pipelineId, refetchInterval: STATUS_REFRESH_FREQUENCY_MS }
|
||||
)
|
||||
} = useReplicationPipelineStatusQuery({ projectRef, pipelineId }, { enabled: !!pipelineId })
|
||||
const { data: versionData } = useReplicationPipelineVersionQuery({
|
||||
projectRef,
|
||||
pipelineId: pipeline?.id,
|
||||
@@ -143,12 +135,12 @@ export const ReplicationPipelineLayout = ({ children }: PropsWithChildren) => {
|
||||
isPipelineLoading || (pipeline !== undefined && isDestinationLoading)
|
||||
const hasUpdate = Boolean(versionData?.new_version)
|
||||
const isTransitioning = requestStatus !== PipelineStatusRequestStatus.None
|
||||
const isActionable = PIPELINE_ACTIONABLE_STATES.includes(statusName as PipelineStatusName)
|
||||
|
||||
// What the primary button offers for each state it can act on. Anything not listed here (a
|
||||
// pipeline mid-transition, or one in an unknown state) has no action, so the button falls back
|
||||
// to the display state's own label and renders no icon.
|
||||
const lifecycle = LIFECYCLE_BY_STATUS[statusName as PipelineStatusName]
|
||||
const isActionable = lifecycle !== undefined
|
||||
const primaryAction: LifecycleAction | undefined = lifecycle?.action
|
||||
const lifecycleLabel = isTransitioning
|
||||
? displayState.label
|
||||
@@ -163,8 +155,8 @@ export const ReplicationPipelineLayout = ({ children }: PropsWithChildren) => {
|
||||
statusName === PipelineStatusName.STARTED || statusName === PipelineStatusName.FAILED
|
||||
const canUseMenuActions =
|
||||
isRunningOrFailed && !isTransitioning && !isPipelineStatusError && !!pipeline
|
||||
const canRestart = canUseMenuActions && !isTableResetting && primaryAction !== 'restart'
|
||||
const canStop = canUseMenuActions && !isTableResetting && primaryAction !== 'stop'
|
||||
const canRestart = canUseMenuActions && !isPipelineRequestPending && primaryAction !== 'restart'
|
||||
const canStop = canUseMenuActions && !isPipelineRequestPending && primaryAction !== 'stop'
|
||||
|
||||
const onLifecycleAction = async (action?: LifecycleAction) => {
|
||||
const resolvedAction = action ?? primaryAction
|
||||
@@ -172,17 +164,19 @@ export const ReplicationPipelineLayout = ({ children }: PropsWithChildren) => {
|
||||
|
||||
try {
|
||||
if (resolvedAction === 'start') {
|
||||
setRequestStatus(pipeline.id, PipelineStatusRequestStatus.StartRequested, statusName)
|
||||
await startPipeline({ projectRef, pipelineId: pipeline.id })
|
||||
await runWithRequestStatus(pipeline.id, PipelineStatusRequestStatus.StartRequested, () =>
|
||||
startPipeline({ projectRef, pipelineId: pipeline.id })
|
||||
)
|
||||
} else if (resolvedAction === 'stop') {
|
||||
setRequestStatus(pipeline.id, PipelineStatusRequestStatus.StopRequested, statusName)
|
||||
await stopPipeline({ projectRef, pipelineId: pipeline.id })
|
||||
await runWithRequestStatus(pipeline.id, PipelineStatusRequestStatus.StopRequested, () =>
|
||||
stopPipeline({ projectRef, pipelineId: pipeline.id })
|
||||
)
|
||||
} else {
|
||||
setRequestStatus(pipeline.id, PipelineStatusRequestStatus.RestartRequested, statusName)
|
||||
await restartPipeline({ projectRef, pipelineId: pipeline.id })
|
||||
await runWithRequestStatus(pipeline.id, getRestartRequestStatus(statusName), () =>
|
||||
restartPipeline({ projectRef, pipelineId: pipeline.id })
|
||||
)
|
||||
}
|
||||
} catch (error) {
|
||||
setRequestStatus(pipeline.id, PipelineStatusRequestStatus.None)
|
||||
toast.error(`Failed to ${resolvedAction} pipeline: ${(error as ResponseError).message}`)
|
||||
}
|
||||
}
|
||||
@@ -210,10 +204,6 @@ export const ReplicationPipelineLayout = ({ children }: PropsWithChildren) => {
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
updatePipelineStatus(pipelineId, statusName)
|
||||
}, [pipelineId, statusName, updatePipelineStatus])
|
||||
|
||||
const logsUrl = `/project/${projectRef}/logs/replication-logs?f=${encodeURIComponent(
|
||||
JSON.stringify({ pipeline_id: pipelineId })
|
||||
)}`
|
||||
@@ -312,7 +302,7 @@ export const ReplicationPipelineLayout = ({ children }: PropsWithChildren) => {
|
||||
variant="primary"
|
||||
icon={<ArrowUpCircle />}
|
||||
onClick={() => setShowUpdateVersionModal(true)}
|
||||
disabled={isTableResetting}
|
||||
disabled={isPipelineRequestPending || isTransitioning}
|
||||
>
|
||||
Update available
|
||||
</Button>
|
||||
@@ -335,7 +325,7 @@ export const ReplicationPipelineLayout = ({ children }: PropsWithChildren) => {
|
||||
isPipelineStatusError ||
|
||||
!pipeline ||
|
||||
isTransitioning ||
|
||||
isTableResetting ||
|
||||
isPipelineRequestPending ||
|
||||
!isActionable
|
||||
}
|
||||
>
|
||||
@@ -348,7 +338,7 @@ export const ReplicationPipelineLayout = ({ children }: PropsWithChildren) => {
|
||||
className="px-1.25 hit-area-2"
|
||||
aria-label="Pipeline options"
|
||||
icon={<MoreVertical />}
|
||||
disabled={isTableResetting}
|
||||
disabled={isPipelineRequestPending || isTransitioning}
|
||||
/>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent side="bottom" align="end" className="w-52">
|
||||
@@ -413,11 +403,6 @@ export const ReplicationPipelineLayout = ({ children }: PropsWithChildren) => {
|
||||
visible={showUpdateVersionModal}
|
||||
pipeline={pipeline}
|
||||
onClose={() => setShowUpdateVersionModal(false)}
|
||||
confirmLabel={
|
||||
statusName === PipelineStatusName.STARTED || statusName === PipelineStatusName.FAILED
|
||||
? 'Update and restart'
|
||||
: 'Update version'
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
|
||||
+28
-45
@@ -34,7 +34,7 @@ import { GenericTableLoader, ShimmeringLoader } from 'ui-patterns/ShimmeringLoad
|
||||
import { BatchRestartDialog } from '../BatchRestartDialog'
|
||||
import { ErrorDetailsDialog } from '../ErrorDetailsDialog'
|
||||
import { getStatusName } from '../Pipeline.utils'
|
||||
import { PipelineStatusName, STATUS_REFRESH_FREQUENCY_MS } from '../Replication.constants'
|
||||
import { PipelineStatusName } from '../Replication.constants'
|
||||
import { RestartTableDialog } from '../RestartTableDialog'
|
||||
import { PipelineHealthSection } from './PipelineHealthSection'
|
||||
import { getPipelineStateNotice, getTableStatusEmptyState } from './PipelineOverview.utils'
|
||||
@@ -129,10 +129,9 @@ export const ReplicationPipelineStatus = () => {
|
||||
} | null>(null)
|
||||
const [showBatchRestartDialog, setShowBatchRestartDialog] = useState(false)
|
||||
const [batchRestartMode, setBatchRestartMode] = useState<'all' | 'errored' | null>(null)
|
||||
const [restartingTableIds, setRestartingTableIds] = useState<Set<number>>(new Set())
|
||||
|
||||
const [resettingTableIds, setResettingTableIds] = useState<Set<number>>(new Set())
|
||||
const pipelineId = Number(_pipelineId)
|
||||
const { getRequestStatus, setTableResetting } = usePipelineRequestStatus()
|
||||
const { getRequestStatus, isRequestPending } = usePipelineRequestStatus()
|
||||
const requestStatus = getRequestStatus(pipelineId)
|
||||
|
||||
const {
|
||||
@@ -146,13 +145,7 @@ export const ReplicationPipelineStatus = () => {
|
||||
})
|
||||
|
||||
const { data: pipelineStatusData, isPending: isPipelineStatusLoading } =
|
||||
useReplicationPipelineStatusQuery(
|
||||
{ projectRef, pipelineId },
|
||||
{
|
||||
enabled: !!pipelineId,
|
||||
refetchInterval: STATUS_REFRESH_FREQUENCY_MS,
|
||||
}
|
||||
)
|
||||
useReplicationPipelineStatusQuery({ projectRef, pipelineId }, { enabled: !!pipelineId })
|
||||
|
||||
const {
|
||||
data: replicationStatusData,
|
||||
@@ -160,10 +153,7 @@ export const ReplicationPipelineStatus = () => {
|
||||
isError: isStatusError,
|
||||
} = useReplicationPipelineReplicationStatusQuery(
|
||||
{ projectRef, pipelineId },
|
||||
{
|
||||
enabled: !!pipelineId,
|
||||
refetchInterval: STATUS_REFRESH_FREQUENCY_MS,
|
||||
}
|
||||
{ enabled: !!pipelineId }
|
||||
)
|
||||
|
||||
const statusName = getStatusName(pipelineStatusData?.status)
|
||||
@@ -214,7 +204,6 @@ export const ReplicationPipelineStatus = () => {
|
||||
)
|
||||
|
||||
const hasErroredTables = erroredTables.length > 0
|
||||
const isAnyRestartInProgress = restartingTableIds.size > 0
|
||||
const isLoading = isPipelineLoading || isPipelineStatusLoading || isStatusLoading
|
||||
|
||||
const hasTableData = tableStatuses.length > 0
|
||||
@@ -222,13 +211,11 @@ export const ReplicationPipelineStatus = () => {
|
||||
statusName === PipelineStatusName.STARTED ||
|
||||
statusName === PipelineStatusName.STOPPED ||
|
||||
statusName === PipelineStatusName.FAILED
|
||||
const isEnablingDisabling =
|
||||
requestStatus === PipelineStatusRequestStatus.StartRequested ||
|
||||
requestStatus === PipelineStatusRequestStatus.StopRequested ||
|
||||
requestStatus === PipelineStatusRequestStatus.RestartRequested
|
||||
const isPipelineBusy = isEnablingDisabling || isAnyRestartInProgress
|
||||
const hasOptimisticStatus = requestStatus !== PipelineStatusRequestStatus.None
|
||||
const isPipelineBusy = hasOptimisticStatus || isRequestPending(pipelineId)
|
||||
const isAnyTableResetting = resettingTableIds.size > 0
|
||||
const showDisabledState = isPipelineBusy || !isPipelineActionable
|
||||
const canResetErroredTables = hasErroredTables && !isAnyRestartInProgress && !showDisabledState
|
||||
const canResetErroredTables = hasErroredTables && !showDisabledState
|
||||
const stateNotice = getPipelineStateNotice({ requestStatus, statusName, tableStatuses })
|
||||
const isSlotDisconnected =
|
||||
!isStatusError && statusName === PipelineStatusName.STARTED && applyLagMetrics?.active === false
|
||||
@@ -290,8 +277,8 @@ export const ReplicationPipelineStatus = () => {
|
||||
<Button
|
||||
variant="default"
|
||||
icon={<RotateCcw />}
|
||||
disabled={isAnyRestartInProgress || isPipelineError}
|
||||
loading={isAnyRestartInProgress}
|
||||
disabled={isPipelineBusy || isPipelineError}
|
||||
loading={isPipelineBusy}
|
||||
onClick={() => {
|
||||
setBatchRestartMode('errored')
|
||||
setShowBatchRestartDialog(true)
|
||||
@@ -359,8 +346,8 @@ export const ReplicationPipelineStatus = () => {
|
||||
variant="default"
|
||||
className="rounded-r-none hover:z-10 focus-visible:z-10 focus-visible:rounded-r-sm"
|
||||
icon={<RotateCcw />}
|
||||
disabled={isAnyRestartInProgress || showDisabledState || isPipelineError}
|
||||
loading={isAnyRestartInProgress}
|
||||
disabled={isPipelineBusy || showDisabledState || isPipelineError}
|
||||
loading={isPipelineBusy}
|
||||
onClick={() => {
|
||||
setBatchRestartMode('all')
|
||||
setShowBatchRestartDialog(true)
|
||||
@@ -443,7 +430,7 @@ export const ReplicationPipelineStatus = () => {
|
||||
/>
|
||||
)}
|
||||
{filteredTableStatuses.map((table) => {
|
||||
const isRestarting = restartingTableIds.has(table.id)
|
||||
const isResetting = resettingTableIds.has(table.id)
|
||||
const isErrorState = table.state.name === 'error'
|
||||
const errorReason =
|
||||
isErrorState && 'reason' in table.state
|
||||
@@ -457,10 +444,10 @@ export const ReplicationPipelineStatus = () => {
|
||||
<TableReplicationRow
|
||||
key={table.id}
|
||||
table={table}
|
||||
isRestarting={isRestarting}
|
||||
isRestarting={isResetting}
|
||||
showDisabledState={showDisabledState}
|
||||
disabledStateMessage={config.message}
|
||||
isAnyRestartInProgress={isAnyRestartInProgress}
|
||||
isAnyRestartInProgress={isPipelineBusy || isAnyTableResetting}
|
||||
isPipelineStopped={statusName === PipelineStatusName.STOPPED}
|
||||
onSelectRestart={() => {
|
||||
setSelectedTableForRestart({
|
||||
@@ -514,15 +501,13 @@ export const ReplicationPipelineStatus = () => {
|
||||
sourceId={pipeline?.source_id}
|
||||
publicationName={pipeline?.config.publication_name}
|
||||
pipelineStatusName={statusName}
|
||||
onRestartStart={() => {
|
||||
setTableResetting(pipelineId, true)
|
||||
setRestartingTableIds((prev) => new Set(prev).add(selectedTableForRestart.id))
|
||||
onResetStart={(tableId) => {
|
||||
setResettingTableIds((current) => new Set(current).add(tableId))
|
||||
}}
|
||||
onRestartComplete={() => {
|
||||
setTableResetting(pipelineId, false)
|
||||
setRestartingTableIds((prev) => {
|
||||
const next = new Set(prev)
|
||||
next.delete(selectedTableForRestart.id)
|
||||
onResetComplete={(tableId) => {
|
||||
setResettingTableIds((current) => {
|
||||
const next = new Set(current)
|
||||
next.delete(tableId)
|
||||
return next
|
||||
})
|
||||
}}
|
||||
@@ -551,15 +536,13 @@ export const ReplicationPipelineStatus = () => {
|
||||
publicationName={pipeline?.config.publication_name}
|
||||
tableSyncCopy={pipeline?.config.table_sync_copy}
|
||||
pipelineStatusName={statusName}
|
||||
onRestartStart={(tableIds) => {
|
||||
setTableResetting(pipelineId, true)
|
||||
setRestartingTableIds((prev) => new Set([...prev, ...tableIds]))
|
||||
onResetStart={(tableIds) => {
|
||||
setResettingTableIds((current) => new Set([...current, ...tableIds]))
|
||||
}}
|
||||
onRestartComplete={(tableIds) => {
|
||||
setTableResetting(pipelineId, false)
|
||||
setRestartingTableIds((prev) => {
|
||||
const next = new Set(prev)
|
||||
tableIds.forEach((id) => next.delete(id))
|
||||
onResetComplete={(tableIds) => {
|
||||
setResettingTableIds((current) => {
|
||||
const next = new Set(current)
|
||||
tableIds.forEach((tableId) => next.delete(tableId))
|
||||
return next
|
||||
})
|
||||
}}
|
||||
|
||||
@@ -11,22 +11,27 @@ import {
|
||||
AlertDialogTitle,
|
||||
} from 'ui'
|
||||
|
||||
import { PipelineStatusName } from './Replication.constants'
|
||||
import { getRestartRequestStatus } from './Pipeline.utils'
|
||||
import type { PipelineStatusName } from './Replication.constants'
|
||||
import { RestartCostEstimate } from './RestartCostEstimate'
|
||||
import { shouldCopyTable, type ReplicationTableIdentity } from './TableSyncCopy.utils'
|
||||
import { useRollbackTablesMutation } from '@/data/replication/rollback-tables-mutation'
|
||||
import type { TableSyncCopyConfig } from '@/data/replication/types'
|
||||
import {
|
||||
PipelineStatusRequestStatus,
|
||||
usePipelineRequestStatus,
|
||||
} from '@/state/replication-pipeline-request-status'
|
||||
|
||||
interface RestartTableDialogProps {
|
||||
pipelineStatusName?: PipelineStatusName
|
||||
open: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
table: ReplicationTableIdentity
|
||||
tableSyncCopy?: TableSyncCopyConfig | null
|
||||
sourceId?: number
|
||||
publicationName?: string
|
||||
pipelineStatusName?: PipelineStatusName
|
||||
onRestartStart?: () => void
|
||||
onRestartComplete?: () => void
|
||||
onResetStart?: (tableId: number) => void
|
||||
onResetComplete?: (tableId: number) => void
|
||||
}
|
||||
|
||||
export const RestartTableDialog = ({
|
||||
@@ -37,21 +42,18 @@ export const RestartTableDialog = ({
|
||||
sourceId,
|
||||
publicationName,
|
||||
pipelineStatusName,
|
||||
onRestartStart,
|
||||
onRestartComplete,
|
||||
onResetStart,
|
||||
onResetComplete,
|
||||
}: RestartTableDialogProps) => {
|
||||
const { ref: projectRef, pipelineId: _pipelineId } = useParams()
|
||||
const pipelineId = Number(_pipelineId)
|
||||
const { runWithRequestStatus } = usePipelineRequestStatus()
|
||||
const restartRequestStatus = getRestartRequestStatus(pipelineStatusName)
|
||||
const tableName = `${table.schema}.${table.name}`
|
||||
const willCopyTable = shouldCopyTable(tableSyncCopy, table.id)
|
||||
const pipelineAction = pipelineStatusName === PipelineStatusName.STOPPED ? 'start' : 'restart'
|
||||
|
||||
const { mutate: rollbackTables, isPending: isResetting } = useRollbackTablesMutation({
|
||||
const { mutateAsync: rollbackTables, isPending: isResetting } = useRollbackTablesMutation({
|
||||
onSuccess: () => {
|
||||
toast.success(`Resetting "${tableName}". Pipeline will ${pipelineAction} automatically.`)
|
||||
},
|
||||
onSettled: () => {
|
||||
onRestartComplete?.()
|
||||
toast.success(`Resetting "${tableName}"`)
|
||||
onOpenChange(false)
|
||||
},
|
||||
onError: (error) => {
|
||||
@@ -59,23 +61,31 @@ export const RestartTableDialog = ({
|
||||
},
|
||||
})
|
||||
|
||||
const handleReset = () => {
|
||||
const handleReset = async () => {
|
||||
if (!projectRef) return toast.error('Project ref is required')
|
||||
if (!pipelineId) return toast.error('Pipeline ID is required')
|
||||
onResetStart?.(table.id)
|
||||
|
||||
onRestartStart?.()
|
||||
rollbackTables({
|
||||
projectRef,
|
||||
pipelineId,
|
||||
target: { type: 'single_table', table_id: table.id },
|
||||
rollbackType: 'full',
|
||||
pipelineStatusName,
|
||||
})
|
||||
try {
|
||||
await runWithRequestStatus(pipelineId, restartRequestStatus, () =>
|
||||
rollbackTables({
|
||||
projectRef,
|
||||
pipelineId,
|
||||
target: { type: 'single_table', table_id: table.id },
|
||||
})
|
||||
)
|
||||
} finally {
|
||||
onResetComplete?.(table.id)
|
||||
}
|
||||
}
|
||||
|
||||
const consequence = willCopyTable
|
||||
? `Destination data for this table will be deleted, existing rows will sync again, and the pipeline will ${pipelineAction} automatically.`
|
||||
: `Destination data for this table will be deleted. Initial sync is skipped for this table, so replication resumes with new changes only. The pipeline will ${pipelineAction} automatically.`
|
||||
const resetDescription = willCopyTable
|
||||
? 'This resets the table, deletes its destination data, and syncs existing rows again.'
|
||||
: 'This resets the table and deletes its destination data. Initial sync is skipped, so replication resumes with new changes only.'
|
||||
const shouldRestartPipeline = restartRequestStatus !== PipelineStatusRequestStatus.None
|
||||
const consequence = shouldRestartPipeline
|
||||
? `${resetDescription} The pipeline restarts automatically to apply the reset.`
|
||||
: resetDescription
|
||||
|
||||
return (
|
||||
<AlertDialog open={open} onOpenChange={onOpenChange}>
|
||||
|
||||
@@ -26,11 +26,7 @@ import {
|
||||
} from 'ui'
|
||||
import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
|
||||
|
||||
import {
|
||||
getStatusName,
|
||||
PIPELINE_DISABLE_ALLOWED_FROM,
|
||||
PIPELINE_ENABLE_ALLOWED_FROM,
|
||||
} from './Pipeline.utils'
|
||||
import { getStatusName } from './Pipeline.utils'
|
||||
import { PipelineStatusName } from './Replication.constants'
|
||||
import { ReplicationPipelineStatusData } from '@/data/replication/pipeline-status-query'
|
||||
import { Pipeline } from '@/data/replication/pipelines-query'
|
||||
@@ -74,16 +70,21 @@ export const RowMenu = ({
|
||||
parseAsInteger.withOptions({ history: 'push', clearOnDefault: true })
|
||||
)
|
||||
|
||||
const { mutateAsync: startPipeline } = useStartPipelineMutation()
|
||||
const { mutateAsync: stopPipeline } = useStopPipelineMutation()
|
||||
const { mutateAsync: startPipeline } = useStartPipelineMutation({ onError: () => {} })
|
||||
const { mutateAsync: stopPipeline } = useStopPipelineMutation({ onError: () => {} })
|
||||
const { mutateAsync: restartPipeline } = useRestartPipelineMutation()
|
||||
const { getRequestStatus, setRequestStatus: setGlobalRequestStatus } = usePipelineRequestStatus()
|
||||
const { getRequestStatus, isRequestPending, runWithRequestStatus } = usePipelineRequestStatus()
|
||||
const requestStatus = pipeline?.id
|
||||
? getRequestStatus(pipeline.id)
|
||||
: PipelineStatusRequestStatus.None
|
||||
|
||||
const isPipelineRequestPending = !!pipeline && isRequestPending(pipeline.id)
|
||||
|
||||
// Show actions when not in a transitional state
|
||||
const canPerformActions =
|
||||
!isError &&
|
||||
!!pipeline &&
|
||||
!isPipelineRequestPending &&
|
||||
requestStatus === PipelineStatusRequestStatus.None &&
|
||||
statusName !== PipelineStatusName.STARTING &&
|
||||
[PipelineStatusName.STOPPED, PipelineStatusName.STARTED, PipelineStatusName.FAILED].includes(
|
||||
@@ -103,13 +104,10 @@ export const RowMenu = ({
|
||||
if (!pipeline) return toast.error('No pipeline found')
|
||||
|
||||
try {
|
||||
// Only show 'enabling' when transitioning from allowed states
|
||||
if (PIPELINE_ENABLE_ALLOWED_FROM.includes(statusName as PipelineStatusName)) {
|
||||
setGlobalRequestStatus(pipeline.id, PipelineStatusRequestStatus.StartRequested, statusName)
|
||||
}
|
||||
await startPipeline({ projectRef, pipelineId: pipeline.id })
|
||||
await runWithRequestStatus(pipeline.id, PipelineStatusRequestStatus.StartRequested, () =>
|
||||
startPipeline({ projectRef, pipelineId: pipeline.id })
|
||||
)
|
||||
} catch (error) {
|
||||
setGlobalRequestStatus(pipeline.id, PipelineStatusRequestStatus.None)
|
||||
toast.error(`Failed to start pipeline: ${(error as ResponseError).message}`)
|
||||
}
|
||||
}
|
||||
@@ -119,13 +117,10 @@ export const RowMenu = ({
|
||||
if (!pipeline) return toast.error('No pipeline found')
|
||||
|
||||
try {
|
||||
// Only show 'disabling' when transitioning from allowed states
|
||||
if (PIPELINE_DISABLE_ALLOWED_FROM.includes(statusName as PipelineStatusName)) {
|
||||
setGlobalRequestStatus(pipeline.id, PipelineStatusRequestStatus.StopRequested, statusName)
|
||||
}
|
||||
await stopPipeline({ projectRef, pipelineId: pipeline.id })
|
||||
await runWithRequestStatus(pipeline.id, PipelineStatusRequestStatus.StopRequested, () =>
|
||||
stopPipeline({ projectRef, pipelineId: pipeline.id })
|
||||
)
|
||||
} catch (error) {
|
||||
setGlobalRequestStatus(pipeline.id, PipelineStatusRequestStatus.None)
|
||||
toast.error(`Failed to stop pipeline: ${(error as ResponseError).message}`)
|
||||
}
|
||||
}
|
||||
@@ -135,10 +130,10 @@ export const RowMenu = ({
|
||||
if (!pipeline) return toast.error('No pipeline found')
|
||||
|
||||
try {
|
||||
setGlobalRequestStatus(pipeline.id, PipelineStatusRequestStatus.RestartRequested, statusName)
|
||||
await restartPipeline({ projectRef, pipelineId: pipeline.id })
|
||||
await runWithRequestStatus(pipeline.id, PipelineStatusRequestStatus.StopRequested, () =>
|
||||
restartPipeline({ projectRef, pipelineId: pipeline.id })
|
||||
)
|
||||
} catch (error) {
|
||||
setGlobalRequestStatus(pipeline.id, PipelineStatusRequestStatus.None)
|
||||
toast.error(`Failed to restart pipeline: ${(error as ResponseError).message}`)
|
||||
}
|
||||
}
|
||||
@@ -188,7 +183,11 @@ export const RowMenu = ({
|
||||
<DropdownMenuSeparator />
|
||||
{hasUpdate && (
|
||||
<>
|
||||
<DropdownMenuItem className="space-x-2" onClick={() => onUpdateClick?.()}>
|
||||
<DropdownMenuItem
|
||||
className="space-x-2"
|
||||
onClick={() => onUpdateClick?.()}
|
||||
disabled={isPipelineRequestPending}
|
||||
>
|
||||
<ArrowUpCircle size={14} />
|
||||
<p>Update available</p>
|
||||
</DropdownMenuItem>
|
||||
@@ -218,11 +217,19 @@ export const RowMenu = ({
|
||||
</>
|
||||
)}
|
||||
|
||||
<DropdownMenuItem className="space-x-2" onClick={() => setEdit(destinationId)}>
|
||||
<DropdownMenuItem
|
||||
className="space-x-2"
|
||||
onClick={() => setEdit(destinationId)}
|
||||
disabled={isPipelineRequestPending}
|
||||
>
|
||||
<Edit size={14} />
|
||||
<p>Edit pipeline</p>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="space-x-2" onClick={onDeleteClick}>
|
||||
<DropdownMenuItem
|
||||
className="space-x-2"
|
||||
onClick={onDeleteClick}
|
||||
disabled={isPipelineRequestPending}
|
||||
>
|
||||
<Trash size={14} />
|
||||
<p>Delete pipeline</p>
|
||||
</DropdownMenuItem>
|
||||
|
||||
@@ -0,0 +1,142 @@
|
||||
import { QueryClient } from '@tanstack/react-query'
|
||||
import { act, fireEvent, screen, waitFor } from '@testing-library/react'
|
||||
import type { components } from 'api-types'
|
||||
import { HttpResponse } from 'msw'
|
||||
import { Button } from 'ui'
|
||||
import { describe, expect, test, vi } from 'vitest'
|
||||
|
||||
import { PipelineStatePill } from './PipelineStatePill'
|
||||
import { UpdateVersionModal } from './UpdateVersionModal'
|
||||
import { replicationKeys } from '@/data/replication/keys'
|
||||
import {
|
||||
useReplicationPipelineStatusQuery,
|
||||
type ReplicationPipelineStatusResponse,
|
||||
} from '@/data/replication/pipeline-status-query'
|
||||
import type { Pipeline } from '@/data/replication/pipelines-query'
|
||||
import {
|
||||
PipelineRequestStatusProvider,
|
||||
usePipelineRequestStatus,
|
||||
} from '@/state/replication-pipeline-request-status'
|
||||
import { customRender } from '@/tests/lib/custom-render'
|
||||
import { addAPIMock } from '@/tests/lib/msw'
|
||||
|
||||
const pipeline: Pipeline = {
|
||||
id: 9,
|
||||
tenant_id: 'test',
|
||||
source_id: 1,
|
||||
source_name: 'main',
|
||||
destination_id: 1,
|
||||
destination_name: 'Analytics',
|
||||
replicator_id: 1,
|
||||
config: { publication_name: 'analytics' },
|
||||
}
|
||||
|
||||
const StatusView = () => {
|
||||
const { data, error, isPending, isError, isSuccess } = useReplicationPipelineStatusQuery({
|
||||
projectRef: 'default',
|
||||
pipelineId: 9,
|
||||
})
|
||||
const { getRequestStatus, isRequestPending } = usePipelineRequestStatus()
|
||||
return (
|
||||
<>
|
||||
<PipelineStatePill
|
||||
pipelineStatus={data?.status}
|
||||
error={error}
|
||||
isLoading={isPending}
|
||||
isError={isError}
|
||||
isSuccess={isSuccess}
|
||||
requestStatus={getRequestStatus(9)}
|
||||
/>
|
||||
<Button disabled={isRequestPending(9)}>Another action</Button>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
describe('pipeline version updates', () => {
|
||||
test.each([
|
||||
{
|
||||
status: 'started',
|
||||
initialLabel: 'Running',
|
||||
confirmLabel: 'Update and restart',
|
||||
pendingLabel: 'Stopping',
|
||||
},
|
||||
{
|
||||
status: 'stopped',
|
||||
initialLabel: 'Stopped',
|
||||
confirmLabel: 'Update version',
|
||||
pendingLabel: 'Stopped',
|
||||
},
|
||||
{
|
||||
status: 'unknown',
|
||||
initialLabel: 'Unknown',
|
||||
confirmLabel: 'Update version',
|
||||
pendingLabel: 'Unknown',
|
||||
},
|
||||
] as const)(
|
||||
'honors the backend lifecycle for $status',
|
||||
async ({ status, initialLabel, confirmLabel, pendingLabel }) => {
|
||||
const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } })
|
||||
const onClose = vi.fn()
|
||||
const updates: unknown[] = []
|
||||
let complete = () => {}
|
||||
const response = new Promise<void>((resolve) => {
|
||||
complete = resolve
|
||||
})
|
||||
addAPIMock({
|
||||
method: 'get',
|
||||
path: '/platform/replication/:ref/pipelines/:pipeline_id/status',
|
||||
response: () =>
|
||||
HttpResponse.json<ReplicationPipelineStatusResponse>({
|
||||
pipeline_id: 9,
|
||||
status: { name: status },
|
||||
}),
|
||||
})
|
||||
addAPIMock({
|
||||
method: 'get',
|
||||
path: '/platform/replication/:ref/pipelines/:pipeline_id/version',
|
||||
response: () =>
|
||||
HttpResponse.json<components['schemas']['PipelineVersionResponse_Output']>({
|
||||
pipeline_id: 9,
|
||||
version: { id: 1, name: 'v1' },
|
||||
new_version: { id: 2, name: 'v2' },
|
||||
}),
|
||||
})
|
||||
addAPIMock({
|
||||
method: 'post',
|
||||
path: '/platform/replication/:ref/pipelines/:pipeline_id/version',
|
||||
response: async ({ request }) => {
|
||||
updates.push(await request.json())
|
||||
await response
|
||||
return HttpResponse.json<Record<string, never>>({})
|
||||
},
|
||||
})
|
||||
customRender(
|
||||
<PipelineRequestStatusProvider>
|
||||
<StatusView />
|
||||
<UpdateVersionModal visible pipeline={pipeline} onClose={onClose} />
|
||||
</PipelineRequestStatusProvider>,
|
||||
{ queryClient }
|
||||
)
|
||||
await screen.findByText(initialLabel)
|
||||
await screen.findByText('v2')
|
||||
fireEvent.click(screen.getByRole('button', { name: confirmLabel }))
|
||||
expect(screen.getByText(pendingLabel)).toBeInTheDocument()
|
||||
expect(screen.getByText('Another action').closest('button')).toBeDisabled()
|
||||
await act(async () => {
|
||||
await queryClient.invalidateQueries(
|
||||
{ queryKey: replicationKeys.pipelinesStatus('default', 9) },
|
||||
{ cancelRefetch: false }
|
||||
)
|
||||
})
|
||||
expect(screen.getByText(pendingLabel)).toBeInTheDocument()
|
||||
expect(screen.getByText('Another action').closest('button')).toBeDisabled()
|
||||
await act(async () => {
|
||||
complete()
|
||||
})
|
||||
await waitFor(() => expect(onClose).toHaveBeenCalledOnce())
|
||||
expect(screen.getByText('Another action').closest('button')).toBeEnabled()
|
||||
// There are deliberately no start/stop/restart handlers: the update endpoint owns this.
|
||||
expect(updates).toEqual([{ version_id: 2 }])
|
||||
}
|
||||
)
|
||||
})
|
||||
@@ -2,8 +2,7 @@ import { useParams } from 'common'
|
||||
import { toast } from 'sonner'
|
||||
import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
|
||||
|
||||
import { getStatusName } from './Pipeline.utils'
|
||||
import { PipelineStatusName, STATUS_REFRESH_FREQUENCY_MS } from './Replication.constants'
|
||||
import { getRestartRequestStatus, getStatusName } from './Pipeline.utils'
|
||||
import { useReplicationPipelineStatusQuery } from '@/data/replication/pipeline-status-query'
|
||||
import { useReplicationPipelineVersionQuery } from '@/data/replication/pipeline-version-query'
|
||||
import { Pipeline } from '@/data/replication/pipelines-query'
|
||||
@@ -12,35 +11,25 @@ import {
|
||||
PipelineStatusRequestStatus,
|
||||
usePipelineRequestStatus,
|
||||
} from '@/state/replication-pipeline-request-status'
|
||||
import { type ResponseError } from '@/types'
|
||||
|
||||
interface UpdateVersionModalProps {
|
||||
visible: boolean
|
||||
pipeline?: Pipeline
|
||||
confirmLabel?: string
|
||||
confirmLabelLoading?: string
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
export const UpdateVersionModal = ({
|
||||
visible,
|
||||
pipeline,
|
||||
confirmLabel,
|
||||
confirmLabelLoading = 'Updating…',
|
||||
onClose,
|
||||
}: UpdateVersionModalProps) => {
|
||||
export const UpdateVersionModal = ({ visible, pipeline, onClose }: UpdateVersionModalProps) => {
|
||||
const { ref: projectRef } = useParams()
|
||||
const { setRequestStatus } = usePipelineRequestStatus()
|
||||
const { runWithRequestStatus } = usePipelineRequestStatus()
|
||||
|
||||
const { data: pipelineStatusData } = useReplicationPipelineStatusQuery(
|
||||
{ projectRef, pipelineId: pipeline?.id },
|
||||
{ refetchInterval: STATUS_REFRESH_FREQUENCY_MS }
|
||||
)
|
||||
const { data: pipelineStatusData } = useReplicationPipelineStatusQuery({
|
||||
projectRef,
|
||||
pipelineId: pipeline?.id,
|
||||
})
|
||||
const pipelineStatus = pipelineStatusData?.status
|
||||
const statusName = getStatusName(pipelineStatus)
|
||||
// Treat an unresolved/unknown status as stopped so we don't optimistically claim a restart
|
||||
// for a pipeline whose active state hasn't been confirmed yet.
|
||||
const isStopped = statusName === undefined || statusName === PipelineStatusName.STOPPED
|
||||
const requestStatus = getRestartRequestStatus(statusName)
|
||||
const shouldRestart = requestStatus === PipelineStatusRequestStatus.StopRequested
|
||||
|
||||
const { data: versionData, isPending: isLoadingVersion } = useReplicationPipelineVersionQuery({
|
||||
projectRef,
|
||||
@@ -58,42 +47,41 @@ export const UpdateVersionModal = ({
|
||||
if (!versionId) return
|
||||
|
||||
try {
|
||||
await updatePipelineVersion({ projectRef, pipelineId: pipeline.id, versionId })
|
||||
} catch (e) {
|
||||
// 404: default changed; version cache will refresh via mutation onError. Keep dialog open.
|
||||
if ((e as ResponseError)?.code === 404) return
|
||||
await runWithRequestStatus(pipeline.id, requestStatus, () =>
|
||||
updatePipelineVersion({
|
||||
projectRef,
|
||||
pipelineId: pipeline.id,
|
||||
versionId,
|
||||
skipStatusInvalidation: true,
|
||||
})
|
||||
)
|
||||
} catch {
|
||||
// The mutation reports errors and refreshes version info if the default image changed.
|
||||
return
|
||||
}
|
||||
|
||||
if (!isStopped) {
|
||||
setRequestStatus(pipeline.id, PipelineStatusRequestStatus.RestartRequested, statusName)
|
||||
toast.success('Pipeline successfully updated and is currently restarting')
|
||||
} else {
|
||||
toast.success('Pipeline successfully updated')
|
||||
}
|
||||
toast.success('Pipeline version updated.')
|
||||
|
||||
onClose()
|
||||
}
|
||||
|
||||
const resolvedConfirmLabel = confirmLabel ?? (isStopped ? 'Update version' : 'Update and restart')
|
||||
|
||||
return (
|
||||
<ConfirmationModal
|
||||
size="small"
|
||||
variant={isStopped ? 'default' : 'warning'}
|
||||
variant={shouldRestart ? 'warning' : 'default'}
|
||||
visible={visible}
|
||||
title="Update available"
|
||||
confirmLabel={resolvedConfirmLabel}
|
||||
confirmLabelLoading={confirmLabelLoading}
|
||||
confirmLabel={shouldRestart ? 'Update and restart' : 'Update version'}
|
||||
confirmLabelLoading="Updating version..."
|
||||
loading={isUpdating}
|
||||
onCancel={onClose}
|
||||
onConfirm={onConfirmUpdate}
|
||||
>
|
||||
<div className="flex flex-col gap-y-3">
|
||||
<p className="text-sm text-foreground-light">
|
||||
{isStopped
|
||||
? 'A newer pipeline version is available with improvements and bug fixes.'
|
||||
: 'A newer pipeline version is available with improvements and bug fixes. The pipeline will restart and continue from where it left off.'}
|
||||
{shouldRestart
|
||||
? 'A newer pipeline version is available with improvements and bug fixes. The pipeline will restart and continue from where it left off.'
|
||||
: 'A newer pipeline version is available with improvements and bug fixes.'}
|
||||
</p>
|
||||
<div className="overflow-hidden rounded-md border">
|
||||
<table className="w-full text-sm">
|
||||
|
||||
@@ -19,7 +19,7 @@ export const DatabaseProductMenu = () => {
|
||||
return <ProductMenu page={page} menu={menu} />
|
||||
}
|
||||
|
||||
const DatabaseLayout = ({ children, title }: PropsWithChildren<DatabaseLayoutProps>) => {
|
||||
const DatabaseLayoutContent = ({ children, title }: PropsWithChildren<DatabaseLayoutProps>) => {
|
||||
const router = useRouter()
|
||||
const page = router.pathname.split('/')[4]
|
||||
const menu = useGenerateDatabaseMenu()
|
||||
@@ -37,4 +37,4 @@ const DatabaseLayout = ({ children, title }: PropsWithChildren<DatabaseLayoutPro
|
||||
)
|
||||
}
|
||||
|
||||
export default withAuth(DatabaseLayout)
|
||||
export const DatabaseLayout = withAuth(DatabaseLayoutContent)
|
||||
@@ -2,7 +2,7 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
|
||||
import { useParams } from 'common'
|
||||
import { PropsWithChildren } from 'react'
|
||||
|
||||
import DatabaseLayout from './DatabaseLayout'
|
||||
import { DatabaseLayout } from './DatabaseLayout'
|
||||
import { PageLayout } from '@/components/layouts/PageLayout/PageLayout'
|
||||
import { NoPermission } from '@/components/ui/NoPermission'
|
||||
import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
|
||||
|
||||
@@ -0,0 +1,15 @@
|
||||
import { useParams } from 'common'
|
||||
import { PropsWithChildren } from 'react'
|
||||
|
||||
import { DatabaseLayout } from './DatabaseLayout'
|
||||
import { PipelineRequestStatusProvider } from '@/state/replication-pipeline-request-status'
|
||||
|
||||
export const ReplicationLayout = ({ children }: PropsWithChildren) => {
|
||||
const { ref: projectRef } = useParams()
|
||||
|
||||
return (
|
||||
<DatabaseLayout title="Replication">
|
||||
<PipelineRequestStatusProvider key={projectRef}>{children}</PipelineRequestStatusProvider>
|
||||
</DatabaseLayout>
|
||||
)
|
||||
}
|
||||
@@ -2,6 +2,7 @@ import { useMutation, useQueryClient } from '@tanstack/react-query'
|
||||
import type { components } from 'api-types'
|
||||
import { toast } from 'sonner'
|
||||
|
||||
import { invalidateReplicationPipelineQueries } from './invalidate-pipeline-queries'
|
||||
import { replicationKeys } from './keys'
|
||||
import type {
|
||||
BigQueryDestinationConfig,
|
||||
@@ -216,7 +217,7 @@ export const useCreateDestinationPipelineMutation = ({
|
||||
|
||||
await Promise.all([
|
||||
queryClient.invalidateQueries({ queryKey: replicationKeys.destinations(projectRef) }),
|
||||
queryClient.invalidateQueries({ queryKey: replicationKeys.pipelines(projectRef) }),
|
||||
invalidateReplicationPipelineQueries(queryClient, projectRef),
|
||||
])
|
||||
|
||||
await onSuccess?.(data, variables, context)
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query'
|
||||
import { toast } from 'sonner'
|
||||
|
||||
import { invalidateReplicationPipelineQueries } from './invalidate-pipeline-queries'
|
||||
import { replicationKeys } from './keys'
|
||||
import { del, handleError } from '@/data/fetchers'
|
||||
import type { ResponseError, UseCustomMutationOptions } from '@/types'
|
||||
@@ -51,23 +52,10 @@ export const useDeleteDestinationPipelineMutation = ({
|
||||
{
|
||||
mutationFn: (vars) => deleteDestinationPipeline(vars),
|
||||
async onSuccess(data, variables, context) {
|
||||
const { projectRef, destinationId, pipelineId } = variables
|
||||
|
||||
const { projectRef } = variables
|
||||
await Promise.all([
|
||||
queryClient.invalidateQueries({ queryKey: replicationKeys.destinations(projectRef) }),
|
||||
queryClient.invalidateQueries({ queryKey: replicationKeys.pipelines(projectRef) }),
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: replicationKeys.pipelineById(projectRef, pipelineId),
|
||||
}),
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: replicationKeys.pipelinesStatus(projectRef, pipelineId),
|
||||
}),
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: replicationKeys.pipelinesReplicationStatus(projectRef, pipelineId),
|
||||
}),
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: replicationKeys.destinationById(projectRef, destinationId),
|
||||
}),
|
||||
invalidateReplicationPipelineQueries(queryClient, projectRef),
|
||||
])
|
||||
|
||||
await onSuccess?.(data, variables, context)
|
||||
|
||||
@@ -0,0 +1,41 @@
|
||||
import { QueryClient, QueryObserver } from '@tanstack/react-query'
|
||||
import { describe, expect, test, vi } from 'vitest'
|
||||
|
||||
import { invalidateReplicationPipelineQueries } from './invalidate-pipeline-queries'
|
||||
import { replicationKeys } from './keys'
|
||||
|
||||
describe('pipeline cache invalidation', () => {
|
||||
test.each([
|
||||
{ key: replicationKeys.pipelines('default'), shouldReplaceRead: true },
|
||||
{ key: replicationKeys.pipelineById('default', 1), shouldReplaceRead: true },
|
||||
{ key: replicationKeys.pipelinesVersion('default', 1), shouldReplaceRead: true },
|
||||
{ key: replicationKeys.pipelinesStatus('default', 1), shouldReplaceRead: false },
|
||||
{ key: replicationKeys.pipelinesReplicationStatus('default', 1), shouldReplaceRead: false },
|
||||
])('refreshes metadata while sharing polls: $key', async ({ key, shouldReplaceRead }) => {
|
||||
const queryClient = new QueryClient()
|
||||
queryClient.setQueryData(key, 'cached')
|
||||
let completeOldRead!: (value: string) => void
|
||||
const oldRead = new Promise<string>((resolve) => {
|
||||
completeOldRead = resolve
|
||||
})
|
||||
const aborted = vi.fn()
|
||||
const queryFn = vi.fn(({ signal }: { signal: AbortSignal }) => {
|
||||
signal.addEventListener('abort', aborted)
|
||||
return queryFn.mock.calls.length === 1 ? oldRead : Promise.resolve('saved')
|
||||
})
|
||||
const observer = new QueryObserver(queryClient, { queryKey: key, queryFn })
|
||||
const unsubscribe = observer.subscribe(() => {})
|
||||
try {
|
||||
const refresh = invalidateReplicationPipelineQueries(queryClient, 'default')
|
||||
completeOldRead('before mutation')
|
||||
await refresh
|
||||
|
||||
expect(queryClient.getQueryData(key)).toBe(shouldReplaceRead ? 'saved' : 'before mutation')
|
||||
expect(queryFn).toHaveBeenCalledTimes(shouldReplaceRead ? 2 : 1)
|
||||
expect(aborted).toHaveBeenCalledTimes(shouldReplaceRead ? 1 : 0)
|
||||
} finally {
|
||||
unsubscribe()
|
||||
queryClient.clear()
|
||||
}
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,21 @@
|
||||
import type { QueryClient, QueryKey } from '@tanstack/react-query'
|
||||
|
||||
import { replicationKeys } from './keys'
|
||||
|
||||
const isPollingQuery = ({ queryKey }: { queryKey: QueryKey }) =>
|
||||
queryKey.at(-1) === 'status' || queryKey.at(-1) === 'replication-status'
|
||||
|
||||
export const invalidateReplicationPipelineQueries = (
|
||||
queryClient: QueryClient,
|
||||
projectRef: string | undefined
|
||||
) => {
|
||||
const queryKey = replicationKeys.pipelines(projectRef)
|
||||
return Promise.all([
|
||||
queryClient.invalidateQueries({ queryKey, predicate: (query) => !isPollingQuery(query) }),
|
||||
// Polls will refresh again after the current read; metadata needs a post-mutation read now.
|
||||
queryClient.invalidateQueries(
|
||||
{ queryKey, predicate: isPollingQuery },
|
||||
{ cancelRefetch: false }
|
||||
),
|
||||
])
|
||||
}
|
||||
@@ -0,0 +1,261 @@
|
||||
import { focusManager, QueryClient, QueryObserver } from '@tanstack/react-query'
|
||||
import { act, waitFor } from '@testing-library/react'
|
||||
import type { components } from 'api-types'
|
||||
import { HttpResponse } from 'msw'
|
||||
import { afterEach, describe, expect, test, vi } from 'vitest'
|
||||
|
||||
import { replicationKeys } from './keys'
|
||||
import { useReplicationPipelineReplicationStatusQuery } from './pipeline-replication-status-query'
|
||||
import {
|
||||
replicationPipelineStatusQueryOptions,
|
||||
useReplicationPipelineStatusQuery,
|
||||
waitForPipelineStopped,
|
||||
} from './pipeline-status-query'
|
||||
import { customRenderHook } from '@/tests/lib/custom-render'
|
||||
import { addAPIMock, type APIErrorBody } from '@/tests/lib/msw'
|
||||
|
||||
const variables = { projectRef: 'default', pipelineId: 1 }
|
||||
const statusKey = replicationKeys.pipelinesStatus('default', 1)
|
||||
type StatusResponse = components['schemas']['PipelineStatusResponse_Output']
|
||||
type MetricsResponse = components['schemas']['PipelineReplicationStatusResponse_Output']
|
||||
const stopped: StatusResponse = { pipeline_id: 1, status: { name: 'stopped' } }
|
||||
const stopping: StatusResponse = { pipeline_id: 1, status: { name: 'stopping' } }
|
||||
const deferred = <T,>() => {
|
||||
let resolve!: (value: T) => void
|
||||
const promise = new Promise<T>((complete) => {
|
||||
resolve = complete
|
||||
})
|
||||
return { promise, resolve }
|
||||
}
|
||||
|
||||
afterEach(() => {
|
||||
vi.useRealTimers()
|
||||
focusManager.setFocused(true)
|
||||
})
|
||||
|
||||
describe('pipeline polling', () => {
|
||||
test.each([
|
||||
{ endpoint: 'status', retryAfter: '30', delay: 30_000 },
|
||||
{ endpoint: 'replication-status', retryAfter: '60', delay: 60_000 },
|
||||
{ endpoint: 'status', retryAfter: undefined, delay: 30_000 },
|
||||
] as const)(
|
||||
'$endpoint respects rate-limit backoff ($retryAfter) and resumes normal polling after recovery',
|
||||
async ({ endpoint, retryAfter, delay }) => {
|
||||
let requests = 0
|
||||
addAPIMock({
|
||||
method: 'get',
|
||||
path: `/platform/replication/:ref/pipelines/:pipeline_id/${endpoint}`,
|
||||
response: () => {
|
||||
requests += 1
|
||||
if (requests === 1) {
|
||||
return HttpResponse.json<APIErrorBody>(
|
||||
{ message: 'Rate limited' },
|
||||
{ status: 429, headers: retryAfter ? { 'Retry-After': retryAfter } : undefined }
|
||||
)
|
||||
}
|
||||
return endpoint === 'status'
|
||||
? HttpResponse.json<StatusResponse>(stopped)
|
||||
: HttpResponse.json<MetricsResponse>({ pipeline_id: 1, table_statuses: [] })
|
||||
},
|
||||
})
|
||||
const useResource =
|
||||
endpoint === 'status'
|
||||
? useReplicationPipelineStatusQuery
|
||||
: useReplicationPipelineReplicationStatusQuery
|
||||
vi.useFakeTimers()
|
||||
const { result, unmount } = customRenderHook(() => useResource(variables))
|
||||
await act(async () => {
|
||||
await vi.advanceTimersByTimeAsync(0)
|
||||
})
|
||||
expect(result.current.isError).toBe(true)
|
||||
await act(async () => {
|
||||
await vi.advanceTimersByTimeAsync(delay - 1)
|
||||
})
|
||||
expect(requests).toBe(1)
|
||||
await act(async () => {
|
||||
await vi.advanceTimersByTimeAsync(1)
|
||||
})
|
||||
expect(requests).toBe(2)
|
||||
await act(async () => {
|
||||
await vi.advanceTimersByTimeAsync(5_000)
|
||||
})
|
||||
expect(result.current.isSuccess).toBe(true)
|
||||
expect(requests).toBe(3)
|
||||
unmount()
|
||||
}
|
||||
)
|
||||
|
||||
test.each(['status', 'replication-status'] as const)(
|
||||
'shares slow %s requests and polls five seconds after completion',
|
||||
async (endpoint) => {
|
||||
const response = deferred<void>()
|
||||
const requests = vi.fn()
|
||||
const aborted = vi.fn()
|
||||
addAPIMock({
|
||||
method: 'get',
|
||||
path: `/platform/replication/:ref/pipelines/:pipeline_id/${endpoint}`,
|
||||
response: async ({ request }) => {
|
||||
requests()
|
||||
request.signal.addEventListener('abort', aborted)
|
||||
await response.promise
|
||||
return endpoint === 'status'
|
||||
? HttpResponse.json<StatusResponse>(stopped)
|
||||
: HttpResponse.json<MetricsResponse>({
|
||||
pipeline_id: 1,
|
||||
apply_lag: null,
|
||||
table_statuses: [],
|
||||
})
|
||||
},
|
||||
})
|
||||
const queryClient = new QueryClient()
|
||||
// Exercise a background refresh with cached data, where invalidation can otherwise
|
||||
// cancel and replace a request that is already on the server.
|
||||
queryClient.setQueryData(
|
||||
endpoint === 'status'
|
||||
? statusKey
|
||||
: replicationKeys.pipelinesReplicationStatus('default', 1),
|
||||
endpoint === 'status' ? stopped : { pipeline_id: 1, apply_lag: null, table_statuses: [] }
|
||||
)
|
||||
const useResource =
|
||||
endpoint === 'status'
|
||||
? useReplicationPipelineStatusQuery
|
||||
: useReplicationPipelineReplicationStatusQuery
|
||||
const { result, unmount } = customRenderHook(
|
||||
() => ({ first: useResource(variables), second: useResource(variables) }),
|
||||
{ queryClient }
|
||||
)
|
||||
await waitFor(() => expect(requests).toHaveBeenCalledTimes(1))
|
||||
vi.useFakeTimers()
|
||||
await act(async () => {
|
||||
await vi.advanceTimersByTimeAsync(5_000)
|
||||
})
|
||||
expect(requests).toHaveBeenCalledTimes(1)
|
||||
let refresh!: Promise<void>
|
||||
act(() => {
|
||||
refresh = queryClient.invalidateQueries(
|
||||
{
|
||||
queryKey:
|
||||
endpoint === 'status'
|
||||
? statusKey
|
||||
: replicationKeys.pipelinesReplicationStatus('default', 1),
|
||||
},
|
||||
{ cancelRefetch: false }
|
||||
)
|
||||
})
|
||||
await act(async () => {
|
||||
response.resolve()
|
||||
await refresh
|
||||
})
|
||||
expect(aborted).not.toHaveBeenCalled()
|
||||
expect(requests).toHaveBeenCalledTimes(1)
|
||||
await act(async () => {
|
||||
await vi.advanceTimersByTimeAsync(4_999)
|
||||
})
|
||||
expect(result.current.first.isSuccess).toBe(true)
|
||||
expect(result.current.second.isSuccess).toBe(true)
|
||||
expect(requests).toHaveBeenCalledTimes(1)
|
||||
await act(async () => {
|
||||
await vi.advanceTimersByTimeAsync(1)
|
||||
})
|
||||
expect(requests).toHaveBeenCalledTimes(2)
|
||||
unmount()
|
||||
queryClient.clear()
|
||||
}
|
||||
)
|
||||
|
||||
test('pauses dashboard polling while unfocused and refreshes on return', async () => {
|
||||
const requests = vi.fn()
|
||||
addAPIMock({
|
||||
method: 'get',
|
||||
path: '/platform/replication/:ref/pipelines/:pipeline_id/status',
|
||||
response: () => {
|
||||
requests()
|
||||
return HttpResponse.json<StatusResponse>(stopped)
|
||||
},
|
||||
})
|
||||
const { result } = customRenderHook(() => useReplicationPipelineStatusQuery(variables))
|
||||
await waitFor(() => expect(result.current.isSuccess).toBe(true))
|
||||
vi.useFakeTimers()
|
||||
focusManager.setFocused(false)
|
||||
await act(async () => {
|
||||
await vi.advanceTimersByTimeAsync(5_000)
|
||||
})
|
||||
expect(requests).toHaveBeenCalledTimes(1)
|
||||
await act(async () => {
|
||||
focusManager.setFocused(true)
|
||||
await vi.advanceTimersByTimeAsync(0)
|
||||
})
|
||||
expect(requests).toHaveBeenCalledTimes(2)
|
||||
})
|
||||
})
|
||||
|
||||
describe('waiting for pipeline shutdown', () => {
|
||||
test('checks fresh status even when stopped is cached, sharing a dashboard request', async () => {
|
||||
const response = deferred<StatusResponse>()
|
||||
const requests = vi.fn()
|
||||
addAPIMock({
|
||||
method: 'get',
|
||||
path: '/platform/replication/:ref/pipelines/:pipeline_id/status',
|
||||
response: async () => {
|
||||
requests()
|
||||
return HttpResponse.json<StatusResponse>(await response.promise)
|
||||
},
|
||||
})
|
||||
const queryClient = new QueryClient()
|
||||
queryClient.setQueryData(statusKey, stopped)
|
||||
const observer = new QueryObserver(
|
||||
queryClient,
|
||||
replicationPipelineStatusQueryOptions(variables)
|
||||
)
|
||||
const unsubscribe = observer.subscribe(() => {})
|
||||
await waitFor(() => expect(requests).toHaveBeenCalledTimes(1))
|
||||
const complete = vi.fn()
|
||||
const shutdown = waitForPipelineStopped(queryClient, variables).then(complete)
|
||||
expect(complete).not.toHaveBeenCalled()
|
||||
response.resolve(stopping)
|
||||
await waitFor(() => expect(queryClient.getQueryState(statusKey)?.fetchStatus).toBe('idle'))
|
||||
expect(complete).not.toHaveBeenCalled()
|
||||
expect(requests).toHaveBeenCalledTimes(1)
|
||||
addAPIMock({
|
||||
method: 'get',
|
||||
path: '/platform/replication/:ref/pipelines/:pipeline_id/status',
|
||||
response: () => HttpResponse.json<StatusResponse>(stopped),
|
||||
})
|
||||
await queryClient.invalidateQueries({ queryKey: statusKey }, { cancelRefetch: false })
|
||||
await shutdown
|
||||
expect(complete).toHaveBeenCalledOnce()
|
||||
unsubscribe()
|
||||
queryClient.clear()
|
||||
})
|
||||
|
||||
test('rejects on timeout instead of proceeding with deletion', async () => {
|
||||
addAPIMock({
|
||||
method: 'get',
|
||||
path: '/platform/replication/:ref/pipelines/:pipeline_id/status',
|
||||
response: () => HttpResponse.json<StatusResponse>(stopping),
|
||||
})
|
||||
const queryClient = new QueryClient()
|
||||
vi.useFakeTimers()
|
||||
const shutdown = waitForPipelineStopped(queryClient, variables)
|
||||
const rejection = expect(shutdown).rejects.toThrow('Pipeline is still stopping')
|
||||
await vi.advanceTimersByTimeAsync(30_000)
|
||||
await rejection
|
||||
expect(queryClient.getQueryCache().find({ queryKey: statusKey })?.getObserversCount()).toBe(0)
|
||||
queryClient.clear()
|
||||
})
|
||||
|
||||
test('rejects if shutdown cannot be verified', async () => {
|
||||
addAPIMock({
|
||||
method: 'get',
|
||||
path: '/platform/replication/:ref/pipelines/:pipeline_id/status',
|
||||
response: () =>
|
||||
HttpResponse.json<APIErrorBody>({ message: 'Status unavailable' }, { status: 503 }),
|
||||
})
|
||||
const queryClient = new QueryClient()
|
||||
await expect(waitForPipelineStopped(queryClient, variables)).rejects.toMatchObject({
|
||||
message: 'Status unavailable',
|
||||
})
|
||||
expect(queryClient.getQueryCache().find({ queryKey: statusKey })?.getObserversCount()).toBe(0)
|
||||
queryClient.clear()
|
||||
})
|
||||
})
|
||||
@@ -1,17 +1,23 @@
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { queryOptions, useQuery } from '@tanstack/react-query'
|
||||
import { components } from 'api-types'
|
||||
|
||||
import { replicationKeys } from './keys'
|
||||
import { replicationPollingOptions } from './polling'
|
||||
import { get, handleError } from '@/data/fetchers'
|
||||
import type { ResponseError, UseCustomQueryOptions } from '@/types'
|
||||
|
||||
type ReplicationPipelineReplicationStatusParams = { projectRef?: string; pipelineId?: number }
|
||||
export type ReplicationPipelineReplicationStatusVariables = {
|
||||
projectRef?: string
|
||||
pipelineId?: number
|
||||
}
|
||||
|
||||
export type ReplicationPipelineReplicationStatusError = ResponseError
|
||||
|
||||
export type ReplicationPipelineTableStatus =
|
||||
components['schemas']['PipelineReplicationStatusResponse_Output']['table_statuses'][number]
|
||||
|
||||
async function fetchReplicationPipelineReplicationStatus(
|
||||
{ projectRef, pipelineId }: ReplicationPipelineReplicationStatusParams,
|
||||
{ projectRef, pipelineId }: ReplicationPipelineReplicationStatusVariables,
|
||||
signal?: AbortSignal
|
||||
) {
|
||||
if (!projectRef) throw new Error('projectRef is required')
|
||||
@@ -35,19 +41,43 @@ export type ReplicationPipelineReplicationStatusData = Awaited<
|
||||
ReturnType<typeof fetchReplicationPipelineReplicationStatus>
|
||||
>
|
||||
|
||||
export const useReplicationPipelineReplicationStatusQuery = <
|
||||
export const replicationPipelineReplicationStatusQueryOptions = <
|
||||
TData = ReplicationPipelineReplicationStatusData,
|
||||
>(
|
||||
{ projectRef, pipelineId }: ReplicationPipelineReplicationStatusParams,
|
||||
{
|
||||
enabled = true,
|
||||
...options
|
||||
}: UseCustomQueryOptions<ReplicationPipelineReplicationStatusData, ResponseError, TData> = {}
|
||||
) =>
|
||||
useQuery<ReplicationPipelineReplicationStatusData, ResponseError, TData>({
|
||||
>({
|
||||
projectRef,
|
||||
pipelineId,
|
||||
}: ReplicationPipelineReplicationStatusVariables) =>
|
||||
queryOptions<
|
||||
ReplicationPipelineReplicationStatusData,
|
||||
ReplicationPipelineReplicationStatusError,
|
||||
TData
|
||||
>({
|
||||
queryKey: replicationKeys.pipelinesReplicationStatus(projectRef, pipelineId),
|
||||
queryFn: ({ signal }) =>
|
||||
fetchReplicationPipelineReplicationStatus({ projectRef, pipelineId }, signal),
|
||||
enabled: enabled && typeof projectRef !== 'undefined' && typeof pipelineId !== 'undefined',
|
||||
...replicationPollingOptions,
|
||||
enabled: typeof projectRef !== 'undefined' && typeof pipelineId !== 'undefined',
|
||||
})
|
||||
|
||||
export const useReplicationPipelineReplicationStatusQuery = <
|
||||
TData = ReplicationPipelineReplicationStatusData,
|
||||
>(
|
||||
variables: ReplicationPipelineReplicationStatusVariables,
|
||||
options: UseCustomQueryOptions<
|
||||
ReplicationPipelineReplicationStatusData,
|
||||
ReplicationPipelineReplicationStatusError,
|
||||
TData
|
||||
> = {}
|
||||
) =>
|
||||
useQuery<
|
||||
ReplicationPipelineReplicationStatusData,
|
||||
ReplicationPipelineReplicationStatusError,
|
||||
TData
|
||||
>({
|
||||
...replicationPipelineReplicationStatusQueryOptions<TData>(variables),
|
||||
...options,
|
||||
enabled:
|
||||
options.enabled !== false &&
|
||||
typeof variables.projectRef !== 'undefined' &&
|
||||
typeof variables.pipelineId !== 'undefined',
|
||||
})
|
||||
@@ -1,11 +1,14 @@
|
||||
import { queryOptions, useQuery } from '@tanstack/react-query'
|
||||
import { QueryObserver, queryOptions, useQuery, type QueryClient } from '@tanstack/react-query'
|
||||
import { components } from 'api-types'
|
||||
|
||||
import { replicationKeys } from './keys'
|
||||
import { replicationPollingOptions } from './polling'
|
||||
import { get, handleError } from '@/data/fetchers'
|
||||
import type { ResponseError, UseCustomQueryOptions } from '@/types'
|
||||
|
||||
type ReplicationPipelinesStatusParams = { projectRef?: string; pipelineId?: number }
|
||||
|
||||
const PIPELINE_STOP_TIMEOUT_MS = 30_000
|
||||
export type ReplicationPipelineStatusResponse =
|
||||
components['schemas']['PipelineStatusResponse_Output']
|
||||
export type ReplicationPipelineStatus = ReplicationPipelineStatusResponse['status']['name']
|
||||
@@ -36,26 +39,55 @@ export type ReplicationPipelineStatusData = Awaited<
|
||||
* Shared definition so callers that need many pipeline statuses at once (`useQueries`) hit the
|
||||
* same cache entries as the per-pipeline hook below, rather than fetching each status twice.
|
||||
*/
|
||||
export const replicationPipelineStatusQueryOptions = ({
|
||||
export const replicationPipelineStatusQueryOptions = <TData = ReplicationPipelineStatusData>({
|
||||
projectRef,
|
||||
pipelineId,
|
||||
}: ReplicationPipelinesStatusParams) =>
|
||||
queryOptions<ReplicationPipelineStatusData, ResponseError>({
|
||||
queryOptions<ReplicationPipelineStatusData, ResponseError, TData>({
|
||||
queryKey: replicationKeys.pipelinesStatus(projectRef, pipelineId),
|
||||
queryFn: ({ signal }) => fetchReplicationPipelineStatus({ projectRef, pipelineId }, signal),
|
||||
...replicationPollingOptions,
|
||||
enabled: typeof projectRef !== 'undefined' && typeof pipelineId !== 'undefined',
|
||||
})
|
||||
|
||||
/** Shares the dashboard's status request while waiting for shutdown before deletion. */
|
||||
export function waitForPipelineStopped(
|
||||
queryClient: QueryClient,
|
||||
variables: ReplicationPipelinesStatusParams
|
||||
): Promise<void> {
|
||||
return new Promise((resolve, reject) => {
|
||||
const observer = new QueryObserver(queryClient, {
|
||||
...replicationPipelineStatusQueryOptions(variables),
|
||||
staleTime: 0,
|
||||
refetchIntervalInBackground: true,
|
||||
})
|
||||
const timer = setTimeout(() => {
|
||||
observer.destroy()
|
||||
reject(
|
||||
new Error('Pipeline is still stopping. Wait for it to stop, then try deleting it again.')
|
||||
)
|
||||
}, PIPELINE_STOP_TIMEOUT_MS)
|
||||
observer.subscribe((result) => {
|
||||
if (result.fetchStatus !== 'idle') return
|
||||
if (result.isError || result.data?.status.name === 'stopped') {
|
||||
clearTimeout(timer)
|
||||
observer.destroy()
|
||||
if (result.isError) reject(result.error)
|
||||
else resolve()
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
export const useReplicationPipelineStatusQuery = <TData = ReplicationPipelineStatusData>(
|
||||
{ projectRef, pipelineId }: ReplicationPipelinesStatusParams,
|
||||
{
|
||||
enabled = true,
|
||||
...options
|
||||
}: UseCustomQueryOptions<ReplicationPipelineStatusData, ResponseError, TData> = {}
|
||||
variables: ReplicationPipelinesStatusParams,
|
||||
options: UseCustomQueryOptions<ReplicationPipelineStatusData, ResponseError, TData> = {}
|
||||
) =>
|
||||
useQuery<ReplicationPipelineStatusData, ResponseError, TData>({
|
||||
queryKey: replicationKeys.pipelinesStatus(projectRef, pipelineId),
|
||||
queryFn: ({ signal }) => fetchReplicationPipelineStatus({ projectRef, pipelineId }, signal),
|
||||
enabled: enabled && typeof projectRef !== 'undefined' && typeof pipelineId !== 'undefined',
|
||||
...replicationPipelineStatusQueryOptions<TData>(variables),
|
||||
...options,
|
||||
enabled:
|
||||
options.enabled !== false &&
|
||||
typeof variables.projectRef !== 'undefined' &&
|
||||
typeof variables.pipelineId !== 'undefined',
|
||||
})
|
||||
@@ -0,0 +1,20 @@
|
||||
import type { FetchStatus } from '@tanstack/react-query'
|
||||
|
||||
import type { ResponseError } from '@/types'
|
||||
|
||||
// Restart the interval after a response. Slow endpoints never accumulate overlapping polls.
|
||||
export const replicationPollingOptions = {
|
||||
refetchInterval: ({
|
||||
state,
|
||||
}: {
|
||||
state: { fetchStatus: FetchStatus; error: ResponseError | null }
|
||||
}) => {
|
||||
if (state.fetchStatus === 'fetching') return false
|
||||
const retryAfter = state.error?.retryAfter
|
||||
if (retryAfter && retryAfter > 0) return Math.max(1_000, retryAfter * 1_000)
|
||||
if (state.error?.code && state.error.code >= 400) return 30_000
|
||||
return 5_000
|
||||
},
|
||||
refetchIntervalInBackground: false,
|
||||
retry: false,
|
||||
} as const
|
||||
@@ -46,21 +46,11 @@ export const useRestartPipelineMutation = ({
|
||||
async onSuccess(data, variables, context) {
|
||||
const { projectRef, pipelineId } = variables
|
||||
|
||||
await queryClient.invalidateQueries({
|
||||
queryKey: replicationKeys.pipelinesStatus(projectRef, pipelineId),
|
||||
})
|
||||
|
||||
// [Joshen] We're manually updating the query client here as the pipeline status is async
|
||||
// So setting it so starting while letting long poll update the actual status thereafter
|
||||
queryClient.setQueriesData(
|
||||
await queryClient.invalidateQueries(
|
||||
{
|
||||
queryKey: replicationKeys.pipelinesStatus(projectRef, pipelineId),
|
||||
exact: true,
|
||||
},
|
||||
(prev) => {
|
||||
if (!prev) return prev
|
||||
return { ...prev, status: { name: 'starting' } }
|
||||
}
|
||||
{ cancelRefetch: false }
|
||||
)
|
||||
|
||||
await onSuccess?.(data, variables, context)
|
||||
@@ -68,6 +58,13 @@ export const useRestartPipelineMutation = ({
|
||||
// No default error toast here: callers already show one from their try/catch around
|
||||
// mutateAsync, so a default here would double up. onError is only for opt-in callers.
|
||||
async onError(data, variables, context) {
|
||||
await queryClient.invalidateQueries(
|
||||
{
|
||||
queryKey: replicationKeys.pipelinesStatus(variables.projectRef, variables.pipelineId),
|
||||
},
|
||||
{ cancelRefetch: false }
|
||||
)
|
||||
|
||||
await onError?.(data, variables, context)
|
||||
},
|
||||
...options,
|
||||
|
||||
@@ -1,93 +1,39 @@
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query'
|
||||
import type { components } from 'api-types'
|
||||
import { toast } from 'sonner'
|
||||
|
||||
import { replicationKeys } from './keys'
|
||||
import { startPipeline } from './start-pipeline-mutation'
|
||||
import { stopPipeline } from './stop-pipeline-mutation'
|
||||
import { PipelineStatusName } from '@/components/interfaces/Database/Replication/Replication.constants'
|
||||
import { handleError, post } from '@/data/fetchers'
|
||||
import type { ResponseError, UseCustomMutationOptions } from '@/types'
|
||||
|
||||
export type RollbackType = 'individual' | 'full'
|
||||
|
||||
export type RollbackTablesTarget =
|
||||
| { type: 'single_table'; table_id: number }
|
||||
| { type: 'all_tables' }
|
||||
| { type: 'all_errored_tables' }
|
||||
export type RollbackTablesTarget = components['schemas']['RollbackTablesBody']['target']
|
||||
|
||||
type RollbackTablesParams = {
|
||||
projectRef: string
|
||||
pipelineId: number
|
||||
target: RollbackTablesTarget
|
||||
rollbackType: RollbackType
|
||||
pipelineStatusName?: PipelineStatusName
|
||||
}
|
||||
|
||||
type RolledBackTable = {
|
||||
table_id: number
|
||||
new_state: {
|
||||
name: string
|
||||
[key: string]: any
|
||||
}
|
||||
}
|
||||
|
||||
type RollbackTablesResponse = {
|
||||
pipeline_id: number
|
||||
tables: RolledBackTable[]
|
||||
}
|
||||
type RollbackTablesResponse = components['schemas']['RollbackTablesResponse_Output']
|
||||
|
||||
async function rollbackTables(
|
||||
{ projectRef, pipelineId, target, rollbackType, pipelineStatusName }: RollbackTablesParams,
|
||||
{ projectRef, pipelineId, target }: RollbackTablesParams,
|
||||
signal?: AbortSignal
|
||||
): Promise<RollbackTablesResponse> {
|
||||
if (!projectRef) throw new Error('Project reference is required')
|
||||
if (!pipelineId) throw new Error('Pipeline ID is required')
|
||||
if (!rollbackType) throw new Error('Rollback type is required')
|
||||
|
||||
const { data, error } = await post(
|
||||
'/platform/replication/{ref}/pipelines/{pipeline_id}/rollback-tables',
|
||||
{
|
||||
params: { path: { ref: projectRef, pipeline_id: pipelineId } },
|
||||
body: { target, rollback_type: rollbackType },
|
||||
// Production OpenAPI still includes the retired rollback_type field.
|
||||
body: { target } as components['schemas']['RollbackTablesBody'],
|
||||
signal,
|
||||
}
|
||||
)
|
||||
if (error) handleError(error)
|
||||
|
||||
// Logic for starting the pipeline back up after a successful rollback
|
||||
if (pipelineStatusName) {
|
||||
const shouldStartPipelineAfterRollback = [
|
||||
PipelineStatusName.STOPPED,
|
||||
PipelineStatusName.STARTED,
|
||||
PipelineStatusName.FAILED,
|
||||
].includes(pipelineStatusName)
|
||||
|
||||
try {
|
||||
if (pipelineStatusName === PipelineStatusName.STOPPED) {
|
||||
await startPipeline({ projectRef, pipelineId })
|
||||
} else if (
|
||||
pipelineStatusName === PipelineStatusName.STARTED ||
|
||||
pipelineStatusName === PipelineStatusName.FAILED
|
||||
) {
|
||||
await stopPipeline({ projectRef, pipelineId })
|
||||
await startPipeline({ projectRef, pipelineId })
|
||||
} else {
|
||||
// [Joshen] This error sounds misleading as though the rollback failed?
|
||||
throw new Error(
|
||||
`Cannot apply rollback while pipeline status is ${
|
||||
pipelineStatusName || 'unknown'
|
||||
}. Retry once the pipeline status is started, failed, or stopped.`
|
||||
)
|
||||
}
|
||||
} catch (error) {
|
||||
if (shouldStartPipelineAfterRollback) {
|
||||
throw new Error('RESTART_FAILED', { cause: error })
|
||||
} else {
|
||||
throw new Error('RESTART_SKIPPED')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return data
|
||||
}
|
||||
|
||||
@@ -108,30 +54,43 @@ export const useRollbackTablesMutation = ({
|
||||
async onSuccess(data, variables, context) {
|
||||
const { projectRef, pipelineId } = variables
|
||||
await Promise.all([
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: replicationKeys.pipelinesStatus(projectRef, pipelineId),
|
||||
}),
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: replicationKeys.pipelinesReplicationStatus(projectRef, pipelineId),
|
||||
}),
|
||||
queryClient.invalidateQueries(
|
||||
{
|
||||
queryKey: replicationKeys.pipelinesStatus(projectRef, pipelineId),
|
||||
},
|
||||
{ cancelRefetch: false }
|
||||
),
|
||||
queryClient.invalidateQueries(
|
||||
{
|
||||
queryKey: replicationKeys.pipelinesReplicationStatus(projectRef, pipelineId),
|
||||
},
|
||||
{ cancelRefetch: false }
|
||||
),
|
||||
])
|
||||
await onSuccess?.(data, variables, context)
|
||||
},
|
||||
async onError(data, variables, context) {
|
||||
// A reset can commit before runtime recreation fails. Refresh both views after errors.
|
||||
await Promise.all([
|
||||
queryClient.invalidateQueries(
|
||||
{
|
||||
queryKey: replicationKeys.pipelinesStatus(variables.projectRef, variables.pipelineId),
|
||||
},
|
||||
{ cancelRefetch: false }
|
||||
),
|
||||
queryClient.invalidateQueries(
|
||||
{
|
||||
queryKey: replicationKeys.pipelinesReplicationStatus(
|
||||
variables.projectRef,
|
||||
variables.pipelineId
|
||||
),
|
||||
},
|
||||
{ cancelRefetch: false }
|
||||
),
|
||||
])
|
||||
|
||||
if (onError === undefined) {
|
||||
if (data.message === 'RESTART_FAILED') {
|
||||
const cause = (data as Error).cause
|
||||
const causeMessage = cause instanceof Error ? cause.message : undefined
|
||||
toast.error(
|
||||
`Rollback completed, but failed to start the pipeline${causeMessage ? `: ${causeMessage}` : ''}`
|
||||
)
|
||||
} else if (data.message === 'RESTART_SKIPPED') {
|
||||
toast(
|
||||
'Rollback completed, but the pipeline state changed before it could be resumed. Refresh the page and try again.'
|
||||
)
|
||||
} else {
|
||||
toast.error(`Failed to rollback tables: ${data.message}`)
|
||||
}
|
||||
toast.error(`Failed to restart table replication: ${data.message}`)
|
||||
} else {
|
||||
onError(data, variables, context)
|
||||
}
|
||||
|
||||
@@ -44,26 +44,23 @@ export const useStartPipelineMutation = ({
|
||||
async onSuccess(data, variables, context) {
|
||||
const { projectRef, pipelineId } = variables
|
||||
|
||||
await queryClient.invalidateQueries({
|
||||
queryKey: replicationKeys.pipelinesStatus(projectRef, pipelineId),
|
||||
})
|
||||
|
||||
// [Joshen] We're manually updating the query client here as the pipeline status is async
|
||||
// So setting it so starting while letting long poll update the actual status thereafter
|
||||
queryClient.setQueriesData(
|
||||
await queryClient.invalidateQueries(
|
||||
{
|
||||
queryKey: replicationKeys.pipelinesStatus(projectRef, pipelineId),
|
||||
exact: true,
|
||||
},
|
||||
(prev) => {
|
||||
if (!prev) return prev
|
||||
return { ...prev, status: { name: 'starting' } }
|
||||
}
|
||||
{ cancelRefetch: false }
|
||||
)
|
||||
|
||||
await onSuccess?.(data, variables, context)
|
||||
},
|
||||
async onError(data, variables, context) {
|
||||
await queryClient.invalidateQueries(
|
||||
{
|
||||
queryKey: replicationKeys.pipelinesStatus(variables.projectRef, variables.pipelineId),
|
||||
},
|
||||
{ cancelRefetch: false }
|
||||
)
|
||||
|
||||
if (onError === undefined) {
|
||||
toast.error(`Failed to start pipeline: ${data.message}`)
|
||||
} else {
|
||||
|
||||
@@ -2,12 +2,14 @@ import { useMutation, useQueryClient } from '@tanstack/react-query'
|
||||
import { toast } from 'sonner'
|
||||
|
||||
import { replicationKeys } from './keys'
|
||||
import { waitForPipelineStopped } from './pipeline-status-query'
|
||||
import { handleError, post } from '@/data/fetchers'
|
||||
import type { ResponseError, UseCustomMutationOptions } from '@/types'
|
||||
|
||||
export type StopPipelineParams = {
|
||||
projectRef: string
|
||||
pipelineId: number
|
||||
waitUntilStopped?: boolean
|
||||
}
|
||||
|
||||
export async function stopPipeline(
|
||||
@@ -27,28 +29,42 @@ export async function stopPipeline(
|
||||
return data
|
||||
}
|
||||
|
||||
type StartPipelineData = Awaited<ReturnType<typeof stopPipeline>>
|
||||
type StopPipelineData = Awaited<ReturnType<typeof stopPipeline>>
|
||||
|
||||
export const useStopPipelineMutation = ({
|
||||
onSuccess,
|
||||
onError,
|
||||
...options
|
||||
}: Omit<
|
||||
UseCustomMutationOptions<StartPipelineData, ResponseError, StopPipelineParams>,
|
||||
UseCustomMutationOptions<StopPipelineData, ResponseError, StopPipelineParams>,
|
||||
'mutationFn'
|
||||
> = {}) => {
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
return useMutation<StartPipelineData, ResponseError, StopPipelineParams>({
|
||||
mutationFn: (vars) => stopPipeline(vars),
|
||||
return useMutation<StopPipelineData, ResponseError, StopPipelineParams>({
|
||||
mutationFn: async (variables) => {
|
||||
const data = await stopPipeline(variables)
|
||||
if (variables.waitUntilStopped) await waitForPipelineStopped(queryClient, variables)
|
||||
return data
|
||||
},
|
||||
async onSuccess(data, variables, context) {
|
||||
const { projectRef, pipelineId } = variables
|
||||
await queryClient.invalidateQueries({
|
||||
queryKey: replicationKeys.pipelinesStatus(projectRef, pipelineId),
|
||||
})
|
||||
await queryClient.invalidateQueries(
|
||||
{
|
||||
queryKey: replicationKeys.pipelinesStatus(projectRef, pipelineId),
|
||||
},
|
||||
{ cancelRefetch: false }
|
||||
)
|
||||
await onSuccess?.(data, variables, context)
|
||||
},
|
||||
async onError(data, variables, context) {
|
||||
await queryClient.invalidateQueries(
|
||||
{
|
||||
queryKey: replicationKeys.pipelinesStatus(variables.projectRef, variables.pipelineId),
|
||||
},
|
||||
{ cancelRefetch: false }
|
||||
)
|
||||
|
||||
if (onError === undefined) {
|
||||
toast.error(`Failed to stop pipeline: ${data.message}`)
|
||||
} else {
|
||||
|
||||
@@ -3,6 +3,7 @@ import { components } from 'api-types'
|
||||
import { toast } from 'sonner'
|
||||
|
||||
import { optionalSecret } from './destination-secret-utils'
|
||||
import { invalidateReplicationPipelineQueries } from './invalidate-pipeline-queries'
|
||||
import { replicationKeys } from './keys'
|
||||
import type {
|
||||
BigQueryDestinationConfig,
|
||||
@@ -228,24 +229,23 @@ export const useUpdateDestinationPipelineMutation = ({
|
||||
{
|
||||
mutationFn: (vars) => updateDestinationPipeline(vars),
|
||||
async onSuccess(data, variables, context) {
|
||||
const { projectRef, destinationId, pipelineId } = variables
|
||||
|
||||
const { projectRef } = variables
|
||||
// These prefixes include list, editor, pipeline status, and table metrics caches.
|
||||
await Promise.all([
|
||||
// Invalidate lists
|
||||
queryClient.invalidateQueries({ queryKey: replicationKeys.destinations(projectRef) }),
|
||||
queryClient.invalidateQueries({ queryKey: replicationKeys.pipelines(projectRef) }),
|
||||
// Invalidate item-level caches used by the editor panel
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: replicationKeys.destinationById(projectRef, destinationId),
|
||||
}),
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: replicationKeys.pipelineById(projectRef, pipelineId),
|
||||
}),
|
||||
invalidateReplicationPipelineQueries(queryClient, projectRef),
|
||||
])
|
||||
|
||||
await onSuccess?.(data, variables, context)
|
||||
},
|
||||
async onError(data, variables, context) {
|
||||
// Settings may commit before runtime recreation fails.
|
||||
await Promise.all([
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: replicationKeys.destinations(variables.projectRef),
|
||||
}),
|
||||
invalidateReplicationPipelineQueries(queryClient, variables.projectRef),
|
||||
])
|
||||
if (onError === undefined) {
|
||||
toast.error(`Failed to update destination or pipeline: ${data.message}`)
|
||||
} else {
|
||||
|
||||
@@ -9,6 +9,7 @@ type UpdatePipelineVersionParams = {
|
||||
projectRef: string
|
||||
pipelineId: number
|
||||
versionId: number
|
||||
skipStatusInvalidation?: boolean
|
||||
}
|
||||
|
||||
async function updatePipelineVersion(
|
||||
@@ -47,11 +48,20 @@ export const useUpdatePipelineVersionMutation = ({
|
||||
return useMutation<UpdatePipelineVersionData, ResponseError, UpdatePipelineVersionParams>({
|
||||
mutationFn: (vars) => updatePipelineVersion(vars),
|
||||
async onSuccess(data, variables, context) {
|
||||
const { projectRef, pipelineId } = variables
|
||||
// Ensure the version dot updates promptly
|
||||
await queryClient.invalidateQueries({
|
||||
queryKey: replicationKeys.pipelinesVersion(projectRef, pipelineId),
|
||||
})
|
||||
const { projectRef, pipelineId, skipStatusInvalidation = true } = variables
|
||||
await Promise.all([
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: replicationKeys.pipelinesVersion(projectRef, pipelineId),
|
||||
}),
|
||||
...(skipStatusInvalidation
|
||||
? []
|
||||
: [
|
||||
queryClient.invalidateQueries(
|
||||
{ queryKey: replicationKeys.pipelinesStatus(projectRef, pipelineId) },
|
||||
{ cancelRefetch: false }
|
||||
),
|
||||
]),
|
||||
])
|
||||
await onSuccess?.(data, variables, context)
|
||||
},
|
||||
async onError(error, variables, context) {
|
||||
|
||||
@@ -17,7 +17,7 @@ import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
|
||||
import DatabaseBackupsNav from '@/components/interfaces/Database/Backups/DatabaseBackupsNav'
|
||||
import { PITRNotice } from '@/components/interfaces/Database/Backups/PITR/PITRNotice'
|
||||
import { PITRSelection } from '@/components/interfaces/Database/Backups/PITR/PITRSelection'
|
||||
import DatabaseLayout from '@/components/layouts/DatabaseLayout/DatabaseLayout'
|
||||
import { DatabaseLayout } from '@/components/layouts/DatabaseLayout/DatabaseLayout'
|
||||
import { DefaultLayout } from '@/components/layouts/DefaultLayout'
|
||||
import { AlertError } from '@/components/ui/AlertError'
|
||||
import { DocsButton } from '@/components/ui/DocsButton'
|
||||
|
||||
@@ -11,7 +11,7 @@ import { PageSection, PageSectionContent } from 'ui-patterns/PageSection'
|
||||
|
||||
import DatabaseBackupsNav from '@/components/interfaces/Database/Backups/DatabaseBackupsNav'
|
||||
import { RestoreToNewProject } from '@/components/interfaces/Database/RestoreToNewProject/RestoreToNewProject'
|
||||
import DatabaseLayout from '@/components/layouts/DatabaseLayout/DatabaseLayout'
|
||||
import { DatabaseLayout } from '@/components/layouts/DatabaseLayout/DatabaseLayout'
|
||||
import { DefaultLayout } from '@/components/layouts/DefaultLayout'
|
||||
import { UnknownInterface } from '@/components/ui/UnknownInterface'
|
||||
import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
|
||||
|
||||
@@ -15,7 +15,7 @@ import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
|
||||
|
||||
import { BackupsList } from '@/components/interfaces/Database/Backups/BackupsList'
|
||||
import DatabaseBackupsNav from '@/components/interfaces/Database/Backups/DatabaseBackupsNav'
|
||||
import DatabaseLayout from '@/components/layouts/DatabaseLayout/DatabaseLayout'
|
||||
import { DatabaseLayout } from '@/components/layouts/DatabaseLayout/DatabaseLayout'
|
||||
import { DefaultLayout } from '@/components/layouts/DefaultLayout'
|
||||
import { AlertError } from '@/components/ui/AlertError'
|
||||
import { DocsButton } from '@/components/ui/DocsButton'
|
||||
|
||||
@@ -19,7 +19,7 @@ import {
|
||||
import PrivilegesHead from '@/components/interfaces/Database/Privileges/PrivilegesHead'
|
||||
import PrivilegesTable from '@/components/interfaces/Database/Privileges/PrivilegesTable'
|
||||
import { ProtectedSchemaWarning } from '@/components/interfaces/Database/ProtectedSchemaWarning'
|
||||
import DatabaseLayout from '@/components/layouts/DatabaseLayout/DatabaseLayout'
|
||||
import { DatabaseLayout } from '@/components/layouts/DatabaseLayout/DatabaseLayout'
|
||||
import { DefaultLayout } from '@/components/layouts/DefaultLayout'
|
||||
import { ScaffoldContainer, ScaffoldSection } from '@/components/layouts/Scaffold'
|
||||
import { AlertError } from '@/components/ui/AlertError'
|
||||
|
||||
@@ -11,7 +11,7 @@ import {
|
||||
import { PageSection, PageSectionContent } from 'ui-patterns/PageSection'
|
||||
|
||||
import { Extensions } from '@/components/interfaces/Database/Extensions/Extensions'
|
||||
import DatabaseLayout from '@/components/layouts/DatabaseLayout/DatabaseLayout'
|
||||
import { DatabaseLayout } from '@/components/layouts/DatabaseLayout/DatabaseLayout'
|
||||
import { DefaultLayout } from '@/components/layouts/DefaultLayout'
|
||||
import { DocsButton } from '@/components/ui/DocsButton'
|
||||
import { NoPermission } from '@/components/ui/NoPermission'
|
||||
|
||||
@@ -10,7 +10,7 @@ import {
|
||||
import { PageSection, PageSectionContent } from 'ui-patterns/PageSection'
|
||||
|
||||
import { FunctionsList } from '@/components/interfaces/Database/Functions/FunctionsList/FunctionsList'
|
||||
import DatabaseLayout from '@/components/layouts/DatabaseLayout/DatabaseLayout'
|
||||
import { DatabaseLayout } from '@/components/layouts/DatabaseLayout/DatabaseLayout'
|
||||
import { DefaultLayout } from '@/components/layouts/DefaultLayout'
|
||||
import { DocsButton } from '@/components/ui/DocsButton'
|
||||
import { NoPermission } from '@/components/ui/NoPermission'
|
||||
|
||||
@@ -12,7 +12,7 @@ import {
|
||||
import { PageSection, PageSectionContent } from 'ui-patterns/PageSection'
|
||||
|
||||
import { Indexes } from '@/components/interfaces/Database/Indexes/Indexes'
|
||||
import DatabaseLayout from '@/components/layouts/DatabaseLayout/DatabaseLayout'
|
||||
import { DatabaseLayout } from '@/components/layouts/DatabaseLayout/DatabaseLayout'
|
||||
import { DefaultLayout } from '@/components/layouts/DefaultLayout'
|
||||
import { DocsButton } from '@/components/ui/DocsButton'
|
||||
import { DOCS_URL } from '@/lib/constants'
|
||||
|
||||
@@ -10,7 +10,7 @@ import {
|
||||
import { PageSection, PageSectionContent } from 'ui-patterns/PageSection'
|
||||
|
||||
import { Migrations } from '@/components/interfaces/Database/Migrations/Migrations'
|
||||
import DatabaseLayout from '@/components/layouts/DatabaseLayout/DatabaseLayout'
|
||||
import { DatabaseLayout } from '@/components/layouts/DatabaseLayout/DatabaseLayout'
|
||||
import { DefaultLayout } from '@/components/layouts/DefaultLayout'
|
||||
import { DocsButton } from '@/components/ui/DocsButton'
|
||||
import { DOCS_URL } from '@/lib/constants'
|
||||
|
||||
@@ -29,7 +29,7 @@ import {
|
||||
generatePolicyUpdateSQL,
|
||||
type Policy,
|
||||
} from '@/components/interfaces/Database/Policies/PolicyTableRow/PolicyTableRow.utils'
|
||||
import DatabaseLayout from '@/components/layouts/DatabaseLayout/DatabaseLayout'
|
||||
import { DatabaseLayout } from '@/components/layouts/DatabaseLayout/DatabaseLayout'
|
||||
import { DefaultLayout } from '@/components/layouts/DefaultLayout'
|
||||
import { SIDEBAR_KEYS } from '@/components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
|
||||
import { getExposedSchemas } from '@/components/layouts/ProjectNeedsSecuring/ProjectNeedsSecuring.utils'
|
||||
|
||||
@@ -6,7 +6,7 @@ import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
|
||||
|
||||
import { PublicationsAvailability } from '@/components/interfaces/Database/Publications/PublicationsAvailability'
|
||||
import { PublicationsTables } from '@/components/interfaces/Database/Publications/PublicationsTables'
|
||||
import DatabaseLayout from '@/components/layouts/DatabaseLayout/DatabaseLayout'
|
||||
import { DatabaseLayout } from '@/components/layouts/DatabaseLayout/DatabaseLayout'
|
||||
import { DefaultLayout } from '@/components/layouts/DefaultLayout'
|
||||
import { PageLayout } from '@/components/layouts/PageLayout/PageLayout'
|
||||
import { NoPermission } from '@/components/ui/NoPermission'
|
||||
|
||||
@@ -4,7 +4,7 @@ import { PageSection } from 'ui-patterns/PageSection'
|
||||
|
||||
import { PublicationsAvailability } from '@/components/interfaces/Database/Publications/PublicationsAvailability'
|
||||
import { PublicationsList } from '@/components/interfaces/Database/Publications/PublicationsList'
|
||||
import DatabaseLayout from '@/components/layouts/DatabaseLayout/DatabaseLayout'
|
||||
import { DatabaseLayout } from '@/components/layouts/DatabaseLayout/DatabaseLayout'
|
||||
import { DefaultLayout } from '@/components/layouts/DefaultLayout'
|
||||
import { PageLayout } from '@/components/layouts/PageLayout/PageLayout'
|
||||
import { NoPermission } from '@/components/ui/NoPermission'
|
||||
|
||||
@@ -5,9 +5,8 @@ import { useContext, useEffect } from 'react'
|
||||
import { ReplicationPipelineLayout } from '@/components/interfaces/Database/Replication/ReplicationPipelineLayout'
|
||||
import { ReplicationPipelineStatus } from '@/components/interfaces/Database/Replication/ReplicationPipelineStatus/ReplicationPipelineStatus'
|
||||
import { useIsETLPrivateAlpha } from '@/components/interfaces/Database/Replication/useIsETLPrivateAlpha'
|
||||
import DatabaseLayout from '@/components/layouts/DatabaseLayout/DatabaseLayout'
|
||||
import { ReplicationLayout } from '@/components/layouts/DatabaseLayout/ReplicationLayout'
|
||||
import { DefaultLayout } from '@/components/layouts/DefaultLayout'
|
||||
import { PipelineRequestStatusProvider } from '@/state/replication-pipeline-request-status'
|
||||
import type { NextPageWithLayout } from '@/types'
|
||||
|
||||
const DatabaseReplicationPage: NextPageWithLayout = () => {
|
||||
@@ -25,11 +24,9 @@ const DatabaseReplicationPage: NextPageWithLayout = () => {
|
||||
return (
|
||||
<>
|
||||
{enablePgReplicate && (
|
||||
<PipelineRequestStatusProvider>
|
||||
<ReplicationPipelineLayout>
|
||||
<ReplicationPipelineStatus />
|
||||
</ReplicationPipelineLayout>
|
||||
</PipelineRequestStatusProvider>
|
||||
<ReplicationPipelineLayout>
|
||||
<ReplicationPipelineStatus />
|
||||
</ReplicationPipelineLayout>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
@@ -37,7 +34,7 @@ const DatabaseReplicationPage: NextPageWithLayout = () => {
|
||||
|
||||
DatabaseReplicationPage.getLayout = (page) => (
|
||||
<DefaultLayout>
|
||||
<DatabaseLayout title="Replication">{page}</DatabaseLayout>
|
||||
<ReplicationLayout>{page}</ReplicationLayout>
|
||||
</DefaultLayout>
|
||||
)
|
||||
|
||||
|
||||
@@ -17,7 +17,7 @@ import { Destinations } from '@/components/interfaces/Database/Replication/Desti
|
||||
import { PIPELINES_FEEDBACK_URL } from '@/components/interfaces/Database/Replication/Replication.constants'
|
||||
import { ReplicationDiagram } from '@/components/interfaces/Database/Replication/ReplicationDiagram'
|
||||
import { InstanceConfiguration } from '@/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/InstanceConfiguration'
|
||||
import DatabaseLayout from '@/components/layouts/DatabaseLayout/DatabaseLayout'
|
||||
import { ReplicationLayout } from '@/components/layouts/DatabaseLayout/ReplicationLayout'
|
||||
import { DefaultLayout } from '@/components/layouts/DefaultLayout'
|
||||
import { DocsButton } from '@/components/ui/DocsButton'
|
||||
import { UnknownInterface } from '@/components/ui/UnknownInterface'
|
||||
@@ -25,7 +25,6 @@ import { useHighAvailability } from '@/hooks/misc/useHighAvailability'
|
||||
import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
|
||||
import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
|
||||
import { DOCS_URL } from '@/lib/constants'
|
||||
import { PipelineRequestStatusProvider } from '@/state/replication-pipeline-request-status'
|
||||
import type { NextPageWithLayout } from '@/types'
|
||||
|
||||
const DatabaseReplicationPage: NextPageWithLayout = () => {
|
||||
@@ -63,7 +62,7 @@ const DatabaseReplicationPage: NextPageWithLayout = () => {
|
||||
}
|
||||
|
||||
return (
|
||||
<PipelineRequestStatusProvider>
|
||||
<>
|
||||
<PageHeader size="large">
|
||||
<PageHeaderMeta>
|
||||
<PageHeaderSummary>
|
||||
@@ -95,13 +94,13 @@ const DatabaseReplicationPage: NextPageWithLayout = () => {
|
||||
</PageSection>
|
||||
)}
|
||||
</PageContainer>
|
||||
</PipelineRequestStatusProvider>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
DatabaseReplicationPage.getLayout = (page) => (
|
||||
<DefaultLayout>
|
||||
<DatabaseLayout title="Replication">{page}</DatabaseLayout>
|
||||
<ReplicationLayout>{page}</ReplicationLayout>
|
||||
</DefaultLayout>
|
||||
)
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ import { useEffect } from 'react'
|
||||
import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
|
||||
|
||||
import { getReadReplicaPath } from '@/components/interfaces/Settings/Infrastructure/Infrastructure.utils'
|
||||
import DatabaseLayout from '@/components/layouts/DatabaseLayout/DatabaseLayout'
|
||||
import { ReplicationLayout } from '@/components/layouts/DatabaseLayout/ReplicationLayout'
|
||||
import { DefaultLayout } from '@/components/layouts/DefaultLayout'
|
||||
import type { NextPageWithLayout } from '@/types'
|
||||
|
||||
@@ -27,7 +27,7 @@ const DatabaseReadReplicaRedirectPage: NextPageWithLayout = () => {
|
||||
|
||||
DatabaseReadReplicaRedirectPage.getLayout = (page) => (
|
||||
<DefaultLayout>
|
||||
<DatabaseLayout title="Replication">{page}</DatabaseLayout>
|
||||
<ReplicationLayout>{page}</ReplicationLayout>
|
||||
</DefaultLayout>
|
||||
)
|
||||
|
||||
|
||||
@@ -10,7 +10,7 @@ import {
|
||||
import { PageSection, PageSectionContent } from 'ui-patterns/PageSection'
|
||||
|
||||
import { RolesList } from '@/components/interfaces/Database/Roles/RolesList'
|
||||
import DatabaseLayout from '@/components/layouts/DatabaseLayout/DatabaseLayout'
|
||||
import { DatabaseLayout } from '@/components/layouts/DatabaseLayout/DatabaseLayout'
|
||||
import { DefaultLayout } from '@/components/layouts/DefaultLayout'
|
||||
import { UnknownInterface } from '@/components/ui/UnknownInterface'
|
||||
import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { ReactFlowProvider } from '@xyflow/react'
|
||||
|
||||
import { SchemaGraph } from '@/components/interfaces/Database/Schemas/SchemaGraph'
|
||||
import DatabaseLayout from '@/components/layouts/DatabaseLayout/DatabaseLayout'
|
||||
import { DatabaseLayout } from '@/components/layouts/DatabaseLayout/DatabaseLayout'
|
||||
import { DefaultLayout } from '@/components/layouts/DefaultLayout'
|
||||
import type { NextPageWithLayout } from '@/types'
|
||||
|
||||
|
||||
@@ -22,7 +22,7 @@ import { NetworkRestrictions } from '@/components/interfaces/Settings/Database/N
|
||||
import { PoolingModesModal } from '@/components/interfaces/Settings/Database/PoolingModesModal'
|
||||
import { SettingsDatabaseEmptyStateLocal } from '@/components/interfaces/Settings/Database/SettingsDatabaseEmptyStateLocal'
|
||||
import { SSLConfiguration } from '@/components/interfaces/Settings/Database/SSLConfiguration'
|
||||
import DatabaseLayout from '@/components/layouts/DatabaseLayout/DatabaseLayout'
|
||||
import { DatabaseLayout } from '@/components/layouts/DatabaseLayout/DatabaseLayout'
|
||||
import { DefaultLayout } from '@/components/layouts/DefaultLayout'
|
||||
import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
|
||||
import { useIsAwsCloudProvider, useIsAwsK8sCloudProvider } from '@/hooks/misc/useSelectedProject'
|
||||
|
||||
@@ -6,7 +6,7 @@ import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
|
||||
import { ColumnList } from '@/components/interfaces/Database/Tables/ColumnList'
|
||||
import DeleteConfirmationDialogs from '@/components/interfaces/TableGridEditor/DeleteConfirmationDialogs'
|
||||
import { SidePanelEditor } from '@/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor'
|
||||
import DatabaseLayout from '@/components/layouts/DatabaseLayout/DatabaseLayout'
|
||||
import { DatabaseLayout } from '@/components/layouts/DatabaseLayout/DatabaseLayout'
|
||||
import { DefaultLayout } from '@/components/layouts/DefaultLayout'
|
||||
import { PageLayout } from '@/components/layouts/PageLayout/PageLayout'
|
||||
import { useTableEditorQuery } from '@/data/table-editor/table-editor-query'
|
||||
|
||||
@@ -6,7 +6,7 @@ import { PageSection, PageSectionContent } from 'ui-patterns/PageSection'
|
||||
import { TableList } from '@/components/interfaces/Database/Tables/TableList'
|
||||
import DeleteConfirmationDialogs from '@/components/interfaces/TableGridEditor/DeleteConfirmationDialogs'
|
||||
import { SidePanelEditor } from '@/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor'
|
||||
import DatabaseLayout from '@/components/layouts/DatabaseLayout/DatabaseLayout'
|
||||
import { DatabaseLayout } from '@/components/layouts/DatabaseLayout/DatabaseLayout'
|
||||
import { DefaultLayout } from '@/components/layouts/DefaultLayout'
|
||||
import { PageLayout } from '@/components/layouts/PageLayout/PageLayout'
|
||||
import { AutoEnableRLSNotice } from '@/components/ui/AutoEnableRLSNotice'
|
||||
|
||||
@@ -9,7 +9,7 @@ import {
|
||||
import { PageSection, PageSectionContent } from 'ui-patterns/PageSection'
|
||||
|
||||
import { EnumeratedTypes } from '@/components/interfaces/Database/EnumeratedTypes/EnumeratedTypes'
|
||||
import DatabaseLayout from '@/components/layouts/DatabaseLayout/DatabaseLayout'
|
||||
import { DatabaseLayout } from '@/components/layouts/DatabaseLayout/DatabaseLayout'
|
||||
import { DefaultLayout } from '@/components/layouts/DefaultLayout'
|
||||
import type { NextPageWithLayout } from '@/types'
|
||||
|
||||
|
||||
@@ -152,6 +152,7 @@ import { Route as ProjectRefDatabaseTriggersRouteImport } from './routes/project
|
||||
import { Route as ProjectRefDatabaseSettingsRouteImport } from './routes/project/$ref/database/settings'
|
||||
import { Route as ProjectRefDatabaseSchemasRouteImport } from './routes/project/$ref/database/schemas'
|
||||
import { Route as ProjectRefDatabaseRolesRouteImport } from './routes/project/$ref/database/roles'
|
||||
import { Route as ProjectRefDatabaseReplicationRouteImport } from './routes/project/$ref/database/replication'
|
||||
import { Route as ProjectRefDatabasePoliciesRouteImport } from './routes/project/$ref/database/policies'
|
||||
import { Route as ProjectRefDatabaseMigrationsRouteImport } from './routes/project/$ref/database/migrations'
|
||||
import { Route as ProjectRefDatabaseIndexesRouteImport } from './routes/project/$ref/database/indexes'
|
||||
@@ -1095,6 +1096,12 @@ const ProjectRefDatabaseRolesRoute = ProjectRefDatabaseRolesRouteImport.update({
|
||||
path: '/roles',
|
||||
getParentRoute: () => ProjectRefDatabaseRoute,
|
||||
} as any)
|
||||
const ProjectRefDatabaseReplicationRoute =
|
||||
ProjectRefDatabaseReplicationRouteImport.update({
|
||||
id: '/replication',
|
||||
path: '/replication',
|
||||
getParentRoute: () => ProjectRefDatabaseRoute,
|
||||
} as any)
|
||||
const ProjectRefDatabasePoliciesRoute =
|
||||
ProjectRefDatabasePoliciesRouteImport.update({
|
||||
id: '/policies',
|
||||
@@ -1459,9 +1466,9 @@ const ProjectRefDatabaseTablesIndexRoute =
|
||||
} as any)
|
||||
const ProjectRefDatabaseReplicationIndexRoute =
|
||||
ProjectRefDatabaseReplicationIndexRouteImport.update({
|
||||
id: '/replication/',
|
||||
path: '/replication/',
|
||||
getParentRoute: () => ProjectRefDatabaseRoute,
|
||||
id: '/',
|
||||
path: '/',
|
||||
getParentRoute: () => ProjectRefDatabaseReplicationRoute,
|
||||
} as any)
|
||||
const ProjectRefDatabasePublicationsIndexRoute =
|
||||
ProjectRefDatabasePublicationsIndexRouteImport.update({
|
||||
@@ -1608,9 +1615,9 @@ const ProjectRefDatabaseTablesIdRoute =
|
||||
} as any)
|
||||
const ProjectRefDatabaseReplicationPipelineIdRoute =
|
||||
ProjectRefDatabaseReplicationPipelineIdRouteImport.update({
|
||||
id: '/replication/$pipelineId',
|
||||
path: '/replication/$pipelineId',
|
||||
getParentRoute: () => ProjectRefDatabaseRoute,
|
||||
id: '/$pipelineId',
|
||||
path: '/$pipelineId',
|
||||
getParentRoute: () => ProjectRefDatabaseReplicationRoute,
|
||||
} as any)
|
||||
const ProjectRefDatabasePublicationsIdRoute =
|
||||
ProjectRefDatabasePublicationsIdRouteImport.update({
|
||||
@@ -1899,9 +1906,9 @@ const ProjectRefSettingsInfrastructureReplicaReplicaIdRoute =
|
||||
} as any)
|
||||
const ProjectRefDatabaseReplicationReplicaReplicaIdRoute =
|
||||
ProjectRefDatabaseReplicationReplicaReplicaIdRouteImport.update({
|
||||
id: '/replication/replica/$replicaId',
|
||||
path: '/replication/replica/$replicaId',
|
||||
getParentRoute: () => ProjectRefDatabaseRoute,
|
||||
id: '/replica/$replicaId',
|
||||
path: '/replica/$replicaId',
|
||||
getParentRoute: () => ProjectRefDatabaseReplicationRoute,
|
||||
} as any)
|
||||
const ApiV1ProjectsRefTypesTypescriptRoute =
|
||||
ApiV1ProjectsRefTypesTypescriptRouteImport.update({
|
||||
@@ -2257,6 +2264,7 @@ export interface FileRoutesByFullPath {
|
||||
'/project/$ref/database/indexes': typeof ProjectRefDatabaseIndexesRoute
|
||||
'/project/$ref/database/migrations': typeof ProjectRefDatabaseMigrationsRoute
|
||||
'/project/$ref/database/policies': typeof ProjectRefDatabasePoliciesRoute
|
||||
'/project/$ref/database/replication': typeof ProjectRefDatabaseReplicationRouteWithChildren
|
||||
'/project/$ref/database/roles': typeof ProjectRefDatabaseRolesRoute
|
||||
'/project/$ref/database/schemas': typeof ProjectRefDatabaseSchemasRoute
|
||||
'/project/$ref/database/settings': typeof ProjectRefDatabaseSettingsRoute
|
||||
@@ -2888,6 +2896,7 @@ export interface FileRoutesById {
|
||||
'/project/$ref/database/indexes': typeof ProjectRefDatabaseIndexesRoute
|
||||
'/project/$ref/database/migrations': typeof ProjectRefDatabaseMigrationsRoute
|
||||
'/project/$ref/database/policies': typeof ProjectRefDatabasePoliciesRoute
|
||||
'/project/$ref/database/replication': typeof ProjectRefDatabaseReplicationRouteWithChildren
|
||||
'/project/$ref/database/roles': typeof ProjectRefDatabaseRolesRoute
|
||||
'/project/$ref/database/schemas': typeof ProjectRefDatabaseSchemasRoute
|
||||
'/project/$ref/database/settings': typeof ProjectRefDatabaseSettingsRoute
|
||||
@@ -3211,6 +3220,7 @@ export interface FileRouteTypes {
|
||||
| '/project/$ref/database/indexes'
|
||||
| '/project/$ref/database/migrations'
|
||||
| '/project/$ref/database/policies'
|
||||
| '/project/$ref/database/replication'
|
||||
| '/project/$ref/database/roles'
|
||||
| '/project/$ref/database/schemas'
|
||||
| '/project/$ref/database/settings'
|
||||
@@ -3841,6 +3851,7 @@ export interface FileRouteTypes {
|
||||
| '/project/$ref/database/indexes'
|
||||
| '/project/$ref/database/migrations'
|
||||
| '/project/$ref/database/policies'
|
||||
| '/project/$ref/database/replication'
|
||||
| '/project/$ref/database/roles'
|
||||
| '/project/$ref/database/schemas'
|
||||
| '/project/$ref/database/settings'
|
||||
@@ -5160,6 +5171,13 @@ declare module '@tanstack/react-router' {
|
||||
preLoaderRoute: typeof ProjectRefDatabaseRolesRouteImport
|
||||
parentRoute: typeof ProjectRefDatabaseRoute
|
||||
}
|
||||
'/project/$ref/database/replication': {
|
||||
id: '/project/$ref/database/replication'
|
||||
path: '/replication'
|
||||
fullPath: '/project/$ref/database/replication'
|
||||
preLoaderRoute: typeof ProjectRefDatabaseReplicationRouteImport
|
||||
parentRoute: typeof ProjectRefDatabaseRoute
|
||||
}
|
||||
'/project/$ref/database/policies': {
|
||||
id: '/project/$ref/database/policies'
|
||||
path: '/policies'
|
||||
@@ -5624,10 +5642,10 @@ declare module '@tanstack/react-router' {
|
||||
}
|
||||
'/project/$ref/database/replication/': {
|
||||
id: '/project/$ref/database/replication/'
|
||||
path: '/replication'
|
||||
path: '/'
|
||||
fullPath: '/project/$ref/database/replication/'
|
||||
preLoaderRoute: typeof ProjectRefDatabaseReplicationIndexRouteImport
|
||||
parentRoute: typeof ProjectRefDatabaseRoute
|
||||
parentRoute: typeof ProjectRefDatabaseReplicationRoute
|
||||
}
|
||||
'/project/$ref/database/publications/': {
|
||||
id: '/project/$ref/database/publications/'
|
||||
@@ -5799,10 +5817,10 @@ declare module '@tanstack/react-router' {
|
||||
}
|
||||
'/project/$ref/database/replication/$pipelineId': {
|
||||
id: '/project/$ref/database/replication/$pipelineId'
|
||||
path: '/replication/$pipelineId'
|
||||
path: '/$pipelineId'
|
||||
fullPath: '/project/$ref/database/replication/$pipelineId'
|
||||
preLoaderRoute: typeof ProjectRefDatabaseReplicationPipelineIdRouteImport
|
||||
parentRoute: typeof ProjectRefDatabaseRoute
|
||||
parentRoute: typeof ProjectRefDatabaseReplicationRoute
|
||||
}
|
||||
'/project/$ref/database/publications/$id': {
|
||||
id: '/project/$ref/database/publications/$id'
|
||||
@@ -6142,10 +6160,10 @@ declare module '@tanstack/react-router' {
|
||||
}
|
||||
'/project/$ref/database/replication/replica/$replicaId': {
|
||||
id: '/project/$ref/database/replication/replica/$replicaId'
|
||||
path: '/replication/replica/$replicaId'
|
||||
path: '/replica/$replicaId'
|
||||
fullPath: '/project/$ref/database/replication/replica/$replicaId'
|
||||
preLoaderRoute: typeof ProjectRefDatabaseReplicationReplicaReplicaIdRouteImport
|
||||
parentRoute: typeof ProjectRefDatabaseRoute
|
||||
parentRoute: typeof ProjectRefDatabaseReplicationRoute
|
||||
}
|
||||
'/api/v1/projects/$ref/types/typescript': {
|
||||
id: '/api/v1/projects/$ref/types/typescript'
|
||||
@@ -6655,6 +6673,27 @@ const ProjectRefComputeRouteChildren: ProjectRefComputeRouteChildren = {
|
||||
const ProjectRefComputeRouteWithChildren =
|
||||
ProjectRefComputeRoute._addFileChildren(ProjectRefComputeRouteChildren)
|
||||
|
||||
interface ProjectRefDatabaseReplicationRouteChildren {
|
||||
ProjectRefDatabaseReplicationPipelineIdRoute: typeof ProjectRefDatabaseReplicationPipelineIdRoute
|
||||
ProjectRefDatabaseReplicationIndexRoute: typeof ProjectRefDatabaseReplicationIndexRoute
|
||||
ProjectRefDatabaseReplicationReplicaReplicaIdRoute: typeof ProjectRefDatabaseReplicationReplicaReplicaIdRoute
|
||||
}
|
||||
|
||||
const ProjectRefDatabaseReplicationRouteChildren: ProjectRefDatabaseReplicationRouteChildren =
|
||||
{
|
||||
ProjectRefDatabaseReplicationPipelineIdRoute:
|
||||
ProjectRefDatabaseReplicationPipelineIdRoute,
|
||||
ProjectRefDatabaseReplicationIndexRoute:
|
||||
ProjectRefDatabaseReplicationIndexRoute,
|
||||
ProjectRefDatabaseReplicationReplicaReplicaIdRoute:
|
||||
ProjectRefDatabaseReplicationReplicaReplicaIdRoute,
|
||||
}
|
||||
|
||||
const ProjectRefDatabaseReplicationRouteWithChildren =
|
||||
ProjectRefDatabaseReplicationRoute._addFileChildren(
|
||||
ProjectRefDatabaseReplicationRouteChildren,
|
||||
)
|
||||
|
||||
interface ProjectRefDatabaseTriggersRouteChildren {
|
||||
ProjectRefDatabaseTriggersDataRoute: typeof ProjectRefDatabaseTriggersDataRoute
|
||||
ProjectRefDatabaseTriggersEventRoute: typeof ProjectRefDatabaseTriggersEventRoute
|
||||
@@ -6680,6 +6719,7 @@ interface ProjectRefDatabaseRouteChildren {
|
||||
ProjectRefDatabaseIndexesRoute: typeof ProjectRefDatabaseIndexesRoute
|
||||
ProjectRefDatabaseMigrationsRoute: typeof ProjectRefDatabaseMigrationsRoute
|
||||
ProjectRefDatabasePoliciesRoute: typeof ProjectRefDatabasePoliciesRoute
|
||||
ProjectRefDatabaseReplicationRoute: typeof ProjectRefDatabaseReplicationRouteWithChildren
|
||||
ProjectRefDatabaseRolesRoute: typeof ProjectRefDatabaseRolesRoute
|
||||
ProjectRefDatabaseSchemasRoute: typeof ProjectRefDatabaseSchemasRoute
|
||||
ProjectRefDatabaseSettingsRoute: typeof ProjectRefDatabaseSettingsRoute
|
||||
@@ -6689,12 +6729,9 @@ interface ProjectRefDatabaseRouteChildren {
|
||||
ProjectRefDatabaseBackupsRestoreToNewProjectRoute: typeof ProjectRefDatabaseBackupsRestoreToNewProjectRoute
|
||||
ProjectRefDatabaseBackupsScheduledRoute: typeof ProjectRefDatabaseBackupsScheduledRoute
|
||||
ProjectRefDatabasePublicationsIdRoute: typeof ProjectRefDatabasePublicationsIdRoute
|
||||
ProjectRefDatabaseReplicationPipelineIdRoute: typeof ProjectRefDatabaseReplicationPipelineIdRoute
|
||||
ProjectRefDatabaseTablesIdRoute: typeof ProjectRefDatabaseTablesIdRoute
|
||||
ProjectRefDatabasePublicationsIndexRoute: typeof ProjectRefDatabasePublicationsIndexRoute
|
||||
ProjectRefDatabaseReplicationIndexRoute: typeof ProjectRefDatabaseReplicationIndexRoute
|
||||
ProjectRefDatabaseTablesIndexRoute: typeof ProjectRefDatabaseTablesIndexRoute
|
||||
ProjectRefDatabaseReplicationReplicaReplicaIdRoute: typeof ProjectRefDatabaseReplicationReplicaReplicaIdRoute
|
||||
}
|
||||
|
||||
const ProjectRefDatabaseRouteChildren: ProjectRefDatabaseRouteChildren = {
|
||||
@@ -6705,6 +6742,8 @@ const ProjectRefDatabaseRouteChildren: ProjectRefDatabaseRouteChildren = {
|
||||
ProjectRefDatabaseIndexesRoute: ProjectRefDatabaseIndexesRoute,
|
||||
ProjectRefDatabaseMigrationsRoute: ProjectRefDatabaseMigrationsRoute,
|
||||
ProjectRefDatabasePoliciesRoute: ProjectRefDatabasePoliciesRoute,
|
||||
ProjectRefDatabaseReplicationRoute:
|
||||
ProjectRefDatabaseReplicationRouteWithChildren,
|
||||
ProjectRefDatabaseRolesRoute: ProjectRefDatabaseRolesRoute,
|
||||
ProjectRefDatabaseSchemasRoute: ProjectRefDatabaseSchemasRoute,
|
||||
ProjectRefDatabaseSettingsRoute: ProjectRefDatabaseSettingsRoute,
|
||||
@@ -6716,16 +6755,10 @@ const ProjectRefDatabaseRouteChildren: ProjectRefDatabaseRouteChildren = {
|
||||
ProjectRefDatabaseBackupsScheduledRoute:
|
||||
ProjectRefDatabaseBackupsScheduledRoute,
|
||||
ProjectRefDatabasePublicationsIdRoute: ProjectRefDatabasePublicationsIdRoute,
|
||||
ProjectRefDatabaseReplicationPipelineIdRoute:
|
||||
ProjectRefDatabaseReplicationPipelineIdRoute,
|
||||
ProjectRefDatabaseTablesIdRoute: ProjectRefDatabaseTablesIdRoute,
|
||||
ProjectRefDatabasePublicationsIndexRoute:
|
||||
ProjectRefDatabasePublicationsIndexRoute,
|
||||
ProjectRefDatabaseReplicationIndexRoute:
|
||||
ProjectRefDatabaseReplicationIndexRoute,
|
||||
ProjectRefDatabaseTablesIndexRoute: ProjectRefDatabaseTablesIndexRoute,
|
||||
ProjectRefDatabaseReplicationReplicaReplicaIdRoute:
|
||||
ProjectRefDatabaseReplicationReplicaReplicaIdRoute,
|
||||
}
|
||||
|
||||
const ProjectRefDatabaseRouteWithChildren =
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { createFileRoute, Outlet, useMatches } from '@tanstack/react-router'
|
||||
|
||||
import DatabaseLayout from '@/components/layouts/DatabaseLayout/DatabaseLayout'
|
||||
import { DatabaseLayout } from '@/components/layouts/DatabaseLayout/DatabaseLayout'
|
||||
|
||||
export const Route = createFileRoute('/project/$ref/database')({
|
||||
component: DatabaseShell,
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
import { createFileRoute, Outlet } from '@tanstack/react-router'
|
||||
import { useParams } from 'common'
|
||||
|
||||
import { PipelineRequestStatusProvider } from '@/state/replication-pipeline-request-status'
|
||||
|
||||
export const Route = createFileRoute('/project/$ref/database/replication')({
|
||||
component: ReplicationShell,
|
||||
staticData: {
|
||||
databaseLayoutTitle: 'Replication',
|
||||
},
|
||||
})
|
||||
|
||||
function ReplicationShell() {
|
||||
const { ref: projectRef } = useParams()
|
||||
|
||||
return (
|
||||
<PipelineRequestStatusProvider key={projectRef}>
|
||||
<Outlet />
|
||||
</PipelineRequestStatusProvider>
|
||||
)
|
||||
}
|
||||
@@ -4,9 +4,6 @@ import DatabaseReplicationPage from '@/pages/project/[ref]/database/replication/
|
||||
|
||||
export const Route = createFileRoute('/project/$ref/database/replication/$pipelineId')({
|
||||
component: DatabaseReplicationPipelineRoute,
|
||||
staticData: {
|
||||
databaseLayoutTitle: 'Replication',
|
||||
},
|
||||
})
|
||||
|
||||
function DatabaseReplicationPipelineRoute() {
|
||||
|
||||
@@ -4,9 +4,6 @@ import DatabaseReplicationPage from '@/pages/project/[ref]/database/replication/
|
||||
|
||||
export const Route = createFileRoute('/project/$ref/database/replication/')({
|
||||
component: DatabaseReplicationIndexRoute,
|
||||
staticData: {
|
||||
databaseLayoutTitle: 'Replication',
|
||||
},
|
||||
})
|
||||
|
||||
function DatabaseReplicationIndexRoute() {
|
||||
|
||||
@@ -4,9 +4,6 @@ import DatabaseReadReplicaRedirectPage from '@/pages/project/[ref]/database/repl
|
||||
|
||||
export const Route = createFileRoute('/project/$ref/database/replication/replica/$replicaId')({
|
||||
component: DatabaseReplicationReplicaRoute,
|
||||
staticData: {
|
||||
databaseLayoutTitle: 'Replication',
|
||||
},
|
||||
})
|
||||
|
||||
function DatabaseReplicationReplicaRoute() {
|
||||
|
||||
@@ -0,0 +1,195 @@
|
||||
import { QueryClient } from '@tanstack/react-query'
|
||||
import { act, renderHook, waitFor } from '@testing-library/react'
|
||||
import { HttpResponse } from 'msw'
|
||||
import { describe, expect, test } from 'vitest'
|
||||
|
||||
import {
|
||||
PipelineRequestStatusProvider,
|
||||
PipelineStatusRequestStatus as Status,
|
||||
usePipelineRequestStatus,
|
||||
} from './replication-pipeline-request-status'
|
||||
import {
|
||||
replicationPipelineStatusQueryOptions,
|
||||
type ReplicationPipelineStatusResponse,
|
||||
} from '@/data/replication/pipeline-status-query'
|
||||
import { CustomWrapper } from '@/tests/lib/custom-render'
|
||||
import { addAPIMock, type APIErrorBody } from '@/tests/lib/msw'
|
||||
|
||||
const setup = (initialStatus: ReplicationPipelineStatusResponse['status']['name'] = 'started') => {
|
||||
addAPIMock({
|
||||
method: 'get',
|
||||
path: '/platform/replication/:ref/pipelines/:pipeline_id/status',
|
||||
response: () =>
|
||||
HttpResponse.json<ReplicationPipelineStatusResponse>({
|
||||
pipeline_id: 1,
|
||||
status: { name: initialStatus },
|
||||
}),
|
||||
})
|
||||
const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } })
|
||||
const options = replicationPipelineStatusQueryOptions({ projectRef: 'default', pipelineId: 1 })
|
||||
queryClient.setQueryData(options.queryKey, { pipeline_id: 1, status: { name: initialStatus } })
|
||||
const hook = renderHook(usePipelineRequestStatus, {
|
||||
wrapper: ({ children }) => (
|
||||
<CustomWrapper queryClient={queryClient}>
|
||||
<PipelineRequestStatusProvider>{children}</PipelineRequestStatusProvider>
|
||||
</CustomWrapper>
|
||||
),
|
||||
})
|
||||
const refresh = async (name: ReplicationPipelineStatusResponse['status']['name']) => {
|
||||
addAPIMock({
|
||||
method: 'get',
|
||||
path: '/platform/replication/:ref/pipelines/:pipeline_id/status',
|
||||
response: () =>
|
||||
HttpResponse.json<ReplicationPipelineStatusResponse>({ pipeline_id: 1, status: { name } }),
|
||||
})
|
||||
await act(async () => {
|
||||
await queryClient.fetchQuery(options)
|
||||
})
|
||||
}
|
||||
return { ...hook, queryClient, refresh }
|
||||
}
|
||||
|
||||
const deferred = () => {
|
||||
let resolve = () => {}
|
||||
const promise = new Promise<void>((complete) => {
|
||||
resolve = complete
|
||||
})
|
||||
return { promise, resolve }
|
||||
}
|
||||
|
||||
describe('pipeline request state', () => {
|
||||
test.each(['started', 'stopping', 'stopped', 'starting', 'failed', 'unknown'] as const)(
|
||||
'keeps feedback during the operation, then accepts a fresh status: %s',
|
||||
async (backendStatus) => {
|
||||
const { result, refresh } = setup()
|
||||
const action = deferred()
|
||||
let operation: Promise<void>
|
||||
act(() => {
|
||||
operation = result.current.runWithRequestStatus(
|
||||
1,
|
||||
Status.StopRequested,
|
||||
() => action.promise
|
||||
)
|
||||
})
|
||||
expect(result.current.getRequestStatus(1)).toBe(Status.StopRequested)
|
||||
await refresh(backendStatus)
|
||||
expect(result.current.getRequestStatus(1)).toBe(Status.StopRequested)
|
||||
// A read during the operation cannot acknowledge that the operation has completed.
|
||||
expect(result.current.isRequestPending(1)).toBe(true)
|
||||
await act(async () => {
|
||||
action.resolve()
|
||||
await operation
|
||||
})
|
||||
expect(result.current.isRequestPending(1)).toBe(false)
|
||||
expect(result.current.getRequestStatus(1)).toBe(Status.None)
|
||||
}
|
||||
)
|
||||
|
||||
test('waits for an older in-flight read, then fetches afresh without overlapping requests', async () => {
|
||||
const { result, queryClient } = setup()
|
||||
const action = deferred()
|
||||
const oldRead = deferred()
|
||||
const freshRead = deferred()
|
||||
let reads = 0
|
||||
let activeReads = 0
|
||||
let maxActiveReads = 0
|
||||
addAPIMock({
|
||||
method: 'get',
|
||||
path: '/platform/replication/:ref/pipelines/:pipeline_id/status',
|
||||
response: async () => {
|
||||
reads += 1
|
||||
activeReads += 1
|
||||
maxActiveReads = Math.max(maxActiveReads, activeReads)
|
||||
const isOldRead = reads === 1
|
||||
await (isOldRead ? oldRead.promise : freshRead.promise)
|
||||
activeReads -= 1
|
||||
return HttpResponse.json<ReplicationPipelineStatusResponse>({
|
||||
pipeline_id: 1,
|
||||
status: { name: isOldRead ? 'started' : 'starting' },
|
||||
})
|
||||
},
|
||||
})
|
||||
const options = replicationPipelineStatusQueryOptions({ projectRef: 'default', pipelineId: 1 })
|
||||
const oldFetch = queryClient.fetchQuery(options)
|
||||
await waitFor(() => expect(reads).toBe(1))
|
||||
let operation: Promise<void>
|
||||
act(() => {
|
||||
operation = result.current.runWithRequestStatus(1, Status.StopRequested, () => action.promise)
|
||||
})
|
||||
await act(async () => {
|
||||
action.resolve()
|
||||
})
|
||||
expect(reads).toBe(1)
|
||||
expect(result.current.getRequestStatus(1)).toBe(Status.StopRequested)
|
||||
await act(async () => {
|
||||
oldRead.resolve()
|
||||
await oldFetch
|
||||
})
|
||||
await waitFor(() => expect(reads).toBe(2))
|
||||
expect(result.current.getRequestStatus(1)).toBe(Status.StopRequested)
|
||||
await act(async () => {
|
||||
freshRead.resolve()
|
||||
await operation
|
||||
})
|
||||
expect(result.current.getRequestStatus(1)).toBe(Status.None)
|
||||
expect(queryClient.getQueryData(options.queryKey)?.status.name).toBe('starting')
|
||||
expect(maxActiveReads).toBe(1)
|
||||
})
|
||||
|
||||
test('keeps a stopped pipeline unchanged while guarding its table reset', async () => {
|
||||
const { result } = setup('stopped')
|
||||
const action = deferred()
|
||||
let operation: Promise<void>
|
||||
act(() => {
|
||||
operation = result.current.runWithRequestStatus(1, Status.None, () => action.promise)
|
||||
})
|
||||
expect(result.current.getRequestStatus(1)).toBe(Status.None)
|
||||
expect(result.current.isRequestPending(1)).toBe(true)
|
||||
await act(async () => {
|
||||
action.resolve()
|
||||
await operation
|
||||
})
|
||||
expect(result.current.isRequestPending(1)).toBe(false)
|
||||
})
|
||||
|
||||
test('preserves the operation error even when refreshing status also fails', async () => {
|
||||
const { result } = setup()
|
||||
addAPIMock({
|
||||
method: 'get',
|
||||
path: '/platform/replication/:ref/pipelines/:pipeline_id/status',
|
||||
response: () =>
|
||||
HttpResponse.json<APIErrorBody>({ message: 'Status unavailable' }, { status: 503 }),
|
||||
})
|
||||
await act(async () => {
|
||||
await expect(
|
||||
result.current.runWithRequestStatus(1, Status.StopRequested, async () => {
|
||||
throw new Error('Stop failed')
|
||||
})
|
||||
).rejects.toThrow('Stop failed')
|
||||
})
|
||||
expect(result.current.getRequestStatus(1)).toBe(Status.None)
|
||||
expect(result.current.isRequestPending(1)).toBe(false)
|
||||
})
|
||||
|
||||
test('an older action settling cannot clear a newer pending action', async () => {
|
||||
const { result } = setup()
|
||||
const older = deferred()
|
||||
const newer = deferred()
|
||||
let first: Promise<void>
|
||||
let second: Promise<void>
|
||||
act(() => {
|
||||
first = result.current.runWithRequestStatus(1, Status.StopRequested, () => older.promise)
|
||||
second = result.current.runWithRequestStatus(1, Status.StartRequested, () => newer.promise)
|
||||
})
|
||||
await act(async () => {
|
||||
older.resolve()
|
||||
await first
|
||||
})
|
||||
expect(result.current.getRequestStatus(1)).toBe(Status.StartRequested)
|
||||
expect(result.current.isRequestPending(1)).toBe(true)
|
||||
await act(async () => {
|
||||
newer.resolve()
|
||||
await second
|
||||
})
|
||||
})
|
||||
})
|
||||
@@ -1,150 +1,80 @@
|
||||
import {
|
||||
createContext,
|
||||
ReactNode,
|
||||
useCallback,
|
||||
useContext,
|
||||
useEffect,
|
||||
useRef,
|
||||
useState,
|
||||
} from 'react'
|
||||
import { useQueryClient } from '@tanstack/react-query'
|
||||
import { useParams } from 'common'
|
||||
import { createContext, useContext, useState, type ReactNode } from 'react'
|
||||
|
||||
import { replicationPipelineStatusQueryOptions } from '@/data/replication/pipeline-status-query'
|
||||
|
||||
export enum PipelineStatusRequestStatus {
|
||||
None = 'None',
|
||||
StartRequested = 'StartRequested',
|
||||
StopRequested = 'StopRequested',
|
||||
RestartRequested = 'RestartRequested',
|
||||
}
|
||||
|
||||
type PipelineRequest = {
|
||||
id: symbol
|
||||
status: PipelineStatusRequestStatus
|
||||
}
|
||||
|
||||
interface PipelineRequestStatusContextType {
|
||||
requestStatus: Record<number, PipelineStatusRequestStatus>
|
||||
pipelineStatusSnapshot: Record<number, string | undefined>
|
||||
setRequestStatus: (
|
||||
getRequestStatus: (pipelineId: number) => PipelineStatusRequestStatus
|
||||
isRequestPending: (pipelineId: number) => boolean
|
||||
runWithRequestStatus: <T>(
|
||||
pipelineId: number,
|
||||
status: PipelineStatusRequestStatus,
|
||||
snapshotStatus?: string
|
||||
) => void
|
||||
getRequestStatus: (pipelineId: number) => PipelineStatusRequestStatus
|
||||
setTableResetting: (pipelineId: number, isResetting: boolean) => void
|
||||
getIsTableResetting: (pipelineId: number) => boolean
|
||||
updatePipelineStatus: (pipelineId: number, backendStatus: string | undefined) => void
|
||||
}
|
||||
|
||||
interface PipelineRequestStatusProviderProps {
|
||||
children: ReactNode
|
||||
action: () => Promise<T>
|
||||
) => Promise<T>
|
||||
}
|
||||
|
||||
const PipelineRequestStatusContext = createContext<PipelineRequestStatusContextType | undefined>(
|
||||
undefined
|
||||
)
|
||||
|
||||
// [Joshen] Leaving a comment for future investigation
|
||||
// Do we need this? Afaict the status is getting returned from the API so we might not need
|
||||
// to track the pipeline status on the client side
|
||||
export const PipelineRequestStatusProvider = ({ children }: PipelineRequestStatusProviderProps) => {
|
||||
const [requestStatus, setRequestStatusState] = useState<
|
||||
Record<number, PipelineStatusRequestStatus>
|
||||
>({})
|
||||
const [pipelineStatusSnapshot, setPipelineStatusSnapshot] = useState<
|
||||
Record<number, string | undefined>
|
||||
>({})
|
||||
const [tableResetStatus, setTableResetStatus] = useState<Record<number, boolean>>({})
|
||||
const timeoutsRef = useRef<Record<number, number>>({})
|
||||
const REQUEST_TIMEOUT_MS = 10_000
|
||||
export const PipelineRequestStatusProvider = ({ children }: { children: ReactNode }) => {
|
||||
const { ref: projectRef } = useParams()
|
||||
const queryClient = useQueryClient()
|
||||
const [requests, setRequests] = useState<Record<number, PipelineRequest>>({})
|
||||
|
||||
const setRequestStatus = (
|
||||
pipelineId: number,
|
||||
status: PipelineStatusRequestStatus,
|
||||
snapshotStatus?: string
|
||||
const runWithRequestStatus: PipelineRequestStatusContextType['runWithRequestStatus'] = async (
|
||||
pipelineId,
|
||||
status,
|
||||
action
|
||||
) => {
|
||||
setRequestStatusState((prev) => ({
|
||||
...prev,
|
||||
[pipelineId]: status,
|
||||
}))
|
||||
setPipelineStatusSnapshot((prev) => {
|
||||
if (status === PipelineStatusRequestStatus.None) {
|
||||
const { [pipelineId]: _omit, ...rest } = prev
|
||||
const id = Symbol('pipeline request')
|
||||
setRequests((previous) => ({ ...previous, [pipelineId]: { id, status } }))
|
||||
try {
|
||||
return await action()
|
||||
} finally {
|
||||
const options = {
|
||||
...replicationPipelineStatusQueryOptions({ projectRef, pipelineId }),
|
||||
staleTime: 0,
|
||||
}
|
||||
// A status fetch that was already in flight started before this mutation resolved, so it
|
||||
// may resolve with pre-mutation data. `fetchQuery` dedupes against it instead of starting
|
||||
// a new request, so first wait for it to drain.
|
||||
const hasFetchInFlight =
|
||||
queryClient.getQueryState(options.queryKey)?.fetchStatus === 'fetching'
|
||||
if (hasFetchInFlight) await queryClient.fetchQuery(options).catch(() => {})
|
||||
|
||||
// Nothing is in flight now, so this always starts a fresh request reflecting the
|
||||
// post-mutation state. Errors are swallowed: query consumers already display fetch
|
||||
// failures, and we don't want that to override the mutation's own result/error.
|
||||
await queryClient.fetchQuery(options).catch(() => {})
|
||||
|
||||
setRequests((previous) => {
|
||||
if (previous[pipelineId]?.id !== id) return previous
|
||||
const { [pipelineId]: _removed, ...rest } = previous
|
||||
return rest
|
||||
}
|
||||
// Only set snapshot when provided to avoid undefined entries
|
||||
if (snapshotStatus !== undefined) {
|
||||
return { ...prev, [pipelineId]: snapshotStatus }
|
||||
}
|
||||
return prev
|
||||
})
|
||||
|
||||
// Clear existing timeout for this pipeline
|
||||
const existing = timeoutsRef.current[pipelineId]
|
||||
if (existing !== undefined) {
|
||||
clearTimeout(existing)
|
||||
delete timeoutsRef.current[pipelineId]
|
||||
}
|
||||
|
||||
// Start auto-reset timer for non-None states
|
||||
if (status !== PipelineStatusRequestStatus.None) {
|
||||
const id = window.setTimeout(() => {
|
||||
// If still pending, clear to None to show backend state
|
||||
setRequestStatusState((prev) => {
|
||||
if (prev[pipelineId] && prev[pipelineId] !== PipelineStatusRequestStatus.None) {
|
||||
return { ...prev, [pipelineId]: PipelineStatusRequestStatus.None }
|
||||
}
|
||||
return prev
|
||||
})
|
||||
setPipelineStatusSnapshot((prev) => {
|
||||
const { [pipelineId]: _omit, ...rest } = prev
|
||||
return rest
|
||||
})
|
||||
delete timeoutsRef.current[pipelineId]
|
||||
}, REQUEST_TIMEOUT_MS)
|
||||
timeoutsRef.current[pipelineId] = id
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const getRequestStatus = (pipelineId: number): PipelineStatusRequestStatus => {
|
||||
return requestStatus[pipelineId] || PipelineStatusRequestStatus.None
|
||||
}
|
||||
|
||||
const setTableResetting = (pipelineId: number, isResetting: boolean) => {
|
||||
setTableResetStatus((prev) => {
|
||||
if (isResetting) return { ...prev, [pipelineId]: true }
|
||||
const { [pipelineId]: _omit, ...rest } = prev
|
||||
return rest
|
||||
})
|
||||
}
|
||||
|
||||
const getIsTableResetting = (pipelineId: number) => tableResetStatus[pipelineId] === true
|
||||
|
||||
const updatePipelineStatus = useCallback(
|
||||
(pipelineId: number, newStatus: string | undefined) => {
|
||||
const currentRequestStatus = requestStatus[pipelineId] || PipelineStatusRequestStatus.None
|
||||
if (currentRequestStatus === PipelineStatusRequestStatus.None) return
|
||||
|
||||
// Only remove when backend status differs from snapshot
|
||||
const snapshotStatus = pipelineStatusSnapshot[pipelineId]
|
||||
if (newStatus !== snapshotStatus) {
|
||||
setRequestStatus(pipelineId, PipelineStatusRequestStatus.None)
|
||||
}
|
||||
},
|
||||
[requestStatus, pipelineStatusSnapshot]
|
||||
)
|
||||
|
||||
// Cleanup all timers on unmount
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
Object.values(timeoutsRef.current).forEach((id) => clearTimeout(id))
|
||||
timeoutsRef.current = {}
|
||||
}
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<PipelineRequestStatusContext.Provider
|
||||
value={{
|
||||
requestStatus,
|
||||
pipelineStatusSnapshot,
|
||||
setRequestStatus,
|
||||
getRequestStatus,
|
||||
setTableResetting,
|
||||
getIsTableResetting,
|
||||
updatePipelineStatus,
|
||||
getRequestStatus: (pipelineId) =>
|
||||
requests[pipelineId]?.status ?? PipelineStatusRequestStatus.None,
|
||||
isRequestPending: (pipelineId) => requests[pipelineId] !== undefined,
|
||||
runWithRequestStatus,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
@@ -154,8 +84,7 @@ export const PipelineRequestStatusProvider = ({ children }: PipelineRequestStatu
|
||||
|
||||
export const usePipelineRequestStatus = () => {
|
||||
const context = useContext(PipelineRequestStatusContext)
|
||||
if (context === undefined) {
|
||||
if (context === undefined)
|
||||
throw new Error('usePipelineRequestStatus must be used within a PipelineRequestStatusProvider')
|
||||
}
|
||||
return context
|
||||
}
|
||||
Reference in new issue
Block a user