ReadReplicaPricingDialog() — supabase Function Reference

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

Function tsx ContentManagement Migrations calls 1

Entity Profile

ContentManagement→ Migrations→ ReadReplicaPricingDialog() — supabase Function Reference

Dependency Diagram

graph TD
  0c11bcc5_b8ca_0e1a_337b_47bb1460644c["ReadReplicaPricingDialog()"]
  ee997c59_6744_1971_3689_20661b79af94["useGetReplicaCost()"]
  0c11bcc5_b8ca_0e1a_337b_47bb1460644c -->|calls| ee997c59_6744_1971_3689_20661b79af94
  style 0c11bcc5_b8ca_0e1a_337b_47bb1460644c fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/studio/components/interfaces/Database/Replication/DestinationPanel/ReadReplicaForm/ReadReplicaPricingDialog.tsx lines 24–114

export const ReadReplicaPricingDialog = () => {
  const { data: project } = useSelectedProjectQuery()
  const { compute, disk, iops, throughput } = useGetReplicaCost()

  const showNewDiskManagementUI = project?.cloud_provider === 'AWS'

  return (
    <Dialog>
      <DialogTrigger asChild>
        <button className={cn(InlineLinkClassName, 'text-sm text-foreground-light')}>
          Learn more
        </button>
      </DialogTrigger>
      <DialogContent
        size={showNewDiskManagementUI ? 'medium' : 'small'}
        aria-describedby={undefined}
      >
        <DialogHeader>
          <DialogTitle>Calculating costs for a new read replica</DialogTitle>
        </DialogHeader>
        <DialogSectionSeparator />
        <DialogSection>
          {showNewDiskManagementUI ? (
            <>
              <p className="text-foreground-light text-sm mb-2">
                Read replicas will match the compute size of your primary database and will include
                25% more disk size than the primary database to accommodate WAL files.
              </p>
              <p className="text-foreground-light text-sm">
                The additional cost for the replica breaks down to:
              </p>
              <Table>
                <TableHeader className="font-mono uppercase text-xs [&_th]:h-auto [&_th]:pb-2 [&_th]:pt-4">
                  <TableRow>
                    <TableHead className="w-[140px] pl-0">Item</TableHead>
                    <TableHead>Description</TableHead>
                    <TableHead className="text-right pr-0">Cost (/month)</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody className="[&_td]:py-0 [&_tr]:h-[50px] [&_tr]:border-dotted">
                  <TableRow>
                    <TableCell className="pl-0">Compute size</TableCell>
                    <TableCell>{compute.label}</TableCell>
                    <TableCell className="text-right font-mono pr-0" translate="no">
                      {compute.cost}
                    </TableCell>
                  </TableRow>
                  <TableRow>
                    <TableCell className="pl-0">Disk size</TableCell>
                    <TableCell>{disk.label}</TableCell>
                    <TableCell className="text-right font-mono pr-0" translate="no">
                      {disk.cost}
                    </TableCell>
                  </TableRow>
                  <TableRow>
                    <TableCell className="pl-0">IOPS</TableCell>
                    <TableCell>{iops.label}</TableCell>
                    <TableCell className="text-right font-mono pr-0" translate="no">
                      {iops.cost}
                    </TableCell>
                  </TableRow>
                  {disk.type === 'gp3' && (
                    <TableRow>
                      <TableCell className="pl-0">Throughput</TableCell>
                      <TableCell>{throughput.label}</TableCell>
                      <TableCell className="text-right font-mono pr-0">{throughput.cost}</TableCell>
                    </TableRow>
                  )}
                </TableBody>
              </Table>
            </>
          ) : (
            <p className="text-foreground-light text-sm">
              Read replicas will be on the same compute size as your primary database. Deploying a
              read replica on the <span className="text-foreground">{compute.label}</span> size
              incurs additional{' '}
              <span className="text-foreground" translate="no">
                {compute?.priceDescription}
              </span>
              .
            </p>
          )}
        </DialogSection>

        <DialogFooter>
          <DocsButton href={`${DOCS_URL}/guides/platform/manage-your-usage/read-replicas`} />
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}