DiskManagementThroughputReadReplicas() — supabase Function Reference

Source Code

apps/studio/components/interfaces/DiskManagement/ui/DiskManagementReadReplicas.tsx lines 188–249

export const DiskManagementThroughputReadReplicas = ({
  isDirty,
  oldThroughput,
  newThroughput,
  oldStorageType,
  newStorageType,
}: {
  isDirty: boolean
  oldThroughput: number
  newThroughput: number
  oldStorageType: DiskType
  newStorageType: DiskType
}) => {
  const { ref: projectRef } = useParams()
  const { data: databases } = useReadReplicasQuery({ projectRef })
  const readReplicas = (databases ?? []).filter((db) => db.identifier !== projectRef)

  const beforePrice =
    oldStorageType === DiskType.GP3
      ? (oldThroughput - DISK_LIMITS[oldStorageType].includedThroughput) *
        DISK_PRICING[oldStorageType]?.throughput
      : 0
  const afterPrice =
    newStorageType === DiskType.GP3
      ? (newThroughput - DISK_LIMITS[newStorageType].includedThroughput) *
        DISK_PRICING[newStorageType]?.throughput
      : 0

  if (readReplicas.length === 0) return null

  return (
    <AnimatePresence initial={false}>
      {isDirty && (
        <motion.div
          initial={{ opacity: 0, height: 0 }}
          animate={{ opacity: 1, height: 'auto' }}
          exit={{ opacity: 0, height: 0 }}
          transition={{ duration: 0.3 }}
        >
          <Alert variant="default" className="bg-transparent">
            <InfoIcon />
            <AlertTitle>Read replica throughput will also be updated to the same value</AlertTitle>
            <AlertDescription>
              <ul className="list-disc pl-4 my-3 flex flex-col gap-2">
                {readReplicas.map((replica, index) => (
                  <li key={index} className="marker:text-foreground-light">
                    <div className="flex items-center gap-2">
                      <span>
                        ID: {formatDatabaseID(replica.identifier)} ({replica.region}):
                      </span>
                      <BillingChangeBadge show beforePrice={beforePrice} afterPrice={afterPrice} />
                    </div>
                  </li>
                ))}
              </ul>
            </AlertDescription>
          </Alert>
        </motion.div>
      )}
    </AnimatePresence>
  )
}