konnosDashboard
IndexAdvisorNotice.tsx61 lines · main
1import { LOCAL_STORAGE_KEYS } from 'common'
2import { useParams } from 'common/hooks'
3import { Button } from 'ui'
4import { Admonition } from 'ui-patterns'
5
6import { EnableIndexAdvisorButton } from './EnableIndexAdvisorButton'
7import { useIndexAdvisorStatus } from '@/components/interfaces/QueryPerformance/hooks/useIsIndexAdvisorStatus'
8import { useLocalStorageQuery } from '@/hooks/misc/useLocalStorage'
9import { BASE_PATH } from '@/lib/constants'
10
11export const IndexAdvisorNotice = () => {
12 const { ref } = useParams()
13 const { isIndexAdvisorAvailable, isIndexAdvisorEnabled } = useIndexAdvisorStatus()
14 const [isDismissed, setIsDismissed] = useLocalStorageQuery(
15 LOCAL_STORAGE_KEYS.INDEX_ADVISOR_NOTICE_DISMISSED(ref ?? ''),
16 false
17 )
18
19 if (!isIndexAdvisorAvailable || isIndexAdvisorEnabled || isDismissed) return null
20
21 return (
22 <div className="px-6">
23 <Admonition showIcon={false} type="tip" className="relative overflow-hidden mb-4">
24 <div className="absolute -inset-16 z-0 opacity-50">
25 <img
26 src={`${BASE_PATH}/img/reports/bg-grafana-dark.svg`}
27 alt="Index Advisor"
28 className="w-full h-full object-cover object-right hidden dark:block"
29 />
30 <img
31 src={`${BASE_PATH}/img/reports/bg-grafana-light.svg`}
32 alt="Index Advisor"
33 className="w-full h-full object-cover object-right dark:hidden"
34 />
35 <div className="absolute inset-0 bg-linear-to-r from-background-alternative to-transparent" />
36 </div>
37 <div className="relative z-10 flex flex-col md:flex-row md:items-center gap-y-2 md:gap-x-8 justify-between px-2 py-1">
38 <div className="flex flex-col gap-y-0.5">
39 <div className="flex flex-col gap-y-2 items-start">
40 <p className="text-sm font-medium">Enable Index Advisor</p>
41 </div>
42 <p className="text-sm text-foreground-lighter text-balance">
43 Recommends indexes to improve query performance.
44 </p>
45 </div>
46 <div className="flex items-center gap-x-2">
47 <Button
48 type="default"
49 size="tiny"
50 onClick={() => setIsDismissed(true)}
51 aria-label="Dismiss notification"
52 >
53 Dismiss
54 </Button>
55 <EnableIndexAdvisorButton />
56 </div>
57 </div>
58 </Admonition>
59 </div>
60 )
61}