Files
supabase/apps/studio/components
Jordi EnricandClaude Opus 4.8 d8e9edd4fd feat(studio): clean up service health chart labels (DEBUG-148) (#47217)
## What

Cleans up the service health chart labels so they are consistent across
the project homepage usage charts (behind the `newHomepageUsageDeltas`
flag) and the `/observability` service health table. Part of DEBUG-148.

## Changes

- Per-level charts now read `Errors / Warnings / Infos` (the success
series was `Ok` on `/observability` and `Requests` on the homepage).
- Homepage service cards use full-word `Warnings` / `Errors` headers
(was `Warn` / `Err`).
- The `Total Requests` headline keeps the `Requests` wording and its
existing value.

## Not in this PR

- Grouping the API Gateway chart by product. Summing every service's log
levels and labeling it "API Gateway" is not accurate data; real
per-product grouping needs the service-health matview to group API
Gateway requests by product first. Tracked as a follow-up.
- The 30-day interval option mentioned in the thread.

## Testing

- typecheck, prettier, ratchet, and unit tests green in CI.
- Pending manual confirmation in Studio that the tooltips read Errors /
Warnings / Infos on both surfaces.


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

## Summary by CodeRabbit

* **UI Improvements**
* Updated service health charts to show clearer segment labels for
errors, warnings, and healthy states.
* Refined project usage metrics text to use more user-friendly labels
like “Warnings” and “Errors.”
* Adjusted chart labeling for one usage view so the healthy/OK series is
presented more clearly.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-01 09:50:10 +02:00
..
2026-06-30 18:06:38 +02:00
…

Writing components

Where to create your components

  • For components that declare the general structure and layout of a page:
    • /components/layouts/xxx
  • For components that are tightly coupled to a specific interface:
    • /components/interfaces/xxx
  • For components that are meant to be reusable across multiple pages:
    • /components/ui/xxx
  • Note: We're gradually moving files out of the to-be-cleaned folder into the respective folders as we refactor

Component structure

  • If a component has constants and utility methods that are tightly coupled to itself, keep them close to the component and enclose them in a folder with an index.tsx as an entry point
  • Otherwise it can just be a file on its own
  • For example:
    • components/ui
      - SampleComponentA
        - SampleComponentA.tsx
        - SampleComponentA.constants.ts
        - SampleComponentA.utils.ts
        - SampleComponentA.types.ts
        - index.ts
      - SampleComponentB.tsx
      

Template for building components


// Declare the prop types of your component
interface ComponentAProps {
  sampleProp: string
}

// Name your component accordingly
const ComponentA = ({ sampleProp }: ComponentAProps) => {
  return <div>ComponentA: {sampleProp}</div>
}

export default ComponentA