Commit Graph
7 Commits
Author SHA1 Message Date
claude[bot]andClaude 4e280d4498 fix(studio): disambiguate query cancel telemetry and gate live-mode hotkey (#49137)
<!-- ccr-slack-attribution -->
_Requested by **Pam Chia** · [Slack
thread](https://supabase.slack.com/archives/C076KTY11DF/p1786930264662829?thread_ts=1786930264.662829&cid=C076KTY11DF)_

## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## What kind of change does this PR introduce?

Bug fix. Two telemetry correctness fixes in the Database Connections
feature preview. No visual changes, no new events.

Linear:
[GROWTH-1107](https://linear.app/supabase/issue/GROWTH-1107/fix-database-connections-feature-preview-banner-dead-end-plus)

## What is the current behavior?

### 1. `query_cancel_button_clicked` cannot tell its two surfaces apart

"Cancel query" is reachable from two places on
`/observability/connections`. One is the three-dot dropdown menu on an
activity row. The other is inside the "Confirm to terminate this
session?" dialog, which offers "Cancel query" alongside "Terminate" when
the session is running a query.

**Before:** both buttons fire `query_cancel_button_clicked` with an
identical payload (`activityState`, `isBlocking`). In analysis the two
are one undifferentiated number, so there is no way to see whether
people cancel straight from the row or only after opening the terminate
dialog and reading the "Cancelling it may solve the problem without
closing the connection" warning. That warning is the main nudge away
from terminating, and today we cannot measure whether it lands.

### 2. The live-mode hotkey fires telemetry for users who do not have
the feature

**Before:** the Mod+J live-mode shortcut is registered whenever the page
mounts, regardless of whether the Database Connections feature preview
is enabled. The live badge, the toggle button and the activity query are
all gated on the feature, so a user without it can press Mod+J, emit
`database_connections_live_mode_clicked`, and see nothing change. Those
events inflate the metric with interactions that had no effect.

## What is the new behavior?

### 1. `query_cancel_button_clicked` carries an `origin`

**After:** the event reports which surface it came from, so the two
flows can be split in analysis. Nothing changes for the user.

`QueryCancelButtonClickedEvent` in
`packages/common/telemetry-constants.ts` gains a required `origin:
'dropdown_menu' | 'terminate_dialog'` property, following the shape
already used by `index_advisor_enable_button_clicked` (`origin: 'banner'
| 'dialog'`). Values are snake_case to match the dominant convention
among the existing `origin` unions in that file. In `ActivityRow.tsx`
the shared `onCancelQuery` handler now takes the origin as an argument
and each of the two call sites passes its own value. Because `track()`
is strictly typed per action, the required property is enforced at
compile time rather than by convention.

### 2. The live-mode hotkey is gated on the feature

**After:** Mod+J only does something, and only reports something, for
users who actually have Database Connections enabled. Everyone else is
unaffected, as before.

`useShortcut` already accepts an `enabled` option that disables the
hotkey and hides the command-menu entry. The registration in
`pages/project/[ref]/observability/connections.tsx` now passes `enabled:
isDatabaseConnectionsEnabled`, reusing the value already read from
`useIsDatabaseConnectionsEnabled()` and already used to gate the
activity query and the visible controls on the same page.

## Additional context

**Scope was reduced from the original plan.** GROWTH-1107 originally
covered four items. #49132 rewrote the Database Connections gating model
and superseded three of them, so only the two above remain:

- The feature preview banner is no longer flag-gated, so there is
nothing to gate on `topForPostgres`.
- `isEnabled` on `database_connections_banner_cta_button_clicked` is now
a real variable rather than a constant, since it is true on the new
"Explore Database Connections" variant. It stays as is.
- The wrong-feature fallback in the feature preview modal no longer
triggers for this preview.

Nothing in that area is touched here. GROWTH-1107 has been updated to
reflect the reduced scope.

**Validation** (run locally):

- `tsc --noEmit` in `packages/common` and in `apps/studio`. Studio
reports the same two pre-existing errors before and after this change
and none in the changed files.
- `eslint` on both changed studio files: clean. `lint:ratchet`: passes.
- `vitest --run
components/interfaces/Observability/DatabaseConnections`: 36 passed.
- Prettier check on all three files: clean.


## To test

Verified in a real browser on the studio-staging Vercel preview,
checking telemetry at the wire level (network inspection of `POST
/platform/telemetry/event`). Checks derived from the diff, covering both
fixes and their negative cases.

- [x] Mod+J with the Database Connections feature preview off: no
`database_connections_live_mode_clicked` request fired and no UI change;
the page stays on the enable-preview gate screen
- [x] Mod+J with the preview on: the live badge visibly toggles and
exactly one event fires per press (`newState: "disabled"` on the first
press since live mode starts on by default, then `"enabled"` on the
second)
- [x] "Cancel query" from the activity row dropdown on an active
`pg_sleep(120)` session: `query_cancel_button_clicked` with
`custom_properties:
{"activityState":"active","isBlocking":false,"origin":"dropdown_menu"}`
- [x] "Cancel query" inside the "Confirm to terminate this session?"
dialog: `query_cancel_button_clicked` with `custom_properties:
{"activityState":"active","isBlocking":false,"origin":"terminate_dialog"}`

Opening the terminate dialog in the last check also fired
`session_terminate_button_clicked`, correctly distinct from the cancel
event. No new console errors versus the page-load baseline across all
four checks.

Co-authored-by: Claude <noreply@anthropic.com>
2026-08-19 15:39:07 +08:00
Joshen Lim 60be899fdb Selecting a PID from the overview card should clear filters if not visible in the UI (#49135)
## Context

For Database Connections - the PIDs on the overview cards are selectable
such that clicking on them should scroll the browser down to where the
row is.

However, if the selected PID isn't rendered due to the applied filters,
clicking on it will seemingly do nothing. Changes here hence opt to
remove all filters then scroll to the selected PID into view, so that
users can always quickly find which PID the overview card is
referencing.

Also chucked in some refactors to centralize the management of filters,
and functionality of selecting a PID into their own hooks

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

## Summary by CodeRabbit

* **New Features**
* Added shared filtering for database activity by state, role,
application, search text, and view.
* Activity filters are now preserved in the URL for easier navigation
and sharing.
* Selecting activity metrics or process IDs now automatically reveals
the relevant activity row.
* Blocker view highlights root activities that are blocking other
queries.

* **Bug Fixes**
* Improved selection behavior when the chosen activity is hidden by
active filters.

* **Tests**
* Added coverage for individual, combined, case-insensitive, and
blocker-specific filtering scenarios.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-08-17 17:45:02 +08:00
Joshen Lim 75b90c5de1 Check the session's backend_start for cancelling or terminating sessions (#48929)
## Context

Related to database connections - specifically for cancelling queries or
terminating sessions

PIDs can be re-used, so a more accurate check is to use both PID and
`backend_start` to uniquely identify the session to cancel or terminate

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

* **Bug Fixes**
* Improved query cancellation and session termination reliability by
verifying the active database session before taking action.
* Prevented actions from affecting a different session that reused the
same process ID.
* Added clearer guidance to refresh when a session has changed or is no
longer available.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-08-12 10:14:59 +07:00
Joshen Lim cdfb5b310f Add cancel query action for database connections (#48922)
## Context

Related to Database Connections
- Adds a "cancel query" action for "active" sessions using
`pg_cancel_backend`
- Gentler alternative as the connection stays alive, unlike terminating
the session
- Not applicable for queries idle in transaction as there's no query
running (Disabled in this case)
- Rename "Terminate" to "Terminate session"
- Rename "Abort query" to "Terminate session"

For active queries:
<img width="220" height="135" alt="image"
src="https://github.com/user-attachments/assets/d6ca790d-bb6a-4582-8554-24431388483a"
/>

For idle in txn queries:
<img width="433" height="135" alt="image"
src="https://github.com/user-attachments/assets/615d0651-9f5b-4efc-a5cf-72f93727aa91"
/>

Also updating confirmation modal for terminating session CTA:

For active queries:
<img width="407" height="301" alt="image"
src="https://github.com/user-attachments/assets/e5f56764-11b9-4c10-ba01-d7547aaec872"
/>

All other queries:
<img width="410" height="212" alt="image"
src="https://github.com/user-attachments/assets/8631633f-5d4a-40a7-b089-6980a5180219"
/>



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

## New Features
- Added a separate **Cancel query** action for active database queries.
- Added **Terminate session** to close connections and roll back active
transactions.
- Added safeguards based on query activity and permissions.
- Added confirmation guidance for active queries, including cancellation
options.
- Added loading, success, and error feedback for query cancellation and
session termination.
- Added telemetry for query-cancellation actions.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-08-12 09:56:49 +07:00
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 63e2eb3ca6 Joshen/fe 3971 blocked by visualization (#48187)
## 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 -->
2026-07-23 15:19:54 +08:00