Commit Graph

10 Commits

Author SHA1 Message Date
kemal.earth
ed921f36f7 feat(studio): streamline status health visual (#46274)
## 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?

Just a little bit of design polish for the observability overview status
health.

| Before | After |
|--------|--------|
| <img width="963" height="714" alt="Screenshot 2026-05-22 at 14 15 03"
src="https://github.com/user-attachments/assets/3d67d175-434b-48a6-b87b-15e074d2cc27"
/> | <img width="1068" height="846" alt="Screenshot 2026-05-26 at 13 26
55"
src="https://github.com/user-attachments/assets/c3f728ef-309c-42ec-9810-37bf6564a470"
/> |








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

* **New Features**
  * Added option to hide date range in logs bar charts.

* **Improvements**
* Redesigned service health table to a responsive card/grid layout with
richer status indicators, improved charts, loading and empty states, and
clearer per-service CTAs.
  * Chart empty state now renders title/description only when provided.

* **Style**
  * Adjusted footer top padding for improved spacing.

* **Chores**
* Reordered import and service configuration entries (rendering order
updated).

<!-- 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/46274?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-27 10:30:19 +01:00
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
Jordi Enric
5b9159dca4 feat(observability): add Data API service to overview (#46266)
## Summary

- Adds **Data API** (API Gateway / edge logs) as a new service row in
the observability overview, positioned before PostgREST
- Data API row is only shown when Data API is enabled for the project
(gated on `useIsDataApiEnabled`)
- Renames the existing PostgREST entry from "Data API" to "PostgREST" to
correctly reflect the service
- Adds the Data API description to `SERVICE_DESCRIPTIONS`

## Test plan

- [ ] Enable Data API for a project — Data API row appears before
PostgREST in the overview with chart data
- [ ] Disable Data API for a project — Data API row is hidden, PostgREST
row remains
- [ ] PostgREST row label now reads "PostgREST" instead of "Data API"

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

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

* **New Features**
* Observability dashboard can optionally show an “API Gateway” service
when the Data API feature is enabled; it surfaces logs and health
metrics.
* The service health table now includes a description/tooltip for the
API Gateway and aggregates its metrics.

* **Bug Fixes**
* Restored and relabeled the PostgREST entry so its observability report
and reporting links appear correctly.

<!-- 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/46266?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 -->

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-25 14:42:39 +02:00
Jordi Enric
4ca7e66153 feat(observability): migrate overview to service-health endpoint (#46100)
## Problem

The observability overview page fetched service health data by making
six separate calls to the generic \`logs.all\` endpoint with
hand-crafted SQL (via \`genChartQuery\`). This coupled the overview to
SQL internals and missed out on the purpose-built \`service-health\`
endpoint that accepts structured \`lql\` filters and a \`granularity\`
parameter.

## Fix

- Added \`/platform/projects/{ref}/analytics/endpoints/service-health\`
to \`platform.d.ts\`, including the \`ProjectServiceHealthResponse\`
schema and \`UsageApiController_getProjectServiceHealth\` operation.
- Created \`apps/studio/data/analytics/service-health-query.ts\` with a
\`getServiceHealth\` fetch function and \`useServiceHealthQuery\` hook
following the same pattern as other analytics query files.
- Added a \`serviceHealth\` key factory to
\`apps/studio/data/analytics/keys.ts\`.
- Rewrote \`useServiceHealthMetrics.ts\` to call the new endpoint per
service using \`lql\` selectors (\`s:postgres_logs\`, \`s:auth_logs\`,
etc.) and a \`granularity\` value derived from the selected interval
(\`1hr\` -> \`minute\`, \`1day\` -> \`hour\`, \`7day\` -> \`day\`). The
timeseries normalisation and chart data pipeline is unchanged.
- Updated the refresh handler in \`ObservabilityOverview.tsx\` to
invalidate the new query key prefix and removed the now-unused
\`postgrest-overview-metrics\` invalidation.

## How to test

- Navigate to a project's Observability > Overview page.
- Verify that the Service Health table loads data for all six services
(Database, Auth, Edge Functions, Realtime, Storage, Data API).
- Switch between the 1hr, 1day, and 7day interval selectors and confirm
the charts update.
- Click the Refresh button and confirm the charts reload.
- Click a bar in any chart and confirm navigation to the corresponding
logs page scoped to that time window.
- Confirm no regressions in the Database Infrastructure section (CPU,
RAM, disk, connections).

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

* **New Features**
* Centralized service‑health fetching for consistent cross‑service
metrics and improved charting.
* New analytics key and backend endpoint for project service‑health; API
schemas added.
* Backend support for an additional log‑drain type (hidden from the UI).

* **Bug Fixes**
  * Improved refresh behavior for service‑health data.
* Clear "No requests in this period" fallback and correct charts when
totals are zero.

* **Tests**
* Added unit tests for service‑health data extraction and
transformation.

<!-- 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/46100?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 -->

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-22 10:01:54 +02:00
Jordi Enric
c39e284641 Observability: remove healthy/unhealthy badge from Service Health (#44771)
## Problem

The "Healthy / Unhealthy" badge on the Observability overview was
alarming — showing **UNHEALTHY** even when every bar in the chart looked
fine. Two root causes:

1. **The threshold is aggressive.** Any period where the aggregate error
rate is ≥ 1% flips the badge to "Unhealthy", even if that 1% came from a
short burst that is visually indistinguishable in the chart.
2. **Period-wide aggregation hides spikes.** The badge status is
computed over the entire selected time window (e.g. 24 h). A 5-minute
spike at 20% errors diluted across 24 h of mostly-clean traffic can push
the aggregate just over 1%, triggering "Unhealthy" while all chart bars
look green.

The badge wording ("Unhealthy") also implies a current service problem,
whereas the underlying metric is a historical aggregate — making it easy
to misread.

## Change

Remove the badge entirely. The per-row error/warning rate indicator
(e.g. `● 1.34% errors`) already surfaces the key signal without the
alarming label, and the bar chart lets users see the actual shape of
traffic over time.

## On spike visibility in charts

The charts already use **COUNT per time bucket** (not averages), so
individual bars faithfully represent event volume. The bucket
granularity does compress spikes for longer windows (hourly buckets for
1–3 day views, daily for 7-day), but that's a separate concern from the
badge. If we want to surface burst detection in the future, a better
approach would be per-bucket threshold highlighting rather than a single
period-wide badge.

https://claude.ai/code/session_01E1ejWyuR9BV4qcTyiGGVVY

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

* **Bug Fixes**
* Removed the service health status indicator from the Service Health
Table.

* **New Features**
* Replaced per-row bar charts with a line chart showing error/warning
rates alongside OK series.
* Added a centered "No data" placeholder when chart data is empty and
preserved click interactions on chart points.
  * Y-axis values now display as percentages.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Claude <noreply@anthropic.com>
2026-04-15 16:33:29 +02: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
Ignacio Dobronich
e29f4ca6f3 chore: add entitlement check to observability log retention (#43469)
### Changes
- Replace plan-based checks (`LOG_RETENTION`, `availableIn`) with
`useCheckEntitlements('log.retention_days')` in the chart interval
dropdown
- `ChartIntervalDropdown` now calls the entitlements hook internally
instead of receiving plan props
- Remove `LOG_RETENTION` constant and `availableIn` from
`CHART_INTERVALS`
- Update consumer components (`ProjectUsage`, `ProjectUsageSection`,
`ObservabilityOverview`) to remove plan prop passing

### Testing
- Head to `/project/_/observability` with a Free plan org.
- Click on the time selector "Last 7 days" is disabled, default is "Last
60 minutes", tooltip shows retention limit and upgrade link

<img width="827" height="151" alt="image"
src="https://github.com/user-attachments/assets/20988398-8f0a-46b6-be3d-af4e9d530f81"
/>

- With a Pro Org and above the "Last 7 days" option should be enabled
2026-03-06 09:05:25 -03:00
Joshen Lim
ddd94a9c24 Joshen/fe 2660 clean up stale feature flags enabled for 2 months part 2 (#43331)
## Context

Follow up from https://github.com/supabase/supabase/pull/43329, but
mutually exclusive

Just cleaning up feature flags that have been toggled on for all users
and unchanged for the past 2 months

- edgefunctionreport
- storagereport
- realtimeReport
- postgrestreport
- authreportv2
- newEdgeFunctionOverviewCharts
- apiReportCountries (Already not used)
- SentryLogDrain
- reportGranularityV2
- storageAnalyticsVector
- ShowIndexAdvisorOnTableEditor
2026-03-04 13:25:01 +08:00
Francesco Sansalvadore
6a2dabc058 fix: card paddings (#42775)
Uniform card paddings to use the `--card-padding-x` css var and `px-card` tw utility class.
2026-02-17 13:59:29 +01:00
Jordi Enric
168c084f4e feat(o11y): overview page (#42098)
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Observability Dashboard: unified overview for service health and
database infrastructure with interactive charts and metric cards (CPU,
memory, disk I/O, connections, error rate, slow queries).
* Service Health Monitoring: per-service health cards and a
multi-service table with error/warning counts and drill-down links to
reports/logs.
* Interval Selector: new chart-interval dropdown with plan-aware
retention messaging.
* Menu & Reports: updated Observability menu with Overview entry and
Custom Reports management.
* **Documentation**
  * Added a footer link to troubleshooting guides.

<sub>✏️ Tip: You can customize this high-level summary in your review
settings.</sub>
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-01-30 14:00:01 +00:00