konnosDashboard
Edge.tsx81 lines · main
1import { BaseEdge, Edge, EdgeLabelRenderer, getSmoothStepPath, type EdgeProps } from '@xyflow/react'
2import { useParams } from 'common'
3import { Loader2 } from 'lucide-react'
4import { Tooltip, TooltipContent, TooltipTrigger } from 'ui'
5
6import { EdgeData, REPLICA_STATUS } from './InstanceConfiguration.constants'
7import { useReplicationLagQuery } from '@/data/read-replicas/replica-lag-query'
8import { formatDatabaseID } from '@/data/read-replicas/replicas.utils'
9
10export const SmoothstepEdge = ({
11 sourceX,
12 sourceY,
13 targetX,
14 targetY,
15 sourcePosition,
16 targetPosition,
17 style = {},
18 markerEnd,
19 data,
20}: EdgeProps<Edge<EdgeData>>) => {
21 const { ref } = useParams()
22 // [Joshen] Only applicable for replicas
23 const { status, identifier, connectionString } = data || {}
24 const formattedId = formatDatabaseID(identifier ?? '')
25
26 const [edgePath, labelX, labelY] = getSmoothStepPath({
27 sourceX,
28 sourceY,
29 sourcePosition,
30 targetX,
31 targetY,
32 targetPosition,
33 })
34
35 const {
36 data: lagDuration,
37 isPending: isLoading,
38 isError,
39 } = useReplicationLagQuery(
40 {
41 // Safe cast as the query isn't enable if identifier is null/undefined
42 id: identifier as string,
43 projectRef: ref,
44 connectionString,
45 },
46 { enabled: identifier != null && status === REPLICA_STATUS.ACTIVE_HEALTHY }
47 )
48 const lagValue = Number(lagDuration?.toFixed(2) ?? 0).toLocaleString()
49
50 return (
51 <>
52 <BaseEdge path={edgePath} markerEnd={markerEnd} style={style} />
53 {data !== undefined && !isError && status === REPLICA_STATUS.ACTIVE_HEALTHY && (
54 <EdgeLabelRenderer>
55 <Tooltip>
56 <TooltipTrigger asChild>
57 <div
58 className="bg-surface-100 px-1.5 py-0.5 rounded-sm absolute nodrag nopan"
59 style={{
60 transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
61 pointerEvents: 'all',
62 }}
63 >
64 {isLoading ? (
65 <Loader2 size={12} className="animate-spin" />
66 ) : (
67 <p className="font-mono text-xs">{lagValue}s</p>
68 )}
69 </div>
70 </TooltipTrigger>
71 <TooltipContent side="bottom" align="center">
72 {isLoading
73 ? `Checking replication lag for replica ID: ${formattedId}`
74 : `Replication lag (seconds) for replica ID: ${formattedId}`}
75 </TooltipContent>
76 </Tooltip>
77 </EdgeLabelRenderer>
78 )}
79 </>
80 )
81}