konnosDashboard
DatabaseReadOnlyAlert.tsx83 lines · main
1import { useParams } from 'common'
2import { AlertTriangle, ExternalLink } from 'lucide-react'
3import Link from 'next/link'
4import { useState } from 'react'
5import { Alert, AlertDescription, AlertTitle, Button } from 'ui'
6
7import ConfirmDisableReadOnlyModeModal from './DatabaseSettings/ConfirmDisableReadOnlyModal'
8import { useResourceWarningsQuery } from '@/data/usage/resource-warnings-query'
9import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization'
10import { DOCS_URL } from '@/lib/constants'
11
12export const DatabaseReadOnlyAlert = () => {
13 const { ref: projectRef } = useParams()
14 const { data: organization } = useSelectedOrganizationQuery()
15 const [showConfirmationModal, setShowConfirmationModal] = useState(false)
16
17 const { data: resourceWarnings } = useResourceWarningsQuery({ ref: projectRef })
18 // [Joshen Cleanup] JFYI this can be cleaned up once BE changes are live which will only return the warnings based on the provided ref
19 // No longer need to filter by ref on the client side
20 const isReadOnlyMode =
21 (resourceWarnings ?? [])?.find((warning) => warning.project === projectRef)
22 ?.is_readonly_mode_enabled ?? false
23
24 return (
25 <>
26 {isReadOnlyMode && (
27 <Alert variant="destructive">
28 <AlertTriangle />
29 <AlertTitle>
30 Project is in read-only mode and database is no longer accepting write requests
31 </AlertTitle>
32 <AlertDescription>
33 You have reached 95% of your project's disk space, and read-only mode has been enabled
34 to preserve your database's stability and prevent your project from exceeding its
35 current billing plan. To resolve this, you may:
36 <ul className="list-disc pl-6 mt-1">
37 <li>
38 Temporarily disable read-only mode to free up space and reduce your database size
39 </li>
40 {organization?.plan.id === 'free' ? (
41 <li>
42 <Link
43 href={`/org/${organization?.slug}/billing?panel=subscriptionPlan&source=databaseReadOnlyAlertUpgradePlan`}
44 >
45 <a className="text underline">Upgrade to the Pro Plan</a>
46 </Link>{' '}
47 to increase your database size limit to 8GB.
48 </li>
49 ) : organization?.plan.id === 'pro' && organization?.usage_billing_enabled ? (
50 <li>
51 <Link
52 href={`/org/${organization?.slug}/billing?panel=subscriptionPlan&source=databaseReadOnlyAlertSpendCap`}
53 >
54 <a className="text-foreground underline">Disable your Spend Cap</a>
55 </Link>{' '}
56 to allow your project to auto-scale and expand beyond the 8GB database size limit
57 </li>
58 ) : null}
59 </ul>
60 </AlertDescription>
61 <div className="mt-4 flex items-center space-x-2">
62 <Button type="default" onClick={() => setShowConfirmationModal(true)}>
63 Disable read-only mode
64 </Button>
65 <Button asChild type="default" icon={<ExternalLink />}>
66 <a
67 href={`${DOCS_URL}/guides/platform/database-size#disabling-read-only-mode`}
68 target="_blank"
69 rel="noreferrer"
70 >
71 Learn more
72 </a>
73 </Button>
74 </div>
75 </Alert>
76 )}
77 <ConfirmDisableReadOnlyModeModal
78 visible={showConfirmationModal}
79 onClose={() => setShowConfirmationModal(false)}
80 />
81 </>
82 )
83}