Chore/add replica filter for query performance (#23409)

* Add replica filter for query performance

* Small fix

* Add ref in dep array

* Hide database selector if read replicas is not enabled for project
This commit is contained in:
Joshen Lim
2024-05-03 16:24:49 +08:00
committed by GitHub
parent b3d382c606
commit 755d75e55d
6 changed files with 53 additions and 21 deletions

View File

@@ -1,12 +1,15 @@
import { InformationCircleIcon } from '@heroicons/react/16/solid'
import { useRouter } from 'next/router'
import { useMemo, useState } from 'react'
import { useEffect, useMemo, useState } from 'react'
import toast from 'react-hot-toast'
import { X } from 'lucide-react'
import { useParams } from 'common'
import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
import { executeSql } from 'data/sql/execute-sql-query'
import { useLocalStorageQuery } from 'hooks'
import { DbQueryHook } from 'hooks/analytics/useDbQuery'
import { LOCAL_STORAGE_KEYS } from 'lib/constants'
import {
Button,
TabsList_Shadcn_,
@@ -25,9 +28,7 @@ import { PresetHookResult } from '../Reports/Reports.utils'
import { QUERY_PERFORMANCE_REPORT_TYPES } from './QueryPerformance.constants'
import { QueryPerformanceFilterBar } from './QueryPerformanceFilterBar'
import { QueryPerformanceGrid } from './QueryPerformanceGrid'
import { useLocalStorageQuery } from 'hooks'
import { LOCAL_STORAGE_KEYS } from 'lib/constants'
import { ExternalLink, X } from 'lucide-react'
import { useDatabaseSelectorStateSnapshot } from 'state/database-selector'
interface QueryPerformanceProps {
queryHitRate: PresetHookResult
@@ -39,8 +40,10 @@ export const QueryPerformance = ({
queryPerformanceQuery,
}: QueryPerformanceProps) => {
const router = useRouter()
const { preset } = useParams()
const { ref, preset } = useParams()
const { project } = useProjectContext()
const state = useDatabaseSelectorStateSnapshot()
const [page, setPage] = useState<QUERY_PERFORMANCE_REPORT_TYPES>(
(preset as QUERY_PERFORMANCE_REPORT_TYPES) ?? QUERY_PERFORMANCE_REPORT_TYPES.MOST_TIME_CONSUMING
)
@@ -108,6 +111,10 @@ export const QueryPerformance = ({
slowestExecutionTime,
])
useEffect(() => {
state.setSelectedDatabaseId(ref)
}, [ref])
return (
<>
<Tabs_Shadcn_