diff --git a/apps/studio/components/interfaces/QueryPerformance/QueryPerformance.tsx b/apps/studio/components/interfaces/QueryPerformance/QueryPerformance.tsx index 43ff5bfcb85..1c5d4d2893b 100644 --- a/apps/studio/components/interfaces/QueryPerformance/QueryPerformance.tsx +++ b/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( (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 ( <> 0 ? `WHERE ${whereSql}` : undefined, orderBySql) - return useDbQuery(sql, undefined, whereSql, orderBySql) + return useDbQuery({ + sql, + params: undefined, + where: whereSql, + orderBy: orderBySql, + }) } diff --git a/apps/studio/components/interfaces/Reports/Reports.utils.tsx b/apps/studio/components/interfaces/Reports/Reports.utils.tsx index eede5de73bc..eb2337e6ce1 100644 --- a/apps/studio/components/interfaces/Reports/Reports.utils.tsx +++ b/apps/studio/components/interfaces/Reports/Reports.utils.tsx @@ -22,7 +22,7 @@ export const queriesFactory = ( if (queryType === 'db') { return { ...acc, - [k]: () => useDbQuery(sql), + [k]: () => useDbQuery({ sql }), } } else { return { diff --git a/apps/studio/data/read-replicas/replicas-query.ts b/apps/studio/data/read-replicas/replicas-query.ts index 545f17b34e0..afc080a889d 100644 --- a/apps/studio/data/read-replicas/replicas-query.ts +++ b/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 = ( 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, } ) diff --git a/apps/studio/hooks/analytics/useDbQuery.tsx b/apps/studio/hooks/analytics/useDbQuery.tsx index 6c13374ea53..583f3a09249 100644 --- a/apps/studio/hooks/analytics/useDbQuery.tsx +++ b/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 { isLoading: boolean @@ -21,14 +23,27 @@ export interface DbQueryHook { 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 diff --git a/apps/studio/pages/project/[ref]/database/query-performance.tsx b/apps/studio/pages/project/[ref]/database/query-performance.tsx index 983a1e418f0..e7dc052881e 100644 --- a/apps/studio/pages/project/[ref]/database/query-performance.tsx +++ b/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 (
- {/* [Joshen] Need to double check what this is about and if it's still relevant */} - {/* {tableIndexEfficiencyEnabled && } */} - : null} />