PipelineStatus() — supabase Function Reference

Architecture documentation for the PipelineStatus() function in PipelineStatus.tsx from the supabase codebase.

Function tsx ContentManagement Migrations calls 1

Entity Profile

ContentManagement→ Migrations→ PipelineStatus() — supabase Function Reference

Dependency Diagram

graph TD
  b58c2821_8104_a554_177d_d8df6a9608e6["PipelineStatus()"]
  bcac0d34_eb3c_b34c_27f7_f9c664bd87a5["getPipelineStateMessages()"]
  b58c2821_8104_a554_177d_d8df6a9608e6 -->|calls| bcac0d34_eb3c_b34c_27f7_f9c664bd87a5
  style b58c2821_8104_a554_177d_d8df6a9608e6 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/studio/components/interfaces/Database/Replication/PipelineStatus.tsx lines 23–138

export const PipelineStatus = ({
  pipelineStatus,
  error,
  isLoading,
  isError,
  isSuccess,
  requestStatus,
  pipelineId,
}: PipelineStatusProps) => {
  const { ref } = useParams()

  // Map backend statuses to UX-friendly display
  const getStatusConfig = (): {
    label: string
    type?: 'failure' | 'warning' | 'loading' | 'success' | 'idle'
    tooltip: string
  } => {
    const statusName =
      pipelineStatus && typeof pipelineStatus === 'object' && 'name' in pipelineStatus
        ? pipelineStatus.name
        : undefined

    // Get consistent tooltip message using the same logic as other components
    const stateMessages = getPipelineStateMessages(requestStatus, statusName)

    // Show optimistic request state while backend still reports steady states
    switch (requestStatus) {
      case PipelineStatusRequestStatus.RestartRequested:
        return { label: 'Restarting', type: 'loading', tooltip: stateMessages.message }
      case PipelineStatusRequestStatus.StartRequested:
        return { label: 'Starting', type: 'loading', tooltip: stateMessages.message }
      case PipelineStatusRequestStatus.StopRequested:
        return { label: 'Stopping', type: 'loading', tooltip: stateMessages.message }
    }

    if (pipelineStatus && typeof pipelineStatus === 'object' && 'name' in pipelineStatus) {
      switch (pipelineStatus.name) {
        case PipelineStatusName.FAILED:
          return { label: 'Failed', type: 'failure', tooltip: stateMessages.message }
        case PipelineStatusName.STARTING:
          return { label: 'Starting', type: 'loading', tooltip: stateMessages.message }
        case PipelineStatusName.STARTED:
          return { label: 'Running', type: 'success', tooltip: stateMessages.message }
        case PipelineStatusName.STOPPED:
          return { label: 'Stopped', type: 'idle', tooltip: stateMessages.message }
        case PipelineStatusName.STOPPING:
          return { label: 'Stopping', type: 'loading', tooltip: stateMessages.message }
        default:
          return { label: 'Unknown', type: 'idle', tooltip: stateMessages.message }
      }
    }

    // Fallback for undefined or invalid status
    return {
      label: 'Unknown',
      type: 'idle',
      tooltip: 'Pipeline status is unclear - check logs for details',
    }
  }

  const { type, tooltip, label } = getStatusConfig()

  const pipelineLogsUrl = pipelineId
    ? `/project/${ref}/logs/replication-logs?f=${encodeURIComponent(
        JSON.stringify({ pipeline_id: pipelineId })
      )}`
    : `/project/${ref}/logs/replication-logs`

  return (
    <>
      {isLoading && <ShimmeringLoader />}

      {isError && (
        <Tooltip>
          <TooltipTrigger>
            <Badge variant="default">Unknown</Badge>
          </TooltipTrigger>
          <TooltipContent side="bottom" className="w-64 text-center">
            Unable to retrieve status: {error?.message}
          </TooltipContent>
        </Tooltip>
      )}

      {isSuccess && (
        <Tooltip>
          <TooltipTrigger asChild>
            <div className="flex items-center gap-x-2">
              <Badge
                variant={
                  type === 'failure'
                    ? 'destructive'
                    : type === 'warning'
                      ? 'warning'
                      : type === 'success'
                        ? 'success'
                        : 'default'
                }
              >
                {label}
              </Badge>
              {type === 'loading' && <Loader2 className="animate-spin w-3 h-3" />}
            </div>
          </TooltipTrigger>
          <TooltipContent side="bottom">
            {tooltip}{' '}
            {['unknown', 'failed'].includes(pipelineStatus?.name ?? '') && (
              <>
                Check the <InlineLink href={pipelineLogsUrl}>logs</InlineLink> for more information.
              </>
            )}
          </TooltipContent>
        </Tooltip>
      )}
    </>
  )
}