Files
supabase/apps/studio/components/interfaces/Observability/DatabaseConnections/DatabaseConnections.utils.ts
T
Joshen Lim cbb076ddf1 Blocked by card to only highlight if any query is blocked longer than 10 sec (#48292)
## Context

As per PR title - we're currently showing a "danger" state for the
blocked by metric card as long as there's at least query that's blocked.
This may come off as too noisy in a real database scenario hence opting
to fine tune this behaviour a little

## Changes involved
We'll now only show the "danger" state for the blocked by metric card if
any of the blocked queries are blocked for longer than 10 seconds

<img width="356" height="256" alt="image"
src="https://github.com/user-attachments/assets/e7db5d7e-749a-4c4e-b519-9433a639b0a0"
/>

Otherwise will just be a default card

<img width="359" height="266" alt="image"
src="https://github.com/user-attachments/assets/f9aad85f-8d74-4f55-a3c5-a859d46bd8c1"
/>


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

- **New Features**
- Added clearer blocked-query monitoring, including the longest-blocked
process and duration.
  - Added interactive selection for the longest-blocked process.

- **Bug Fixes**
- Improved activity-duration tracking across active and
idle-in-transaction states.
- Blocked-query warnings now reflect duration thresholds rather than
query count alone.
  - Prevented negative duration values in blocked-query metrics.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-07-27 13:02:55 +08:00

41 lines
1.4 KiB
TypeScript

import dayjs from 'dayjs'
import { type DatabaseActivity } from '@/data/database/activity-query'
export const getDuration = (activity: DatabaseActivity) => {
const { state } = activity
if (state === 'active' && activity.query_start) {
return dayjs().utc().diff(dayjs(activity.query_start).utc(), 'second')
}
if (state === 'idle' && activity.state_change) {
return dayjs().utc().diff(dayjs(activity.state_change).utc(), 'second')
}
if (
(state === 'idle in transaction' || state === 'idle in transaction (aborted)') &&
activity.transaction_start
) {
return dayjs().utc().diff(dayjs(activity.transaction_start).utc(), 'second')
}
return null
}
export const getBadgeVariant = (activity: DatabaseActivity) => {
const { state } = activity
if (state === 'active') return 'success'
if (state === 'idle in transaction' || state === 'idle in transaction (aborted)') return 'warning'
return 'default'
}
// Resolves the timestamp that duration should be measured from for a given state -
// query_start while actively running, transaction_start while idle in transaction.
export const getActivityStart = (activity: DatabaseActivity) => {
if (activity.state === 'active') return activity.query_start
if (
activity.state === 'idle in transaction' ||
activity.state === 'idle in transaction (aborted)'
) {
return activity.transaction_start
}
return null
}