mirror of
https://github.com/supabase/supabase.git
synced 2026-06-12 17:27:58 +08:00
8459c34202
## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. YES ## What kind of change does this PR introduce? These logos began to overflow the more log drains we've added. Imported the animated logos from the empty state of log drains settings on free accounts. | Before | After | |--------|--------| | <img width="317" height="256" alt="Screenshot 2026-05-13 at 13 38 11" src="https://github.com/user-attachments/assets/46f04abc-fe33-48f2-8c1f-7d543c85b5a8" /> | <img width="638" height="540" alt="CleanShot 2026-05-13 at 13 47 11" src="https://github.com/user-attachments/assets/e49a9123-f486-45d8-9714-ef41402762d6" /> | <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Release Notes * **New Features** * Expanded support for additional telemetry and service integrations including OTLP, Amazon S3, Axiom, Last9, and Syslog in the Log Drains interface. * **Refactor** * Updated animated logo component to support flexible sizing and styling options, improving layout consistency across the metrics API banner. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45879) <!-- review_stack_entry_end --> <!-- end of auto-generated comment: release notes by coderabbit.ai -->
57 lines
2.0 KiB
TypeScript
57 lines
2.0 KiB
TypeScript
import { LOCAL_STORAGE_KEYS } from 'common'
|
|
import { useParams } from 'common/hooks'
|
|
import Link from 'next/link'
|
|
import { Badge, Button } from 'ui'
|
|
|
|
import { BannerCard } from '../BannerCard'
|
|
import { useBannerStack } from '../BannerStackProvider'
|
|
import { AnimatedLogos } from '@/components/interfaces/LogDrains/AnimatedLogos'
|
|
import { useLocalStorageQuery } from '@/hooks/misc/useLocalStorage'
|
|
import { DOCS_URL } from '@/lib/constants'
|
|
import { useTrack } from '@/lib/telemetry/track'
|
|
|
|
export const BannerMetricsAPI = () => {
|
|
const { ref } = useParams()
|
|
const track = useTrack()
|
|
const { dismissBanner } = useBannerStack()
|
|
const [, setIsDismissed] = useLocalStorageQuery(
|
|
LOCAL_STORAGE_KEYS.OBSERVABILITY_BANNER_DISMISSED(ref ?? ''),
|
|
false
|
|
)
|
|
return (
|
|
<BannerCard
|
|
onDismiss={() => {
|
|
setIsDismissed(true)
|
|
dismissBanner('metrics-api-banner')
|
|
track('metrics_api_banner_dismiss_button_clicked')
|
|
}}
|
|
>
|
|
<div className="flex flex-col gap-y-4">
|
|
<div className="flex flex-col gap-y-2 items-start">
|
|
<Badge variant="success" className="-ml-0.5 uppercase inline-flex items-center mb-2">
|
|
Beta
|
|
</Badge>
|
|
<AnimatedLogos iconSize={20} className="h-[22px]!" />
|
|
</div>
|
|
<div className="flex flex-col gap-y-1 mb-2">
|
|
<p className="text-sm font-medium">Export Metrics to your dashboards</p>
|
|
<p className="text-xs text-foreground-lighter text-balance">
|
|
Visualize over 200 database performance and health metrics with our Metrics API.
|
|
</p>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Button type="default" size="tiny" asChild>
|
|
<Link
|
|
href={`${DOCS_URL}/guides/telemetry/metrics`}
|
|
target="_blank"
|
|
onClick={() => track('metrics_api_banner_cta_button_clicked')}
|
|
>
|
|
Get started for free
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</BannerCard>
|
|
)
|
|
}
|