diff --git a/apps/studio/components/interfaces/Database/ETL/Pipeline.utils.ts b/apps/studio/components/interfaces/Database/ETL/Pipeline.utils.ts
index 551243632f1..a62e6857060 100644
--- a/apps/studio/components/interfaces/Database/ETL/Pipeline.utils.ts
+++ b/apps/studio/components/interfaces/Database/ETL/Pipeline.utils.ts
@@ -1,4 +1,7 @@
-import { ReplicationPipelineStatusData } from 'data/etl/pipeline-status-query'
+import {
+ ReplicationPipelineStatus,
+ ReplicationPipelineStatusData,
+} from 'data/etl/pipeline-status-query'
import { PipelineStatusRequestStatus } from 'state/replication-pipeline-request-status'
import { PipelineStatusName } from './Replication.constants'
@@ -58,6 +61,11 @@ const PIPELINE_STATE_MESSAGES = {
message: 'Initializing replication. Table status will be available once running.',
badge: 'Starting',
},
+ stopping: {
+ title: 'Pipeline stopping',
+ message: 'Stopping replication. Table replication will be paused once stopped',
+ badge: 'Stopping',
+ },
running: {
title: 'Pipeline running',
message: 'Replication is active and processing data',
@@ -76,8 +84,8 @@ const PIPELINE_STATE_MESSAGES = {
} as const
export const getPipelineStateMessages = (
- requestStatus: PipelineStatusRequestStatus | undefined,
- statusName: string | undefined
+ requestStatus?: PipelineStatusRequestStatus,
+ statusName?: ReplicationPipelineStatus
) => {
// Reflect optimistic request intent immediately after click
if (requestStatus === PipelineStatusRequestStatus.RestartRequested) {
@@ -100,6 +108,8 @@ export const getPipelineStateMessages = (
return PIPELINE_STATE_MESSAGES.stopped
case 'started':
return PIPELINE_STATE_MESSAGES.running
+ case 'stopping':
+ return PIPELINE_STATE_MESSAGES.stopping
case 'unknown':
return PIPELINE_STATE_MESSAGES.unknown
default:
diff --git a/apps/studio/components/interfaces/Database/ETL/PipelineStatus.tsx b/apps/studio/components/interfaces/Database/ETL/PipelineStatus.tsx
index 420f4142e9d..fd13ea2a6a5 100644
--- a/apps/studio/components/interfaces/Database/ETL/PipelineStatus.tsx
+++ b/apps/studio/components/interfaces/Database/ETL/PipelineStatus.tsx
@@ -97,6 +97,13 @@ export const PipelineStatus = ({
color: 'text-foreground-light',
tooltip: stateMessages.message,
}
+ case PipelineStatusName.STOPPING:
+ return {
+ label: 'Stopping',
+ dot: ,
+ color: 'text-warning',
+ tooltip: stateMessages.message,
+ }
case PipelineStatusName.UNKNOWN:
return {
label: 'Unknown',
diff --git a/apps/studio/components/interfaces/Database/ETL/Replication.constants.ts b/apps/studio/components/interfaces/Database/ETL/Replication.constants.ts
index 687e7307483..16e0f73436c 100644
--- a/apps/studio/components/interfaces/Database/ETL/Replication.constants.ts
+++ b/apps/studio/components/interfaces/Database/ETL/Replication.constants.ts
@@ -5,5 +5,6 @@ export enum PipelineStatusName {
STARTING = 'starting',
STARTED = 'started',
STOPPED = 'stopped',
+ STOPPING = 'stopping',
UNKNOWN = 'unknown',
}
diff --git a/apps/studio/data/etl/pipeline-status-query.ts b/apps/studio/data/etl/pipeline-status-query.ts
index 1e6b2d9787d..6367239c4f4 100644
--- a/apps/studio/data/etl/pipeline-status-query.ts
+++ b/apps/studio/data/etl/pipeline-status-query.ts
@@ -1,10 +1,13 @@
import { useQuery } from '@tanstack/react-query'
+import { components } from 'api-types'
import { get, handleError } from 'data/fetchers'
import type { ResponseError, UseCustomQueryOptions } from 'types'
import { replicationKeys } from './keys'
type ReplicationPipelinesStatusParams = { projectRef?: string; pipelineId?: number }
+type ReplicationPipelineStatusResponse = components['schemas']['ReplicationPipelineStatusResponse']
+export type ReplicationPipelineStatus = ReplicationPipelineStatusResponse['status']['name']
async function fetchReplicationPipelineStatus(
{ projectRef, pipelineId }: ReplicationPipelinesStatusParams,
diff --git a/apps/studio/state/replication-pipeline-request-status.tsx b/apps/studio/state/replication-pipeline-request-status.tsx
index 36561ab5444..b14c7864ebd 100644
--- a/apps/studio/state/replication-pipeline-request-status.tsx
+++ b/apps/studio/state/replication-pipeline-request-status.tsx
@@ -1,11 +1,11 @@
import {
createContext,
- useContext,
- useState,
ReactNode,
useCallback,
- useRef,
+ useContext,
useEffect,
+ useRef,
+ useState,
} from 'react'
export enum PipelineStatusRequestStatus {
@@ -35,6 +35,9 @@ const PipelineRequestStatusContext = createContext {
const [requestStatus, setRequestStatusState] = useState<
Record