CPUWarnings.tsx68 lines · main
1import { AlertTitle } from '@ui/components/shadcn/ui/alert'
2import { AlertCircle } from 'lucide-react'
3import Link from 'next/link'
4import { Alert, AlertDescription, Button } from 'ui'
5
6import { DOCS_URL } from '@/lib/constants'
7
8interface CPUWarningsProps {
9 hasAccessToComputeSizes: boolean
10 upgradeUrl: string
11 severity?: 'warning' | 'critical' | null
12}
13
14export const CPUWarnings = ({
15 hasAccessToComputeSizes,
16 upgradeUrl,
17 severity,
18}: CPUWarningsProps) => {
19 if (severity === 'warning') {
20 return (
21 <Alert variant="warning">
22 <AlertCircle />
23 <AlertTitle>Your max CPU usage has exceeded 80%</AlertTitle>
24 <AlertDescription>
25 High CPU usage could result in slower queries, disruption of daily back up routines, and
26 in rare cases, your instance may become unresponsive. If you need more resources, consider
27 upgrading to a larger compute add-on.
28 </AlertDescription>
29 <div className="mt-3 flex items-center space-x-2">
30 <Button asChild type="default">
31 <Link href={`${DOCS_URL}/guides/troubleshooting/high-cpu-usage`}>Learn more</Link>
32 </Button>
33 <Button asChild type="warning">
34 <Link href={upgradeUrl}>
35 {hasAccessToComputeSizes ? 'Change compute add-on' : 'Upgrade project'}
36 </Link>
37 </Button>
38 </div>
39 </Alert>
40 )
41 }
42
43 if (severity === 'critical') {
44 return (
45 <Alert variant="destructive">
46 <AlertCircle />
47 <AlertTitle>Your max CPU usage has reached 100%</AlertTitle>
48 <AlertDescription>
49 High CPU usage could result in slower queries, disruption of daily back up routines, and
50 in rare cases, your instance may become unresponsive. If you need more resources, consider
51 upgrading to a larger compute add-on.
52 </AlertDescription>
53 <div className="mt-3 flex items-center space-x-2">
54 <Button asChild type="default">
55 <Link href={`${DOCS_URL}/guides/troubleshooting/high-cpu-usage`}>Learn more</Link>
56 </Button>
57 <Button asChild type="danger">
58 <Link href={upgradeUrl}>
59 {hasAccessToComputeSizes ? 'Change compute add-on' : 'Upgrade project'}
60 </Link>
61 </Button>
62 </div>
63 </Alert>
64 )
65 }
66
67 return null
68}