Commit Graph
22 Commits
Author SHA1 Message Date
Jordi EnricandClaude Sonnet 4.6 5d9cf3971f fix(studio): improve memory and swap units in DB reports (#45889)
Fixes [DEBUG-94](https://linear.app/supabase/issue/DEBUG-94)

## Summary

- **Min MB units**: Added \`formatBytesMinMB\` helper that always
formats byte values in at least MB. Applied to RAM and swap y-axis tick
formatters, tooltips, and chart headers.
- **Swap chart scale**: Every Supabase compute instance is provisioned
with **1 GB of swap regardless of size** (per
[docs](https://supabase.com/docs/guides/troubleshooting/memory-and-swap-usage-explained-aPNgm0)),
so the swap y-axis always shows at least 0 to 1 GB. Low swap usage no
longer fills the full chart height. Removed the show/hide limit toggle
since the limit is implicit in the y-axis scale.
- **Swap units in header/tooltip**: Fixed all three formatters (initial
header, hover-sync header, tooltip) to use \`formatBytesMinMB\` for swap
so the value always shows a unit like "2.00 MB".
- **Reference-line defensive fix**: Added a \`customValue\` fallback in
\`useAttributeQueries\` so future reference-line attributes that use
\`customValue\` instead of \`value\` are not silently overwritten to 0.

## Test plan

- [ ] Open DB Reports and verify RAM/Swap y-axis labels show MB (or GB
for large values), never KB or bytes
- [ ] Hover a bar in the swap chart and verify tooltip and header show
the same value with a unit (e.g. "2.00 MB")
- [ ] With low or zero swap usage, the chart bars are flat and the
y-axis goes 0 to 1 GB
- [ ] CPU chart limit toggle still renders at 100% (regression check on
the \`useAttributeQueries\` fallback change)

🤖 Generated with [Claude Code](https://claude.ai/claude-code)

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-18 13:12:25 +00:00
Gildas Garcia 86a3f8b03d chore: upgrade to react-19 (#45886)
- Most changes are related to either types or `useRef` usages (it now
requires an initial value).
- also updated `vaul` to its latest version and haven't noticed any
change ([design-system
demo](https://design-system-git-react-19-supabase.vercel.app/design-system/docs/components/drawer))

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

* **New Features**
  * Upgraded workspace to React 19.

* **Bug Fixes**
* Improved null-safety and ref handling across editors, UI components,
shortcuts, and markdown/image rendering to reduce runtime errors.
* Safer event/timeout/interval cleanup and more robust command/context
handling.

* **Chores**
  * Bumped vaul dependency versions.

* **Documentation**
* Type and TypeScript accuracy improvements for clearer developer
feedback.

<!-- 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/45886)

<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-15 16:04:41 +02:00
b934e148a3 fix(reports): replace explicit any with number in tickFormatter callbacks (#45794)
## Problem

Recent database report PRs introduced `(value: any)` type annotations in
recharts `tickFormatter` callbacks, pushing the
`@typescript-eslint/no-explicit-any` ESLint ratchet from baseline 1014
to 1017 and blocking all PR merges.

## Fix

Replace `(value: any)` with `(value: number)` in all affected
`tickFormatter` callbacks across the three flagged files. Recharts
always passes a number to tick formatters, so this is a safe and
accurate type.

## How to test

- Run `pnpm lint --filter=studio` and confirm no new
`@typescript-eslint/no-explicit-any` violations appear in the three
changed files
- Check the ESLint ratchet count is back at or below baseline 1014

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

* **Refactor**
* Improved type safety for Y‑axis tick formatters across observability
charts (Memory, Swap, Network throughput, Disk IOPS/throughput/usage,
Replication Lag), ensuring tick values are treated as numeric for more
consistent chart rendering and reliability.

[![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/45794)
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-authored-by: Ali Waseem <waseema393@gmail.com>
2026-05-11 14:41:14 +00:00
Jordi Enric f38872c7a6 refactor(reports): use LazyComposedChartHandler for replication lag (#45748) 2026-05-11 15:36:55 +02:00
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 EnricandClaude Opus 4.6 dc862370f6 feat: improve readability of CPU chart O11Y-1290 (#43822)
## Problem
The CPU usage chart in the Observability dashboard could show values
exceeding 100%, differing from the internal Grafana panel that support
uses for debugging.

## Solution
Add a stackedPercent prop to the chart system that locks the Y-axis to
[0, 100]. When enabled, the chart never visually overflows 100% while
tooltip values remain completely untouched. We fill the rest of the
unused with an "Idle" prop.

# Before
<img width="1240" height="684" alt="CleanShot 2026-03-18 at 16 04 26@2x"
src="https://github.com/user-attachments/assets/c1b1a5ac-86e0-4d6b-9bc4-c7837f30c28c"
/>

## After
<img width="1240" height="684" alt="CleanShot 2026-03-18 at 16 03 13@2x"
src="https://github.com/user-attachments/assets/419eea55-176d-46c4-8780-b8c372428047"
/>
<img width="934" height="700" alt="CleanShot 2026-03-18 at 16 03 41@2x"
src="https://github.com/user-attachments/assets/9b5ef61d-21f4-40e4-ab0c-1a11caadb1f8"
/>

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-23 15:28:16 +01:00
4a9def58c1 feat(studio): rename reports to observability (#40317)
* feat: rename reports to observability on nav sidebar

* fix: observability route

* feat: observability navigation and redirects

* fix: first time load redirects

* feat: change auth overview reports link

* feat: clean up of other links to observability sections

* fix: query perf redirects

* chore: find exhaustive deps and disable for time being

* fix: charis suggested fixes

* fix: forgotten suggested fix

* chore: delete old reports views files

* fix: paths in reports tests

* fix: url sync useEffect should trigger only once

* feat: reorganise observability sidebar

* fix: data api not being selected

* fix: wrong layout for realitime

* fix: custom reports reloading

---------

Co-authored-by: Charis Lam <26616127+charislam@users.noreply.github.com>
Co-authored-by: Ali Waseem <waseema393@gmail.com>
2025-11-18 17:54:05 +00:00
Joshen Lim 50ece6a4f6 Replace LogChartHandler with LazyComposedChartHandler in ReportChartUpsell (#39286) 2025-10-08 10:39:29 +08:00
Kevin Grüneberg e4aee0728c chore: project daily stats caching / deprecated props (#39277)
Remove deprecated props that have no effect on behaviour and fix the caching (based on date instead of timestamp)
2025-10-06 16:39:49 +08:00
Jordi EnricandJoshen Lim c9033b1035 FE-1864 FE-1868 reports kaizen 2 (#38881)
* make opts configurable per report

* Minor nits

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2025-09-23 13:56:48 +02:00
f65884f341 Reports consolidation 1: Edge Functions (#38129)
* wip

* add formatTimestamp for reports

* add tests for formatTimestamp

* fix type err

* rm old chart logic

* do not retry replication sources

* update report config schema

* use report config

* fix charts, simplify config

* sync charts

* rm comment

* usefilltimeseries

* move chart upsell to its own component

* cleanup v2 chart component

* fix chartheader function format bug

* make attributes dynamic

* move types to its own file

* update reportv2chart types

* update reportv2 chart type

* use new edgefn report

* rm mock

* rm old code

* fix type err

* fix type err

* rename hook

* return sql in dataprovider

* add button to open in log explorer in chart header

* fix type

* fix chart type toggle

* fix type error

* export data transformation for testing

* add tests for data transformation

* rm dupped code

* add report settings to edge fn report

* rm mocked data

* rename

* fix type err

* Apply suggestion from @joshenlim

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>

* rm unnecessary div

* rm unnecessary props from report upsell

* cleaner query keys

* move loadin/error/empty states to inside panel content to prevent layout shift

* use card instead of panel

* use buttontooltip in chartheader

* use buttontooltips in buttons with tooltips

* rm export default

* rm export defualt

* rm i from key

* fix status code transformation

* fix filltimeseries

* add tests for filltimeseries

* fix data transform

* pass xaxis key to chart

* refactor hover state to use timestamp not index

* fix tests

* fix areachart

* fix barchart

* fix chartheader

* fix composedchart

* fix stacked

* fix type missing xaxiskey

* type fix

* Revert "refactor hover state to use timestamp not index"

This reverts commit cfd7886460.

* undo charthover changes, fix data aggregation

* Revert "fix tests"

This reverts commit e5200a2035.

* move transforms to testable functions, add tests

* nit refactors and clean up

* feat: add aws nimbus cloud provider (#38312)

* feat: add aws nimbus cloud provider

* Fix return type of useCustomContent hook

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>

* add utc plugin to dayjs

* move plugins to vitest setup

* rm customparser plugin

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Co-authored-by: Alaister Young <alaister@users.noreply.github.com>
2025-09-01 11:10:30 +02:00
Jordi Enric 28e5a0ef19 add syncing between charts (#37599)
* add syncing between charts

* fix typeerr

* cleanup
2025-08-07 18:51:45 +02:00
Joshen Lim a26f96570e Fix missing x axis labels in reports (#37378)
* Fix missing x axis labels in reports

* Improve guard
2025-07-22 16:51:28 +02:00
Jordi Enric dfacfd5137 Reports clean ups (#37248)
* use similar ui styles for different charts

* fix naming

* use similar styles, fix height

* rm year from tooltip timestamp

* remove unnecessary code in useChartData
2025-07-17 16:08:22 +02:00
Jordi Enric 804f270c3a reports pricing (#36992)
* add database pricing config

* pricing paywalls

* fix showing correct charts

* fix test

* remove disabled helpers in favor of upsell dialog

* fix missing fn to calc time

* rm clog

* show badge next to helpers

* ui fix

* fix type errs

* fix hallucinated import fml
2025-07-14 16:45:29 +02:00
Francesco Sansalvadore a78026dc73 Chore/uniform reports daterange picker (#36989)
* sync date range picker across reports
* sync report daterange pickers across reports using nuqs
2025-07-10 12:35:20 +02:00
Francesco SansalvadoreandTerry Sutton 8c41ec5e66 feat: reports storage (#36442)
* init storage charts v2

* add storage chart endpoint

* add storage charts to storage

* cleanup storage reports

* chore: try functions report

* fix storage sql composition

* clear menu

* chore: use FilterBar to filter storage report

* chore: fix api report product filtering

* comment path

* remove Response Errors storage chart

* update filtering UI

* fix filtering concatenation logic

* refactor components to useReportFilters hook

* cleanup

* fix filter concatenation

* add filerable text input

* add AND between filters

* fix padding

* Temp remove filter bar

* Nudges

* Swap collapsible component

* fix cache hit and cache miss queries

* Link to cache guide

* Add a flag for storage report

---------

Co-authored-by: Terry Sutton <saltcod@gmail.com>
2025-07-03 13:43:24 +02:00
Jordi Enric 92eabe3e3e Auth + Database Report Fix (#36768)
rollback previous files and move auth changes to new files
2025-06-30 16:04:33 +02:00
Jordi Enric 3b3a75202e feat: add auth reports FE-1569 (#36555)
* feat: add auth reports

* fix reports dates, fix missing queries

* add flag

* fix errorbystatus chart

* fix sign in by grant type

* move formatting to auth report query file

* fix signup by provider, add ratelimitted reqs

* fix sign ups query

* cleanup unused stuff

* cleanup

* rm console logs

* undo logs.utils

* add status code lib, use edge_logs for query

* fix auth error chart footer

* rm redundant rate limited requests chart

* fix db report breaking due to useAuthReport throwing

* move state up, reduce conditional logic in composed chart handler

* reorder reports nav

* rm bg

* fix type err

* fix useChartData

* empty

* fix report header bg

* move to utils

* add AnalyticsInterval import to report.utils for granularity conversion
2025-06-27 11:10:25 +02:00
Francesco Sansalvadore 265ca68786 update db report (#36328)
* release charts to Teams and Enterprise

* update db charts

* clean up chart types and add disk_fs_used_system

* show update data for Disk Size chart

* remove feature flag release

* update PostgREST connections tooltip

* show percentage in tooltip only if value is not percentage itself

* show percentage in tooltip only if value is not percentage itself

* insert disk_fs_used_system

* update db disk size chart

* reorder admin connection
2025-06-18 13:05:31 +02:00
Francesco Sansalvadore fda426b9ad Improvements to Reports > Database (#35477)
* improve legend items hover

* show yAxis label

* open range in logs explorer

* add provisioned disk size to Memory Usage chart

* temp new charts

* Network Traffic chart

* sync charts marker

* update api types

* fix layout

* add max memory

* add db size

* chore: remove unused properties

* disk_io_usage

* add max db and pooler connections

* chart header tooltip

* clean charts

* add cpu max

* refactor charts and change max color

* reference line on Database Size chart

* reference line text

* reference lines on Database Size chart

* fix aggregation

* legend spacing

* reference line

* add docsUrl
2025-05-23 10:32:33 +02:00
Francesco SansalvadoreandTheOtherBrian1 939e5c855a feat: reports infra o11y (#33310)
* test client connections charts

* add granularity to database dashboard

* add range selection

* add selection to area charts

* refactor ChartHeader

* fix default

* fix time preset selected label and add tooltip actions

* client connections stacked chart

* polish all new chartts

* change attribute

* fix

* add real queries

* memory stack

* cleanup

* precision 1

* update charts

* add endpoints

* tooltip

* format

* improve charts

* toggle max value

* show limit

* cleanup

* cleanup

* update api schema

* fix ram_usage_max_available

* remove pgbouncer and comments

* show total with percentage in chart header

* pretty

* hide

* update reports database

* remove client_connections

* revert

* fix connectionStrings error

* restore correct queries and conditions

* vertically zoom in to percentage data

* add feature flag logic on charts

* add feature flag logic to date picker

* chore: remove comment

* add tooltip to charts metrics

* chore: comment new pg endpoints

* feat: lazy load ComposedChartHandler queries

* feat: dim non-hovered chart values when hovering chart label item

* feat: improve dim styling

* chore: improve light mode stacked chart colors

* chore: remove 15s interval

* chore: sync types

* chore: remove type

* chore: restore type

* fix hook error

* show chart type toggle

* remove console log

* temp

* keep connections charts as before

* restore DateRangePicker

* show last aggregate value when not hovering

* clean up imports

* disk IOps read and write

* restore flag

* refactor queries

* clean up grafana promo banner

* Update database-charts.ts | updated language

* fix hook error

* fix hook error

* fix hook error

* attempt fix hook error

---------

Co-authored-by: TheOtherBrian1 <91111415+TheOtherBrian1@users.noreply.github.com>
2025-04-14 10:53:52 +02:00