Commit Graph
8 Commits
Author SHA1 Message Date
Joshen Lim 6fea2be680 Joshen/fe 4027 telemetry for database connections (#48435)
## Context

Adding telemetry for the following actions on the database connections
page

- Toggling of live mode
- Applying the various filters
- Clicking on the overview metric cards
- Clicking of terminate CTA + Confirm terminate

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

- **Accessibility**
- Added a descriptive label to the AI Assistant actions menu trigger for
improved screen-reader support.

- **Observability**
- Added tracking for database connections interactions: live-mode
toggles, session filter updates, blocker-view toggles, clicks on
observability metric cards, and the session termination flow (both the
terminate action and confirmation submission).
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-07-29 18:36:55 +08:00
Joshen Lim ded5bc525b Joshen/fe 4000 activity table to show queries which are blockers (#48383)
## Context

One for Database Connections - allow a user to view the root blocking
queries

Adds an additional filter button here that toggles the view
<img width="738" height="142" alt="image"
src="https://github.com/user-attachments/assets/9fea17ba-c6f6-419d-8847-47dba67fc00a"
/>

When toggled, will render a list of the _root_ blocking queries - these
are queries that are at the end of the blocking chain (or otherwise the
problematic ones causing other queries to be blocked)
<img width="964" height="420" alt="image"
src="https://github.com/user-attachments/assets/5300f523-6abe-49b6-92d0-7e16bbddd291"
/>

Within this view - you can expand the row to view the blocking chain
<img width="950" height="335" alt="image"
src="https://github.com/user-attachments/assets/bb07095a-3841-4db6-8959-ac2bb264ebf6"
/>

## Other changes involved
- Realised that "Top blocker" overview metric card logic is incorrect
- Was previously naively checking the length of the `blocked_by` array,
but it should be consider the nested chain length instead, so this PR
fixes that
<img width="364" height="108" alt="image"
src="https://github.com/user-attachments/assets/89beccef-f6f0-43d1-9dcf-fc35958b09e5"
/>
- Clicking the PID if highlighted on a metric card will not scroll to
the PID if it's already selected. This PR fixes that

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

* **New Features**
* Added a **Root blockers** view to highlight sessions that block
others, with expandable blocking chains revealing related waiting
activity.
* **Bug Fixes**
* Updated blocking metrics to use **transitive** blocker counts and
improved cycle protection and behavior when activity records are
missing.
* The blockers view now consistently affects state/application/role
quantities, and **reset filters** clears the view.
* **Refactor / UI**
* Improved the sessions table with grouped/nested rows, clearer waiting
indicators, and more consistent expand/collapse behavior.
* **Tests**
* Expanded coverage for blocking/waiting chain traversal and branching
scenarios.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-07-29 16:55:28 +08:00
Joshen Lim 0987824674 Clean up + add unit tests for database connections (#48372)
## Context

As per PR title - no functional / visual changes, just some code clean
up / refactor + adding unit tests

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

* **New Features**
* Added database connection metrics covering active, blocked, and
idle-in-transaction queries.
* Enhanced insights for the longest-running query and the top blocker
(most queries blocked), including warning indicators based on duration
thresholds.
* **Bug Fixes**
* Improved consistency and accuracy of database-activity calculations in
the connection overview.
* **Refactor**
* Centralized metric derivation so the UI uses the same computed logic
everywhere.
* **Tests**
* Added metric-calculation tests with controlled time to validate
multiple scenarios and warning behaviors.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-07-28 13:15:51 +08:00
Joshen Lim 6058ee7962 Add focus states for spans in overview cards (#48354)
## Context

Tiny one to address for a11y stuff for the spans in the metric cards for
database connections overview section

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

## Summary by CodeRabbit

* **Style**
* Improved hover and keyboard-focus styling for process ID details in
database observability metrics.
* Added a pointer cursor and smoother visual transitions to make
interactive details easier to identify.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-07-27 18:50:56 +08:00
Joshen Lim 22284f1786 Use table for roles tooltip instead (#48353)
## Context

Opting to use native `table` element instead for the roles tooltip in
`DatabaseConnections` to better handle varying role name lengths

### Before
<img width="314" height="226" alt="image"
src="https://github.com/user-attachments/assets/f8a5f7a2-be2f-4ad6-a1f0-7a7812800819"
/>

### After
<img width="332" height="191" alt="image"
src="https://github.com/user-attachments/assets/dcb30f5d-641c-4b42-b31d-bf6d76086791"
/>


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

* **Style**
* Improved the layout and readability of the “Connections by roles”
tooltip in database observability metrics.
* Role labels and connection counts are now presented in a clearer
tabular format.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-07-27 18:50:38 +08:00
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
Joshen Lim fb7debec25 Add top blocker overview card (#48290)
## 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
<img width="977" height="256" alt="image"
src="https://github.com/user-attachments/assets/3d5129a8-f0d7-40a6-808e-0d902889d997"
/>

^ 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

<img width="965" height="262" alt="image"
src="https://github.com/user-attachments/assets/f3fda77a-8d52-4e5d-8717-66a26f511a3c"
/>

## Other changes involved
- Am swapping the card positions around a little
- Longest running query card shows the PID as the primary information,
followed by the duration of the run



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

* **New Features**
* Added a **Top blocker** metric to the Database Connections Overview to
highlight the PID/account blocking the most other queries.
* Warning styling now appears when a query blocks more than **3** other
queries.
* Reorganized the metrics layout and ordering for improved visibility
(active, idle-in-transaction, blocked, top blocker, and longest
running).
* **Bug Fixes**
* Updated tooltip and guidance text for clearer explanations of blocked
and idle-in-transaction states.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-07-27 11:08:57 +08:00
Joshen Lim cf7da58eb3 Add overview section for database connections (#48147)
## Context

Building on top of "Database Connections" - this adds a top summary
section, again from `pg_stat_activity`
<img width="948" height="324" alt="image"
src="https://github.com/user-attachments/assets/f4968193-0a5f-4754-a630-40685b747999"
/>

Each block comes with a tooltip in hopes to educate the significance of
each metric
- Connections: Spread of connections per database role
<img width="313" height="164" alt="image"
src="https://github.com/user-attachments/assets/8ceeab5d-b960-4be3-9a5b-8600bd5cf303"
/>
- Active queries: Rough representative of activity
<img width="350" height="196" alt="image"
src="https://github.com/user-attachments/assets/f9705ff1-a869-409a-86b6-50170a169674"
/>
- Idle in transaction: Important to identify as this indicates locks
(Suggests root cause)
<img width="350" height="196" alt="image"
src="https://github.com/user-attachments/assets/f9705ff1-a869-409a-86b6-50170a169674"
/>
- Blocked queries: Also important to identify stuck queries
<img width="335" height="183" alt="image"
src="https://github.com/user-attachments/assets/57255fb8-24f6-4ddd-aa54-850a77173b5c"
/>
- Longest running query: Might be useful to identify unusually long
queries
- Will be `text-warning` if exceeds 30 seconds for active queries,
`text-destructive` if exceeds 10 seconds for queries idle in transaction
<img width="342" height="119" alt="image"
src="https://github.com/user-attachments/assets/f6783b43-058a-4a32-a40c-0bc64f23d2ce"
/>

"Summarize activity" CTA leverages on the Assistant to give a quick
overview - highlights any potential issues for quick reference
<img width="1918" height="958" alt="image"
src="https://github.com/user-attachments/assets/340121fe-3186-48a5-8023-fbac2a93397a"
/>

## Other changes
- Hides "View running queries" in SQL Editor if `topForPostgres` feature
flag is enabled (since this UI is meant to replace that)

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

* **New Features**
* Added a Database Connections observability overview with metric cards
(connections, longest-running, active, blocked, idle-in-transaction) and
an interactive “Longest running” PID selector.
* Added a “Summarize activity” AI assistant dropdown that starts a
timestamped, activity-aware summary chat.
* **Improvements**
* Enhanced live activity refresh (including window-focus updates) and
standardized duration warning thresholds for active and
idle-in-transaction sessions.
* Improved hover details for query previews and allowed richer tooltip
content for metric labels.
* **Feature Changes**
  * Gated the “View running queries” bottom panel behind a feature flag.
* **Bug Fixes**
* Refined running-too-long badge and warning styling for
idle-in-transaction cases.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-07-22 17:25:56 +08:00