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

apps/studio/components/interfaces/QueryPerformance/QueryPerformance.tsx

@@ -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_

apps/studio/components/interfaces/Reports/Reports.queries.ts

@@ -1,3 +1,4 @@
+import { useDatabaseSelectorStateSnapshot } from 'state/database-selector'
 import { PRESET_CONFIG } from './Reports.constants'
 import { Presets } from './Reports.types'
 import useDbQuery from 'hooks/analytics/useDbQuery'
@@ -41,5 +42,10 @@ export const useQueryPerformanceQuery = ({
 
   const orderBySql = orderBy && `ORDER BY ${orderBy.column} ${orderBy.order}`
   const sql = baseSQL.sql([], whereSql.length > 0 ? `WHERE ${whereSql}` : undefined, orderBySql)
-  return useDbQuery(sql, undefined, whereSql, orderBySql)
+  return useDbQuery({
+    sql,
+    params: undefined,
+    where: whereSql,
+    orderBy: orderBySql,
+  })
 }

apps/studio/components/interfaces/Reports/Reports.utils.tsx

@@ -22,7 +22,7 @@ export const queriesFactory = <T extends string>(
       if (queryType === 'db') {
         return {
           ...acc,
-          [k]: () => useDbQuery(sql),
+          [k]: () => useDbQuery({ sql }),
         }
       } else {
         return {

apps/studio/data/read-replicas/replicas-query.ts

@@ -5,6 +5,7 @@ import { get } from 'data/fetchers'
 import { useProjectDetailQuery } from 'data/projects/project-detail-query'
 import type { ResponseError } from 'types'
 import { replicaKeys } from './keys'
+import { IS_PLATFORM } from 'common'
 
 export type ReadReplicasVariables = {
   projectRef?: string
@@ -37,7 +38,11 @@ export const useReadReplicasQuery = <TData = ReadReplicasData>(
     replicaKeys.list(projectRef),
     ({ signal }) => getReadReplicas({ projectRef }, signal),
     {
-      enabled: enabled && data?.is_read_replicas_enabled && typeof projectRef !== 'undefined',
+      enabled:
+        enabled &&
+        IS_PLATFORM &&
+        data?.is_read_replicas_enabled &&
+        typeof projectRef !== 'undefined',
       ...options,
     }
   )

apps/studio/hooks/analytics/useDbQuery.tsx

@@ -6,7 +6,9 @@ import {
   ReportQuery,
 } from 'components/interfaces/Reports/Reports.types'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
+import { useReadReplicasQuery } from 'data/read-replicas/replicas-query'
 import { executeSql } from 'data/sql/execute-sql-query'
+import { useDatabaseSelectorStateSnapshot } from 'state/database-selector'
 
 export interface DbQueryHook<T = any> {
   isLoading: boolean
@@ -21,14 +23,27 @@ export interface DbQueryHook<T = any> {
   resolvedSql: string
 }
 
-const useDbQuery = (
-  sql: ReportQuery['sql'] | string,
-  params: BaseReportParams = DEFAULT_QUERY_PARAMS,
-  where?: string,
+// [Joshen] Atm this is being used only in query performance
+const useDbQuery = ({
+  sql,
+  params = DEFAULT_QUERY_PARAMS,
+  where,
+  orderBy,
+}: {
+  sql: ReportQuery['sql'] | string
+  params?: BaseReportParams
+  where?: string
   orderBy?: string
-): DbQueryHook => {
+}): DbQueryHook => {
   const { project } = useProjectContext()
 
+  const state = useDatabaseSelectorStateSnapshot()
+  const { data: databases } = useReadReplicasQuery({ projectRef: project?.ref })
+  const connectionString = project?.is_read_replicas_enabled
+    ? (databases || []).find((db) => db.identifier === state.selectedDatabaseId)?.connectionString
+    : project?.connectionString
+  const identifier = project?.is_read_replicas_enabled ? state.selectedDatabaseId : project?.ref
+
   const resolvedSql = typeof sql === 'function' ? sql([]) : sql
 
   const {
@@ -38,12 +53,12 @@ const useDbQuery = (
     isRefetching,
     refetch,
   } = useQuery(
-    ['projects', project?.ref, 'db', { ...params, sql: resolvedSql }, where, orderBy],
+    ['projects', project?.ref, 'db', { ...params, sql: resolvedSql, identifier }, where, orderBy],
     ({ signal }) => {
       return executeSql(
         {
           projectRef: project?.ref,
-          connectionString: project?.connectionString,
+          connectionString: connectionString || project?.connectionString,
           sql: resolvedSql,
         },
         signal

apps/studio/pages/project/[ref]/database/query-performance.tsx

@@ -11,16 +11,17 @@ import {
 import { Presets } from 'components/interfaces/Reports/Reports.types'
 import { queriesFactory } from 'components/interfaces/Reports/Reports.utils'
 import { DatabaseLayout } from 'components/layouts'
+import DatabaseSelector from 'components/ui/DatabaseSelector'
 import { FormHeader } from 'components/ui/Forms'
-import { useFlag } from 'hooks'
 import type { NextPageWithLayout } from 'types'
+import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 
 const QueryPerformanceReport: NextPageWithLayout = () => {
   const router = useRouter()
   const { ref: projectRef } = useParams()
+  const { project } = useProjectContext()
 
-  // [Joshen] Has been false on configcat for a long time
-  const tableIndexEfficiencyEnabled = useFlag('tableIndexEfficiency')
+  const showReadReplicasUI = project?.is_read_replicas_enabled
   const config = PRESET_CONFIG[Presets.QUERY_PERFORMANCE]
   const hooks = queriesFactory(config.queries, projectRef ?? 'default')
   const queryHitRate = hooks.queryHitRate()
@@ -47,13 +48,11 @@ const QueryPerformanceReport: NextPageWithLayout = () => {
 
   return (
     <div className="h-full flex flex-col">
-      {/* [Joshen] Need to double check what this is about and if it's still relevant */}
-      {/* {tableIndexEfficiencyEnabled && <IndexEfficiencyNotice isLoading={isLoading} />} */}
-
       <FormHeader
         className="py-4 px-6 !mb-0"
         title="Query Performance"
         docsUrl="https://supabase.com/docs/guides/platform/performance#examining-query-performance"
+        actions={showReadReplicasUI ? <DatabaseSelector /> : null}
       />
       <QueryPerformance queryHitRate={queryHitRate} queryPerformanceQuery={queryPerformanceQuery} />
     </div>