konnosDashboard
PipelineStatus.tsx89 lines · main
1import { useParams } from 'common'
2import { Loader2 } from 'lucide-react'
3import { Badge, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
4import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
5
6import { getPipelineDisplayState, getStatusName } from './Pipeline.utils'
7import { PipelineStatusName } from './Replication.constants'
8import { InlineLink } from '@/components/ui/InlineLink'
9import { ReplicationPipelineStatusData } from '@/data/replication/pipeline-status-query'
10import { PipelineStatusRequestStatus } from '@/state/replication-pipeline-request-status'
11import type { ResponseError } from '@/types'
12
13interface PipelineStatusProps {
14 pipelineStatus: ReplicationPipelineStatusData['status'] | undefined
15 error: ResponseError | null
16 isLoading: boolean
17 isError: boolean
18 isSuccess: boolean
19 requestStatus?: PipelineStatusRequestStatus
20 pipelineId?: number
21}
22
23export const PipelineStatus = ({
24 pipelineStatus,
25 error,
26 isLoading,
27 isError,
28 isSuccess,
29 requestStatus,
30 pipelineId,
31}: PipelineStatusProps) => {
32 const { ref } = useParams()
33
34 const statusName = getStatusName(pipelineStatus)
35 const displayState = getPipelineDisplayState(requestStatus, statusName)
36 const { type, message, label } = displayState
37
38 const pipelineLogsUrl = pipelineId
39 ? `/project/${ref}/logs/replication-logs?f=${encodeURIComponent(
40 JSON.stringify({ pipeline_id: pipelineId })
41 )}`
42 : `/project/${ref}/logs/replication-logs`
43
44 const showLogsCTA = [PipelineStatusName.UNKNOWN, PipelineStatusName.FAILED].includes(
45 statusName as PipelineStatusName
46 )
47
48 return (
49 <>
50 {isLoading && <ShimmeringLoader />}
51
52 {isError && (
53 <Tooltip>
54 <TooltipTrigger>
55 <Badge variant="default">Unknown</Badge>
56 </TooltipTrigger>
57 <TooltipContent side="bottom" className="w-64 text-center">
58 Unable to retrieve status: {error?.message}
59 </TooltipContent>
60 </Tooltip>
61 )}
62
63 {isSuccess && (
64 <Tooltip>
65 <TooltipTrigger asChild>
66 <div className="flex items-center gap-x-2">
67 <Badge
68 variant={
69 type === 'failure' ? 'destructive' : type === 'success' ? 'success' : 'default'
70 }
71 >
72 {label}
73 </Badge>
74 {type === 'loading' && <Loader2 className="animate-spin w-3 h-3" />}
75 </div>
76 </TooltipTrigger>
77 <TooltipContent side="bottom">
78 {message}{' '}
79 {showLogsCTA && (
80 <>
81 Check the <InlineLink href={pipelineLogsUrl}>logs</InlineLink> for more information.
82 </>
83 )}
84 </TooltipContent>
85 </Tooltip>
86 )}
87 </>
88 )
89}