konnosDashboard
RAMWarnings.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 RAMWarningsProps {
9 hasAccessToComputeSizes: boolean
10 upgradeUrl: string
11 severity?: 'warning' | 'critical' | null
12}
13
14export const RAMWarnings = ({
15 hasAccessToComputeSizes,
16 upgradeUrl,
17 severity,
18}: RAMWarningsProps) => {
19 if (severity === 'warning') {
20 return (
21 <Alert variant="warning">
22 <AlertCircle />
23 <AlertTitle>Your memory usage has exceeded 80%</AlertTitle>
24 <AlertDescription>
25 High memory usage could result in overall degraded performance, and in rare cases, your
26 instance may become unresponsive. If you need more resources, consider upgrading to a
27 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/exhaust-ram`}>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 memory usage has reached 100%</AlertTitle>
48 <AlertDescription>
49 High memory usage could result in overall degraded performance, and in rare cases, your
50 instance may become unresponsive. If you need more resources, consider upgrading to a
51 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}