konnosDashboard
BannerMetricsAPI.tsx56 lines · main
1import { LOCAL_STORAGE_KEYS } from 'common'
2import { useParams } from 'common/hooks'
3import Link from 'next/link'
4import { Badge, Button } from 'ui'
5
6import { BannerCard } from '../BannerCard'
7import { useBannerStack } from '../BannerStackProvider'
8import { AnimatedLogos } from '@/components/interfaces/LogDrains/AnimatedLogos'
9import { useLocalStorageQuery } from '@/hooks/misc/useLocalStorage'
10import { DOCS_URL } from '@/lib/constants'
11import { useTrack } from '@/lib/telemetry/track'
12
13export const BannerMetricsAPI = () => {
14 const { ref } = useParams()
15 const track = useTrack()
16 const { dismissBanner } = useBannerStack()
17 const [, setIsDismissed] = useLocalStorageQuery(
18 LOCAL_STORAGE_KEYS.OBSERVABILITY_BANNER_DISMISSED(ref ?? ''),
19 false
20 )
21 return (
22 <BannerCard
23 onDismiss={() => {
24 setIsDismissed(true)
25 dismissBanner('metrics-api-banner')
26 track('metrics_api_banner_dismiss_button_clicked')
27 }}
28 >
29 <div className="flex flex-col gap-y-4">
30 <div className="flex flex-col gap-y-2 items-start">
31 <Badge variant="success" className="-ml-0.5 uppercase inline-flex items-center mb-2">
32 Beta
33 </Badge>
34 <AnimatedLogos iconSize={20} className="h-[22px]!" />
35 </div>
36 <div className="flex flex-col gap-y-1 mb-2">
37 <p className="text-sm font-medium">Export Metrics to your dashboards</p>
38 <p className="text-xs text-foreground-lighter text-balance">
39 Visualize over 200 database performance and health metrics with our Metrics API.
40 </p>
41 </div>
42 <div className="flex gap-2">
43 <Button type="default" size="tiny" asChild>
44 <Link
45 href={`${DOCS_URL}/guides/telemetry/metrics`}
46 target="_blank"
47 onClick={() => track('metrics_api_banner_cta_button_clicked')}
48 >
49 Get started for free
50 </Link>
51 </Button>
52 </div>
53 </div>
54 </BannerCard>
55 )
56}