konnosDashboard
ObservabilityLayout.tsx112 lines · main
1import { IS_PLATFORM, LOCAL_STORAGE_KEYS, useParams } from 'common'
2import { usePathname } from 'next/navigation'
3import { PropsWithChildren, useEffect, useRef } from 'react'
4
5import { ProjectLayout } from '../ProjectLayout'
6import ObservabilityMenu from './ObservabilityMenu'
7import { useIndexAdvisorStatus } from '@/components/interfaces/QueryPerformance/hooks/useIsIndexAdvisorStatus'
8import { BannerIndexAdvisor } from '@/components/ui/BannerStack/Banners/BannerIndexAdvisor'
9import { BannerMetricsAPI } from '@/components/ui/BannerStack/Banners/BannerMetricsAPI'
10import { useBannerStack } from '@/components/ui/BannerStack/BannerStackProvider'
11import { UnknownInterface } from '@/components/ui/UnknownInterface'
12import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
13import { useLocalStorageQuery } from '@/hooks/misc/useLocalStorage'
14import { withAuth } from '@/hooks/misc/withAuth'
15
16interface ObservabilityLayoutProps {
17 title: string
18}
19
20const ObservabilityLayoutContent = ({
21 title,
22 children,
23}: PropsWithChildren<ObservabilityLayoutProps>) => {
24 const { ref } = useParams()
25 const pathname = usePathname()
26 const { addBanner, dismissBanner } = useBannerStack()
27 const { isIndexAdvisorAvailable, isIndexAdvisorEnabled } = useIndexAdvisorStatus()
28
29 const [isMetricsBannerDismissed] = useLocalStorageQuery(
30 LOCAL_STORAGE_KEYS.OBSERVABILITY_BANNER_DISMISSED(ref ?? ''),
31 false
32 )
33
34 const [isIndexAdvisorBannerDismissed] = useLocalStorageQuery(
35 LOCAL_STORAGE_KEYS.INDEX_ADVISOR_NOTICE_DISMISSED(ref ?? ''),
36 false
37 )
38
39 useEffect(() => {
40 if (!isMetricsBannerDismissed && IS_PLATFORM) {
41 addBanner({
42 id: 'metrics-api-banner',
43 isDismissed: false,
44 content: <BannerMetricsAPI />,
45 priority: 1,
46 })
47 } else {
48 dismissBanner('metrics-api-banner')
49 }
50 }, [isMetricsBannerDismissed, addBanner, dismissBanner])
51
52 const prevPathnameRef = useRef(pathname)
53
54 useEffect(() => {
55 const isQueryPerformancePage = pathname?.includes('/query-performance')
56
57 if (
58 isQueryPerformancePage &&
59 isIndexAdvisorAvailable &&
60 !isIndexAdvisorEnabled &&
61 !isIndexAdvisorBannerDismissed
62 ) {
63 addBanner({
64 id: 'index-advisor-banner',
65 isDismissed: false,
66 content: <BannerIndexAdvisor />,
67 priority: 3,
68 })
69 } else if (isIndexAdvisorBannerDismissed || !isQueryPerformancePage || isIndexAdvisorEnabled) {
70 dismissBanner('index-advisor-banner')
71 }
72
73 prevPathnameRef.current = pathname
74 }, [
75 pathname,
76 isIndexAdvisorAvailable,
77 isIndexAdvisorEnabled,
78 isIndexAdvisorBannerDismissed,
79 addBanner,
80 dismissBanner,
81 ])
82
83 const { reportsAll } = useIsFeatureEnabled(['reports:all'])
84
85 if (reportsAll) {
86 return (
87 <ProjectLayout
88 product="Observability"
89 browserTitle={{ section: title }}
90 productMenu={<ObservabilityMenu />}
91 isBlocking={false}
92 >
93 {children}
94 </ProjectLayout>
95 )
96 } else {
97 return <UnknownInterface urlBack={`/project/${ref}`} />
98 }
99}
100
101const ObservabilityLayout = (props: PropsWithChildren<ObservabilityLayoutProps>) => {
102 const { ref } = useParams()
103 const { reportsAll } = useIsFeatureEnabled(['reports:all'])
104
105 if (reportsAll) {
106 return <ObservabilityLayoutContent {...props} />
107 } else {
108 return <UnknownInterface urlBack={`/project/${ref}`} />
109 }
110}
111
112export default withAuth(ObservabilityLayout)