Commit Graph

13 Commits

Author SHA1 Message Date
Ali Waseem
42c0cb7171 feat(studio): keyboard shortcuts for observability pages (#46277)
## Summary

Wires Linear-style keyboard shortcuts across all observability pages —
refresh, time picker, filters, and sub-page navigation — with hover
tooltips surfacing each binding.

| Page | Shortcut | Action |
| --- | --- | --- |
| Overview | `Shift+R` | Refresh report |
| Overview | `Shift+P` | Open time picker |
| Query Performance | `Shift+R` | Refresh report |
| Query Performance | `R` then `C` | Reset report
(`pg_stat_statements_reset`) |
| Query Performance | `Shift+F` | Search queries |
| Query Performance | `F` then `C` | Reset filters |
| API Gateway | `Shift+R` | Refresh report |
| API Gateway | `Shift+P` | Open time picker |
| API Gateway | `Shift+F` | Add filter |
| API Gateway | `F` then `C` | Reset filters |
| API Gateway | `Shift+S` | Filter requests by service |
| Database | `Shift+R` | Refresh report |
| Database | `Shift+P` | Open time picker |
| Auth | `Shift+R` | Refresh report |
| Auth | `Shift+P` | Open time picker |
| Data API | `Shift+R` | Refresh report |
| Data API | `Shift+P` | Open time picker |
| Storage | `Shift+R` | Refresh report |
| Storage | `Shift+P` | Open time picker |
| Realtime | `Shift+R` | Refresh report |
| Realtime | `Shift+P` | Open time picker |
| Edge Functions | `Shift+R` | Refresh report |
| Edge Functions | `Shift+P` | Open time picker |
| All observability pages | `U` then `O/Q/G/D/P/A/F/S/L` | Jump to
sub-page |

## Test plan

- [ ] Each shortcut fires on its page; tooltip on hover shows the
binding
- [ ] Picker shortcut toggles the popover open/closed without leaving
the tooltip visible
- [ ] Reset-report on Query Performance opens the confirm modal
- [ ] `Escape` on the query search clears the value, then blurs
- [ ] No "Shift+R already registered" / Tooltip controlled-uncontrolled
warnings in the console

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

* **New Features**
* Keyboard shortcuts to navigate Observability pages and perform common
actions (refresh, toggle date picker/interval, focus search, reset
filters, create reports).
* Shortcut hints shown on relevant buttons and controls; date pickers
and interval dropdowns can be controlled via shortcuts.
* Global shortcut groups/registries added for Observability navigation
and page actions.

<!-- review_stack_entry_start -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46277?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack)

