SpendCapDisabledSection.tsx 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. import { AnimatePresence, motion } from 'framer-motion'
  2. import Link from 'next/link'
  3. import { AlertDescription, AlertTitle, buttonVariants, cn } from 'ui'
  4. import { Admonition } from 'ui-patterns/admonition'
  5. import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization'
  6. import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
  7. interface SpendCapDisabledSectionProps {
  8. currentDiskSizeGb?: number
  9. }
  10. export function SpendCapDisabledSection({ currentDiskSizeGb }: SpendCapDisabledSectionProps) {
  11. const { data: org, isPending: isOrgPending } = useSelectedOrganizationQuery()
  12. const { data: project, isPending: isProjectPending } = useSelectedProjectQuery()
  13. const isSpendCapEnabled =
  14. !isOrgPending &&
  15. !isProjectPending &&
  16. org?.plan.id !== 'free' &&
  17. !org?.usage_billing_enabled &&
  18. project?.cloud_provider !== 'FLY'
  19. const showAutoExpandNotice =
  20. isSpendCapEnabled &&
  21. currentDiskSizeGb !== undefined &&
  22. currentDiskSizeGb > 0 &&
  23. currentDiskSizeGb < 8
  24. return (
  25. <AnimatePresence>
  26. {isSpendCapEnabled && (
  27. <motion.div
  28. initial={{ opacity: 0, height: 0 }}
  29. animate={{ opacity: 1, height: 'auto' }}
  30. exit={{ opacity: 0, height: 0 }}
  31. transition={{ duration: 0.2 }}
  32. className="flex flex-col gap-3"
  33. >
  34. {showAutoExpandNotice && (
  35. <Admonition type="default">
  36. <AlertTitle>Your disk will auto-expand to 8 GB</AlertTitle>
  37. <AlertDescription>
  38. The first time your database usage triggers a resize, your disk will automatically
  39. expand to at least 8 GB. You don&apos;t need to disable spend cap or do anything
  40. manually for this to happen.
  41. </AlertDescription>
  42. </Admonition>
  43. )}
  44. <Admonition type="default">
  45. <AlertTitle>Spend cap limits disk size to 8 GB</AlertTitle>
  46. <AlertDescription>
  47. You can resize your disk up to 8 GB with spend cap enabled. To expand beyond 8 GB or
  48. configure IOPS, throughput, and storage type, disable your spend cap.
  49. </AlertDescription>
  50. <div className="mt-3">
  51. <Link
  52. href={`/org/${org?.slug}/billing?panel=costControl`}
  53. className={cn(buttonVariants({ type: 'default', size: 'tiny' }))}
  54. >
  55. Disable spend cap
  56. </Link>
  57. </div>
  58. </Admonition>
  59. </motion.div>
  60. )}
  61. </AnimatePresence>
  62. )
  63. }