Files
supabase/apps/studio/data/database/supamonitor-enabled-query.ts
T
105df5291d feat: initial supamonitor changes (#42313)
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>
2026-02-17 15:11:46 +08:00

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,
})
}