<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-25 07:37:16 -06:00
Charis
2d4e87f579 studio: SafeSql for reports, query performance, privileges (4/7) (#45998)
## Summary

Part 4 of the SafeSql migration stack
([#45897](https://github.com/supabase/supabase/pull/45897),
[#45903](https://github.com/supabase/supabase/pull/45903),
[#45990](https://github.com/supabase/supabase/pull/45990), this PR, …).

Converts the remaining reports, query performance, observability, index
advisor, and privileges call sites of `executeSql` to produce
`SafeSqlFragment` values. The `ReportQuery.sql` field flips from
`string` to `SafeSqlFragment`, which cascades into every consumer —
landed here atomically so each branch typechecks cleanly.

Touched areas:

- `interfaces/Reports/*` — `ReportQuery.sql: SafeSqlFragment`, plus all
report definitions/utilities updated
- `interfaces/QueryPerformance/useQueryPerformanceQuery.ts`
- `interfaces/Database/IndexAdvisor/*` and
`data/database/{table-index-advisor,retrieve-index-advisor-result}-query.ts`
-
`data/privileges/{table-api-access,update-exposed-entities}-mutation.ts`
- `interfaces/Storage/StoragePolicies/StoragePolicies.tsx`
- `hooks/analytics/useDbQuery.tsx`
- `Observability/useSlowQueriesCount.ts` +
`useQueryInsightsIssues.utils.test.ts`

## Test plan

- [x] `pnpm typecheck` passes
- [x] `useQueryInsightsIssues.utils.test.ts` passes
- [x] Dev-server smoke test: reports pages, query performance, index
advisor, storage policies

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

* **Refactor**
* Reworked SQL construction and typings across reporting, query
performance, index advisor, and privilege features to use safer SQL
fragments, improving reliability and preventing query composition
issues.
* **Types**
* Reporting query types were split to distinguish database vs. logs
queries, enabling correct handling and validation.
* **Docs/Utils**
  * Added a helper to consistently generate logs SQL for report hooks.
* **Tests**
  * Updated tests to exercise the new SQL-building API.

<!-- review_stack_entry_start -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45998)

<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-15 14:50:38 -04:00
Ivan Vasilov
56de26fe22 chore: Migrate the monorepo to use Tailwind v4 (#45318)
This PR migrates the whole monorepo to use Tailwind v4:
- Removed `@tailwindcss/container-queries` plugin since it's included by
default in v4,
- Bump all instances of Tailwind to v4. Made minimal changes to the
shared config to remove non-supported features (`alpha` mentions),
- Migrate all apps to be compatible with v4 configs,
- Fix the `typography.css` import in 3 apps,
- Add missing rules which were included by default in v3,
- Run `pnpm dlx @tailwindcss/upgrade` on all apps, which renames a lot
of classes
- Rename all misnamed classes according to
https://tailwindcss.com/docs/upgrade-guide#renamed-utilities in all
apps.

---------

Co-authored-by: Jordi Enric <jordi.err@gmail.com>
2026-04-30 10:53:24 +00:00
Charis
4a0bb36ca8 style: require sorted imports in studio/components (#44408)
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
2026-04-01 10:22:37 +02:00
Jordi Enric
c689e91160 fix(observability): guard pg_stat_statements queries against missing extension FE-2843 (#44357)
## Problem

On self-hosted Supabase instances where the `pg_stat_statements`
extension is not installed, the Observability Overview page
automatically queries the extension on every page load. This produces
"relation pg_stat_statements does not exist" errors in Postgres logs for
all projects without the extension. Additionally, if a user navigated to
the Query Performance page, they received a generic error with no
actionable guidance. A secondary issue allowed malformed sort URL params
(e.g. `?sort=created_at:asc&order=asc`) to be interpolated directly into
SQL ORDER BY clauses.

## Fix

- Wrapped the `useSlowQueriesCount` SQL in a `CASE WHEN EXISTS (SELECT 1
FROM pg_extension WHERE extname = 'pg_stat_statements')` guard. The
query now returns 0 silently instead of erroring when the extension is
absent.
- Added a `VALID_SORT_COLUMNS` whitelist in
`generateQueryPerformanceSql`. Invalid column names from URL params are
rejected and the query falls back to the preset default ORDER BY.
- When the Query Performance page fails because `pg_stat_statements`
does not exist, a `warning` admonition now appears with "Enable it in
Database -> Extensions" guidance instead of a generic destructive error.
The Sentry capture is skipped for this expected configuration state.
- Extracted `buildSlowQueriesCountSql` as a testable function and added
unit tests for both fixes.

## How to test

**Extension not installed (self-hosted):**
1. Run a self-hosted Supabase instance without the `pg_stat_statements`
extension enabled.
2. Navigate to the Observability Overview page.
3. Check Postgres logs -- no "relation pg_stat_statements does not
exist" errors should appear.
4. Navigate to the Query Performance page.
5. Expected: a yellow warning admonition appears saying the extension is
not enabled, with a link to Database -> Extensions. No red error.

**Extension installed (normal flow):**
1. With `pg_stat_statements` installed, navigate to Observability
Overview.
2. Expected: slow queries count loads as normal.
3. Navigate to Query Performance -- data loads as normal.

**Invalid sort URL param:**
1. Navigate to
`/project/<ref>/observability/query-performance?sort=created_at:asc&order=asc`.
2. Expected: the page loads and falls back to the default sort order
(total time descending). No SQL error in logs.

**Unit tests:**
```
node apps/studio/node_modules/vitest/dist/cli.js run --no-coverage \
  apps/studio/components/interfaces/Observability/useSlowQueriesCount.test.ts \
  apps/studio/components/interfaces/QueryPerformance/useQueryPerformanceQuery.test.ts
```
All 28 tests should pass.

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-31 17:23:39 +02:00
Jordi Enric
2e1795dfa0 feat(studio): add pagination to query performance page FE-2774 (#43697)
## Problem

The Query Performance page loaded all results in a single query with a
fixed limit of 20 rows, giving users no way to browse beyond the first
page. There was also no way to control how many rows were shown at once.

## Fix

adds pagination 

## How to test

- Navigate to `/observability/query-performance` in Studio
- scroll to bottom
- should automatically load more results

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-23 15:27:43 +01:00
Joshen Lim
cc31ed72c1 Add source filter in query performance page (#43740)
## Context

Adds a source filter for the query performance advisor so you can filter
out queries from the dashboard, or not from the dashboard

<img width="309" height="217" alt="image"
src="https://github.com/user-attachments/assets/c1fab9af-e57e-482f-afdb-d77a6600edb3"
/>

For transparency how this works:
- Queries fired via the dashboard through the /query endpoint get
enriched with metadata from the API to include a comment like `--
source: dashboard`
- That's mainly how this filter works atm, to check if this comment
exists if the source "Dashboard" is selected, and the inverse if the
source "Non dashboard" is selected
2026-03-18 20:22:47 +08:00
kemal.earth
1e84d28c81 feat(studio): filter out internal schemas from index advisor (#41428)
* feat: prototype of filtering out internal schemas from index advisor

* chore: coderabbit suggestion

* chore: use zod for ia schema
2025-12-18 13:24:18 +00:00
Jordi Enric
9685711519 chore(query-perf): better error handling and sentry tracking (#41278)
* add retry

* handle and capture errors

* adds tests

* improve Sentry integration

* remove SQL logging from query performance error capture

* fix error msg prop handling

* add max and baseline to alert

* undo change meant for other branch oops
2025-12-15 20:39:09 +01:00
kemal.earth
ce48c64f68 feat(studio): generic observability banner (#40957)
* feat: more generic observability banner on db report

* feat: try popup in corner

* feat: tidy up and fix up event as well

* feat: add event for dismiss as well

* feat: add supplementary link at bottom of reports

* fix: sizing of fonts

* feat: banner stack approach

* fix: isIndexAdvisorAvailable dep

* chore: remove unused import for old banner

* feat: remove unused isDismissed

* chore: remove unused cn

* chore: change prio on query perf page

* chore: remove unused sendEvent

* chore: better useEffect cleanup

* chore: remove unused index advisor notice

* fix: priority of banner stack

* fix: first time loader flickering

* chore: lowercase the word Free

* feat: add IS_PLATFORM to make sure metrics api banner is scoped to platform

* chore: another copy update for observability link

* fix: telemetry keys to match styleguide

* fix: use the correct way to apply events

* feat: add events for index advisor banner too

* chore: delete unused old banner

* fix: dismiss buttons not working

* feat: add extra event to enable index advisor
2025-12-04 11:42:31 +00:00
kemal.earth
511b6faada feat(studio): surface index advisor indicators (#40788)
* feat: change the check to show index advisor tab at all times

* fix: hide add to log drains on export menu in query perf

* fix: small fallback for pathname check

* fix: query perf header block responsiveness

* feat: admonition for index advisor

* fix: add aria-describedby to query perf sheet

* feat: proper way to do sheet description

* chore: better title spacing in panel

* fix: indexes in use empty state

* fix: key in observability menu

* feat: better highlighting of index advisor issues

* feat: add docs button to empty indexes tab

* feat: remove unused code

* feat: use button tooltips for reset and refresh to gain space

* feat: add dismiss to index advisor banner

* feat: add warnings filter to query perf

* feat: filter all queries for warnings

* fix: selected state for warning rows

* fix: fallback for isLogs check

* fix: other instance of download button

---------

Co-authored-by: Ali Waseem <waseema393@gmail.com>
2025-11-27 08:20:07 -07:00
Ali Waseem
f88277a7c8 Fix: Bring back roles filter in Query performance (#40025)
* brought back roles filter

* feat: hide roles on with monitor

---------

Co-authored-by: kemal <hello@kemal.earth>
2025-10-31 07:20:11 -06:00
kemal.earth
70a64f8c00 feat(studio): query performance metrics chart (#39431)
* feat: setup chart area and tabs

This sets up the area where we can expect the insights chart as well as the tabs mechanism.

* feat: parse pg_stat_monitor logs as json

* feat: create query perf chart utils and move transfrom function

Created a utils file for our QueryPerformanceChart component. This moves the logs to JSON transform function there.

* feat: add timerange to chart

* feat: add date selector to query perf overview

This adds the selector to the top right of the page allowing the user to switch between last hour, 3 hours and 24 hours

* feat: modify chart component to accomodate hiding bits

* feat: add metrics to each tab

* chore: update to 60 min by default and some css

* feat: centralise data parsing for logs

* feat: clean up filters bar

This rewires the export to give you the aggregate pg_stat_monitor data. Also removes unused buttons and filters.

* feat: percentiles for query latency chart

* feat: filter out non evenets from pg_stat_monitor logs

* feat: utils for cache misses and hits

* feat: add selected query to chart on click

* feat: add click through to query panel

* chore: tidy up files

* chore: distinction between selected and open panel

* feat: move query performance fully into reports area

* fix: preserve query params on reports link

* fix: remove right icon syntax in report menu

* chore: remove cache misses from cache chart

* refactor: backwards compatibility for statements if right db version isnt available

* chore: delete randomly generated empty file

* chore: tidy up unused imports and vars

* chore: remove console logs

* chore: remove isMounted from query perf

* fix: cmd k query perf path

* feat: simplify query latency only p50 and p95

This seems to give us a more accurate reading as we can calculate these two

* fix: cache hit rate not showing inside query details

* chore: chart bg colour adjust

So it contrasts a little better on light mode.

* feat: show selected query on other verticals

* feat: bring back symlink in advisors
2025-10-15 13:39:29 +01:00