ReadReplicaNode() — supabase Function Reference

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

Function tsx ContentManagement Migrations calls 1

Entity Profile

ContentManagement→ Migrations→ ReadReplicaNode() — supabase Function Reference

Dependency Diagram

graph TD
  0f6abc54_8616_41fd_dc72_99508a757f69["ReadReplicaNode()"]
  f7db62c8_5925_c885_746c_cdc119199d8a["getStatusLabel()"]
  0f6abc54_8616_41fd_dc72_99508a757f69 -->|calls| f7db62c8_5925_c885_746c_cdc119199d8a
  style 0f6abc54_8616_41fd_dc72_99508a757f69 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/studio/components/interfaces/Database/Replication/ReplicationDiagram/Nodes.tsx lines 125–167

export const ReadReplicaNode = ({ id }: { id: string }) => {
  const { ref: projectRef } = useParams()
  const { data: databases = [] } = useReadReplicasQuery({ projectRef })
  const database = databases.find((x) => x.identifier === id)

  const region = Object.values(AWS_REGIONS).find((x) => x.code === database?.region)
  const formattedId = formatDatabaseID(database?.identifier ?? '')
  const statusLabel = useMemo(
    () => getStatusLabel({ status: database?.status }),
    [database?.status]
  )

  return (
    <NodeContainer className="justify-start gap-x-3">
      <Database size={20} className="text-foreground-light" />
      <div className="flex flex-col gap-y-0.5">
        <div className="flex items-center">
          <p className="text-sm">Read Replica</p>
          <Tooltip>
            <TooltipTrigger>
              <div className="w-6 h-full flex items-center justify-center">
                <div
                  className={cn(
                    'w-2 h-2 rounded-full',
                    database?.status === 'ACTIVE_HEALTHY' ? 'bg-brand' : 'bg-selection'
                  )}
                />
              </div>
            </TooltipTrigger>
            <TooltipContent side="bottom">{statusLabel}</TooltipContent>
          </Tooltip>
        </div>
        <p className="text-sm text-foreground-light">{region?.displayName}</p>
        <div className="flex gap-x-2 items-center text-sm text-foreground-light">
          <span>ID: {formattedId}</span>
          <span>•</span>
          <span>{region?.code}</span>
        </div>
      </div>
      <Handle type="target" position={Position.Left} className="opacity-25" />
    </NodeContainer>
  )
}