mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 09:55:06 +03:00
Add a Query Performance page implementation powered by [supamonitor](https://github.com/supabase/supamonitor). [Context](https://linear.app/supabase/project/build-extension-for-supabase-query-insights-df4fb145352c/overview) This looks largely the same as the pg_stat_monitor implementation: <img width="2556" height="960" alt="Screenshot 2026-02-12 at 7 35 47 PM" src="https://github.com/user-attachments/assets/bf37466e-f7af-41f2-b4f2-cf8eb6a8c76f" /> Only available on projects on custom AMI - existing users are unaffected <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Supamonitor-based query performance view: charts, aggregated metrics, date-range controls, and export/download. * Added "Application" column for per-application tracking. * Interactive Supamonitor grid: sorting, filtering, keyboard navigation, selection, retry/error handling. * Automatic per-project Supamonitor detection with toggleable UI integration. * **Bug Fixes** * Chart latency calculation prefers histogram data for more accurate p95. * **Documentation** * Minor blog formatting fix. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: kemal <hello@kemal.earth> Co-authored-by: Ali Waseem <waseema393@gmail.com>
48 lines
1.7 KiB
TypeScript
48 lines
1.7 KiB
TypeScript
import { useQuery } from '@tanstack/react-query'
|
|
|
|
import { executeSql } from 'data/sql/execute-sql-query'
|
|
import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
|
|
import { PROJECT_STATUS } from 'lib/constants'
|
|
import type { ResponseError, UseCustomQueryOptions } from 'types'
|
|
import { databaseKeys } from './keys'
|
|
|
|
export type SupamonitorEnabledVariables = {
|
|
projectRef?: string
|
|
connectionString?: string | null
|
|
}
|
|
|
|
export async function getSupamonitorEnabled({
|
|
projectRef,
|
|
connectionString,
|
|
}: SupamonitorEnabledVariables) {
|
|
const { result } = await executeSql<{ libraries: string }[]>({
|
|
projectRef,
|
|
connectionString,
|
|
sql: `SELECT current_setting('shared_preload_libraries', true) AS libraries`,
|
|
})
|
|
|
|
const libraries = result[0]?.libraries ?? ''
|
|
return libraries.split(',').some((lib) => lib.trim() === 'supamonitor')
|
|
}
|
|
|
|
export type SupamonitorEnabledData = Awaited<ReturnType<typeof getSupamonitorEnabled>>
|
|
export type SupamonitorEnabledError = ResponseError
|
|
|
|
export const useSupamonitorEnabledQuery = <TData = SupamonitorEnabledData>(
|
|
{ projectRef, connectionString }: SupamonitorEnabledVariables,
|
|
{
|
|
enabled = true,
|
|
...options
|
|
}: UseCustomQueryOptions<SupamonitorEnabledData, SupamonitorEnabledError, TData> = {}
|
|
) => {
|
|
const { data: project } = useSelectedProjectQuery()
|
|
const isActive = project?.status === PROJECT_STATUS.ACTIVE_HEALTHY
|
|
|
|
return useQuery<SupamonitorEnabledData, SupamonitorEnabledError, TData>({
|
|
queryKey: databaseKeys.supamonitorEnabled(projectRef),
|
|
queryFn: () => getSupamonitorEnabled({ projectRef, connectionString }),
|
|
enabled: enabled && typeof projectRef !== 'undefined' && isActive,
|
|
...options,
|
|
})
|
|
}
|