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