Files
supabase/apps/studio/components/interfaces/QueryPerformance/QueryPerformance.utils.ts
Joshen Lim c7803b8b9b Chore/add sessions database connections (#48094)
## Context

Initial work for Top for Postgres - adds a "Sessions" section under a
new Observability segment "Database Connections"
NOTE: All the copywriting and naming might change - not sure what's an
ideal title for this
We'll also be iteratively building on top of this UI, adding more
actionable signals instead of just information
Changes are featured flagged, off for public

- This would essentially replace the "View ongoing queries" in the SQL
Editor by providing a dedicated UI
  - It checks against `pg_stat_activity` as per the ongoing queries UI
- We'll also subsequently deprecate the "Ongoing queries" UI in the SQL
editor
- Defaults into a "live mode" where the data is refreshed every 3
seconds via long-polling
<img width="983" height="474" alt="image"
src="https://github.com/user-attachments/assets/16402fe4-0b53-4f9e-9342-cdda26e3778a"
/>
- Supports filtering by state  
<img width="374" height="282" alt="image"
src="https://github.com/user-attachments/assets/562f8fbe-2dc6-48e7-8ec0-de7ffb8348d1"
/>
- Users can also terminate queries through here
<img width="247" height="164" alt="image"
src="https://github.com/user-attachments/assets/23a639dc-8f96-473a-a823-605b0bab02ee"
/>





<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

# Release Notes

* **New Features**
* Added an Observability **Database Connections** page with a live
**Sessions** activity table (state/roles filtering, blocked-by details,
session duration, and per-session termination with confirmation).
* Included a **Live/Pause** toggle to control automatic refresh (~3
seconds).

* **Enhancements**
* Improved Reports selection filtering: supports optional option
quantities, better popover styling, sorted apply behavior, and shows
quantity inline.
* Query performance duration formatting now supports configurable
decimal precision.
  * Tooltips can now render richer content (string or React node).
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-07-21 16:52:03 +08:00

74 lines
2.0 KiB
TypeScript

import * as Sentry from '@sentry/nextjs'
import dayjs from 'dayjs'
import duration from 'dayjs/plugin/duration'
import { getErrorMessage } from '@/lib/get-error-message'
dayjs.extend(duration)
export const formatDuration = (milliseconds: number, precision: number = 2) => {
const duration = dayjs.duration(milliseconds, 'milliseconds')
const days = Math.floor(duration.asDays())
const hours = duration.hours()
const minutes = duration.minutes()
const seconds = duration.seconds()
const totalSeconds = duration.asSeconds()
if (totalSeconds < 60) {
return `${totalSeconds.toFixed(precision)}s`
}
const parts = []
if (days > 0) parts.push(`${days}d`)
if (hours > 0) parts.push(`${hours}h`)
if (minutes > 0) parts.push(`${minutes}m`)
if (seconds > 0) parts.push(`${seconds}s`)
return parts.length > 0 ? parts.join(' ') : '0s'
}
export type QueryPerformanceErrorContext = {
projectRef?: string
databaseIdentifier?: string
queryPreset?: string
queryType?: 'hitRate' | 'metrics' | 'mainQuery' | 'slowQueriesCount' | 'supamonitor'
sql?: string
errorMessage?: string
postgresVersion?: string
databaseType?: 'primary' | 'read-replica'
}
export function captureQueryPerformanceError(
error: unknown,
context: QueryPerformanceErrorContext
) {
Sentry.withScope((scope) => {
scope.setTag('query-performance', 'true')
scope.setContext('query-performance', {
projectRef: context.projectRef,
databaseIdentifier: context.databaseIdentifier,
queryPreset: context.queryPreset,
queryType: context.queryType,
postgresVersion: context.postgresVersion,
databaseType: context.databaseType,
errorMessage: context.errorMessage,
})
if (error instanceof Error) {
Sentry.captureException(error)
return
}
const errorMessage = getErrorMessage(error)
const errorToCapture = new Error(errorMessage || 'Query performance error')
if (error !== null && error !== undefined) {
errorToCapture.cause = error
}
Sentry.captureException(errorToCapture)
})
}