DiskManagementIOPSReadReplicas() — supabase Function Reference

Source Code

apps/studio/components/interfaces/DiskManagement/ui/DiskManagementReadReplicas.tsx lines 131–186

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

  const beforePrice =
    (oldIOPS - DISK_LIMITS[oldStorageType]?.includedIops) * DISK_PRICING[oldStorageType]?.iops
  const afterPrice =
    (newIOPS - DISK_LIMITS[newStorageType]?.includedIops) * DISK_PRICING[newStorageType]?.iops

  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 IOPS 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>
  )
}