Add top blocker overview card - #48290
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
5 Skipped Deployments
|
|
This pull request has been ignored for the connected project Preview Branches by Supabase. |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughThe Database Connections Overview now identifies the query blocking the most other queries, applies a warning threshold, and displays it in a reorganized metric-card layout with updated query metrics. ChangesDatabase connection metrics
Estimated code review effort: 3 (Moderate) | ~20 minutes Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
apps/studio/components/interfaces/Observability/DatabaseConnections/Overview.tsx (1)
215-323: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winDuplicate clickable-PID structure between "Top blocker" and "Longest running" cards.
Both cards repeat the same
role="button"/tabIndex/onClick/onKeyDownpattern for making a PID clickable (lines 240-253 and 297-310), differing only in the trailing label text. Consider extracting a small shared sub-component (e.g.,ClickablePid) co-located withOverview.tsxto avoid this duplication and centralize the keyboard-activation logic.♻️ Example extraction
const ClickablePid = ({ pid, onSelect }: { pid: number; onSelect: (pid: number) => void }) => ( <span role="button" tabIndex={0} className="normal-nums cursor-pointer hover:underline" onClick={() => onSelect(pid)} onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault() onSelect(pid) } }} > PID: {pid} </span> )🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/studio/components/interfaces/Observability/DatabaseConnections/Overview.tsx` around lines 215 - 323, Extract the duplicated clickable PID markup from the “Top blocker” and “Longest running” cards into a shared ClickablePid component near Overview. Move the role, tabIndex, styling, click handler, and Enter/Space keyboard activation into that component, accepting pid and selection callback props, then replace both inline spans while preserving their existing surrounding labels.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In
`@apps/studio/components/interfaces/Observability/DatabaseConnections/Overview.tsx`:
- Around line 68-83: Update the warnTopBlocker threshold in the query-blocker
calculation to use a strict comparison, so the warning and downstream Top
blocker styling activate only when the blocker count exceeds WARN_TOP_BLOCKER;
preserve the existing count fallback and threshold symbol.
---
Nitpick comments:
In
`@apps/studio/components/interfaces/Observability/DatabaseConnections/Overview.tsx`:
- Around line 215-323: Extract the duplicated clickable PID markup from the “Top
blocker” and “Longest running” cards into a shared ClickablePid component near
Overview. Move the role, tabIndex, styling, click handler, and Enter/Space
keyboard activation into that component, accepting pid and selection callback
props, then replace both inline spans while preserving their existing
surrounding labels.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: dff9d3c4-c929-4bcf-913a-b72cc9ee7db2
📒 Files selected for processing (2)
apps/studio/components/interfaces/Observability/DatabaseConnections/DatabaseConnections.constants.tsapps/studio/components/interfaces/Observability/DatabaseConnections/Overview.tsx
🎭 Playwright Test Results (next)
Details
Skipped testsFeatures › auth-users.spec.ts › should show web3 users as enabled when the matching web3 provider is enabled |
| tooltip={ | ||
| <> | ||
| <p> | ||
| Transactions left open without running a query, which can hold locks and block | ||
| table cleanup for as long as it stays open | ||
| </p> | ||
| <p className="mt-2"> | ||
| Typically indicates an app issue, such as a forgotten COMMIT or ROLLBACK. | ||
| </p> | ||
| </> | ||
| } |
There was a problem hiding this comment.
Not specific to your PR but I noticed the tooltip trigger isn't accessible: you can't tab to it.
There was a problem hiding this comment.
oh good catch! this needs fixing at the UI component level in ui-patterns - will look into this separately 🙏
| <span | ||
| role="button" | ||
| tabIndex={0} | ||
| className="normal-nums cursor-pointer hover:underline" |
There was a problem hiding this comment.
Not specific to your PR either but we should also add classes for the focus state
There was a problem hiding this comment.
gotcha! i'll fix this one separately 🙂 🙏
Braintrust eval report
|
2 participants
Context
Adds a "Top blocker" overview card for Database Connections
This should provide a better signal if there's any process that's behaving as a bottleneck for multiple blocked queries
^ We only highlight the card in red if the query is blocking more than 3 other queries to account - otherwise the signal might be too noisy
Other changes involved
Summary by CodeRabbit