mirror of
https://github.com/supabase/supabase.git
synced 2026-10-09 03:15:06 +03:00
Joshen Lim
63e2eb3ca6
## Context Improving the "blocked by" visualisation for database connections - to accommodate the situation whereby there might be a chain of blocked process. Intention is so that users can identify whats the root process that's blocking everything - and from there decide if they want to terminate the process or not. Also brings `ActivityRow` out into its separate file since `Activity` is getting big <img width="473" height="299" alt="image" src="https://github.com/user-attachments/assets/21d0d223-5dbd-49d5-877c-815c78cb7482" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Refactor** * Streamlined the database activity view by separating the single-row rendering into its own component, keeping the same end-user experience (status badge, query/“No query”, duration warnings, blocking details, PID copy, and actions). * Kept “Terminate” behind confirmation prompts and preserved role-based restrictions for when termination is available. * **Improvements** * Standardized how activity durations are calculated and how status badges are styled for consistent display. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
28 lines
942 B
TypeScript
28 lines
942 B
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'
|
|
}
|