mirror of
https://github.com/supabase/supabase.git
synced 2026-10-14 05:39:11 +03:00
Gildas GarciaandIvan Vasilov
96d43099bb
## Problem Our `<Button>` component breaks the default `button` contract by redefining the `type` prop to set its variant (`primary`, `default`, etc) instead of the button type (`submit`, `button`, etc). This is confusing and forces to write more code when using it with shadcn components that expect/inject the standard button props. ## Solution - rename the `type` prop to `variant` - rename the `htmlType` prop to `type` - propagate the changes where necessary - format code ## How to test As this is just prop renaming, if it builds it's ok --------- Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
69 lines
2.3 KiB
TypeScript
69 lines
2.3 KiB
TypeScript
import { AlertTitle } from '@ui/components/shadcn/ui/alert'
|
|
import { AlertCircle } from 'lucide-react'
|
|
import Link from 'next/link'
|
|
import { Alert, AlertDescription, Button } from 'ui'
|
|
|
|
import { DOCS_URL } from '@/lib/constants'
|
|
|
|
interface RAMWarningsProps {
|
|
hasAccessToComputeSizes: boolean
|
|
upgradeUrl: string
|
|
severity?: 'warning' | 'critical' | null
|
|
}
|
|
|
|
export const RAMWarnings = ({
|
|
hasAccessToComputeSizes,
|
|
upgradeUrl,
|
|
severity,
|
|
}: RAMWarningsProps) => {
|
|
if (severity === 'warning') {
|
|
return (
|
|
<Alert variant="warning">
|
|
<AlertCircle />
|
|
<AlertTitle>Your memory usage has exceeded 80%</AlertTitle>
|
|
<AlertDescription>
|
|
High memory usage could result in overall degraded performance, and in rare cases, your
|
|
instance may become unresponsive. If you need more resources, consider upgrading to a
|
|
larger compute add-on.
|
|
</AlertDescription>
|
|
<div className="mt-3 flex items-center space-x-2">
|
|
<Button asChild variant="default">
|
|
<Link href={`${DOCS_URL}/guides/troubleshooting/exhaust-ram`}>Learn more</Link>
|
|
</Button>
|
|
<Button asChild variant="warning">
|
|
<Link href={upgradeUrl}>
|
|
{hasAccessToComputeSizes ? 'Change compute add-on' : 'Upgrade project'}
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</Alert>
|
|
)
|
|
}
|
|
|
|
if (severity === 'critical') {
|
|
return (
|
|
<Alert variant="destructive">
|
|
<AlertCircle />
|
|
<AlertTitle>Your memory usage has reached 100%</AlertTitle>
|
|
<AlertDescription>
|
|
High memory usage could result in overall degraded performance, and in rare cases, your
|
|
instance may become unresponsive. If you need more resources, consider upgrading to a
|
|
larger compute add-on.
|
|
</AlertDescription>
|
|
<div className="mt-3 flex items-center space-x-2">
|
|
<Button asChild variant="default">
|
|
<Link href={`${DOCS_URL}/guides/troubleshooting/high-cpu-usage`}>Learn more</Link>
|
|
</Button>
|
|
<Button asChild variant="danger">
|
|
<Link href={upgradeUrl}>
|
|
{hasAccessToComputeSizes ? 'Change compute add-on' : 'Upgrade project'}
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</Alert>
|
|
)
|
|
}
|
|
|
|
return null
|
|
}
|