Commit Graph

17 Commits

Author SHA1 Message Date
kemal.earth dcca71f694 fix(studio): query performance detail panel metadata (#45690)
## 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?

Tailwind 4 applies `divide` a little bit differently, so a small fix
applied here to get it back to how it looked.

| Header | Header |
|--------|--------|
| <img width="485" height="488" alt="Screenshot 2026-05-07 at 16 41 18"
src="https://github.com/user-attachments/assets/d7f678fb-1179-4153-99fa-bfbe247fe519"
/> | <img width="485" height="487" alt="Screenshot 2026-05-07 at 16 41
24"
src="https://github.com/user-attachments/assets/a2ce53d4-5296-475c-a4d8-38b0820e820c"
/> |




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

## Summary by CodeRabbit

* **Style**
* Adjusted metadata header spacing and list item padding in the Query
Performance interface for improved visual consistency and layout
alignment.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-07 16:55:33 +01: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
Joshen Lim 564f4f66ee Joshen/fe 2660 clean up stale feature flags enabled for 2 months part 1 (#43329)
## Context 

Just cleaning up feature flags that have been toggled on for all users
and unchanged for the past 2 months
- advisorRules
- newJwtSecrets
- isWorkOSTPAEnabled
- EnableOAuth21
- gitlessBranching
- showRefreshToast
- awsPrivateLinkIntegration
- useBedrockAssistant (Already not used)
- enableStripeSyncEngineIntegration
- ShowExplainWithAiInQueryPerformance

Doing it in 2 parts so its easier for review
2026-03-04 13:08:39 +08:00
Bobbie Soedirgo 105df5291d feat: initial supamonitor changes (#42313)
Add a Query Performance page implementation powered by
[supamonitor](https://github.com/supabase/supamonitor).
[Context](https://linear.app/supabase/project/build-extension-for-supabase-query-insights-df4fb145352c/overview)

This looks largely the same as the pg_stat_monitor implementation:

<img width="2556" height="960" alt="Screenshot 2026-02-12 at 7 35 47 PM"
src="https://github.com/user-attachments/assets/bf37466e-f7af-41f2-b4f2-cf8eb6a8c76f"
/>

Only available on projects on custom AMI - existing users are unaffected

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

* **New Features**
* Supamonitor-based query performance view: charts, aggregated metrics,
date-range controls, and export/download.
  * Added "Application" column for per-application tracking.
* Interactive Supamonitor grid: sorting, filtering, keyboard navigation,
selection, retry/error handling.
* Automatic per-project Supamonitor detection with toggleable UI
integration.

* **Bug Fixes**
* Chart latency calculation prefers histogram data for more accurate
p95.

* **Documentation**
  * Minor blog formatting fix.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: kemal <hello@kemal.earth>
Co-authored-by: Ali Waseem <waseema393@gmail.com>
2026-02-17 15:11:46 +08:00
Ali Waseem c39747f8b2 feat: added copy prompt button for AI assistant for your own agent (#42624)
## 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?

Any instance where we want to ask the AI assistant, we create a copy
prompt button for your agent

## Demo


https://github.com/user-attachments/assets/c6afe319-ad36-49b7-a244-a8bf04c809a1



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

## Summary by CodeRabbit

* **New Features**
* Introduced a new dropdown-style AI assistant trigger across explain,
debug, and lint features with improved interaction flow.
* Added copy-to-clipboard functionality for AI prompts with visual
feedback confirmation.
* Enhanced AI assistant integration across query performance, SQL
editor, and lint detail interfaces for consistent experience.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-02-10 20:41:43 +00:00
Ali Waseem ec20b7e326 feature: add explain with AI in query performance (#41415)
* feature: add explain with AI in query performance

* updated comment

* updated to send message right away

* updated prompt

* added event tracking for button

* updated prompt

* updated to use track

* updated event name

* added flag for explain with AI

* updated to remove optional
2025-12-18 19:19:25 +00: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
kemal.earth 90976b7988 fix(studio): human readable formatting for total consumed times (#39011)
* fix: human readable formatting for total consumed times

* chore: accidental turkish spelling of performance

* fix: imports for renamed utils file

* feat: add tests for formatDuration util
2025-09-25 15:35:54 +01:00
kemal.earth 4978d24adc feat(studio): update query pattern section in query details (#38876)
* feat: basic toggle test

* feat: first draft of query pattern revamp

* style: small styling tweaks
2025-09-22 16:43:52 +01:00
kemal.earth 73b0b21bb7 feat(studio): combine time consumed cols in query perf (#38920)
* chore: remove forgotten dayjs helper

* feat: combined time consumed column
2025-09-22 14:54:24 +01:00
kemal.earth 4d91b0956c feat(studio): query details metadata tidy up (#38867)
* feat: move query details to sheet

This moves the click through on Query Performance to a sheet as opposed to a resizable area. This gives us more space to play with and sets us up for the Query details revamp.

* fix: tabs font size

* style: expand size of sheet

* feat: hasOverlay prop for sheets

* feat: add optional overlay for sheets

* fix: closing only when clicking outside of rows

* style: width of panel on different  viewports

* fix: horizontal scroll for table

* fix: query queries label check in metrics

* feat: tidying up metadata values in query details

* feat: tidy up ms values

* fix: query pattern heading
2025-09-22 13:35:58 +01:00
kemal.earth 5fe3383c39 feat(studio): remove query performance tabs (#38606)
* feat: remove tabs and unify columns

This removes the tabs from Query Performance with unified columns in the table.

* chore: remove unused imports

* chore: small adjustment to min max and mean time col size

* chore: remove unused prop
2025-09-11 15:20:52 +01:00
Taishi 97b631fff7 Add SQL syntax highlighting to Query Performance page (#38386)
* Add CodeBlock for SQL query display to add syntax highlight

* use monaco editor for better highlighting

* create `SqlMonacoBlock` component for SQL in detail panel

* add mean_time to most_time_comsuming queries

* make outline transparent

* Add keyboard navigation for query performance grid

* Stop default RDG behavior on arrow key navigation

* Update column minWidth values to remove horizontal scrollbar

* Load SqlMonacoBlock and Editor client-side only

- following a pattern in `SQLEditor.tsx`
2025-09-05 00:20:05 +00:00
Jordi Enric a023a59ec5 fix crash in query performance (#37758)
* fix crash

* undo query perf

* fix crash
2025-08-08 09:55:01 +02:00
Ivan Vasilov 98ca85156a chore: Use sql-formatter for formatting all SQL in the studio (#33071)
* Bump the sql-formatter dependency.

* Add a function formatQuery which is a wrapper around sql-formatter.

* Replace all formatSQL features to use the new function formatSql.

* Remove unneeded RQ for formatting.

* Small fix.
2025-01-27 13:04:31 +01:00
Ivan Vasilov 5cf8f30e23 chore: Remove obsolete flags (#22915)
* Remove showS3Connection flag.

* Remove showAnonUserFilter flag.

* Remove   enableVercelConnectionsConfig flag.

* Remove indexAdvisor flag.

* Remove queryPerformanceV2 flag.

* Remove unused files.

* Remove unneeded packages.

* Remove the v2 suffix from the query performance folder.
2024-04-22 09:38:41 +02:00