From d8e9edd4fdb45cf8bfe675a782582fbffa9c02be Mon Sep 17 00:00:00 2001
From: Jordi Enric <37541088+jordienr@users.noreply.github.com>
Date: Wed, 1 Jul 2026 09:50:10 +0200
Subject: [PATCH] feat(studio): clean up service health chart labels
 (DEBUG-148) (#47217)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 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>
---
 .../interfaces/Observability/ServiceHealthTable.tsx       | 8 ++++++++
 .../interfaces/ProjectHome/ProjectUsageSectionDeltas.tsx  | 6 +++---
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/apps/studio/components/interfaces/Observability/ServiceHealthTable.tsx b/apps/studio/components/interfaces/Observability/ServiceHealthTable.tsx
index 7cc32dac2a0..1303a3b4498 100644
--- a/apps/studio/components/interfaces/Observability/ServiceHealthTable.tsx
+++ b/apps/studio/components/interfaces/Observability/ServiceHealthTable.tsx
@@ -9,6 +9,7 @@ import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
+  type ChartConfig,
 } from 'ui'
 import { ChartEmptyState, ChartLoadingState } from 'ui-patterns/Chart'
 import { LogsBarChart } from 'ui-patterns/LogsBarChart'
@@ -47,6 +48,12 @@ const colorClassMap: Record<string, string> = {
   brand: 'bg-brand',
 }
 
+const LEVEL_CHART_CONFIG: ChartConfig = {
+  error_count: { label: 'Errors' },
+  warning_count: { label: 'Warnings' },
+  ok_count: { label: 'Infos' },
+}
+
 const SERVICE_DESCRIPTIONS: Record<ServiceKey, string> = {
   db: 'PostgreSQL database health and performance',
   auth: 'Authentication and user management',
@@ -171,6 +178,7 @@ const ServiceCell = ({
             hideDateRange
             hideXAxis
             data={data.eventChartData}
+            chartConfig={LEVEL_CHART_CONFIG}
             DateTimeFormat={datetimeFormat}
             onBarClick={onBarClick}
             EmptyState={<ChartEmptyState className="h-full" description="No traffic" />}
diff --git a/apps/studio/components/interfaces/ProjectHome/ProjectUsageSectionDeltas.tsx b/apps/studio/components/interfaces/ProjectHome/ProjectUsageSectionDeltas.tsx
index 818b65a004c..06a3c69a96c 100644
--- a/apps/studio/components/interfaces/ProjectHome/ProjectUsageSectionDeltas.tsx
+++ b/apps/studio/components/interfaces/ProjectHome/ProjectUsageSectionDeltas.tsx
@@ -207,14 +207,14 @@ export const ProjectUsageSectionDeltas = () => {
                   <div className="flex flex-col items-end">
                     <div className="flex items-center gap-2">
                       <div className="w-1.5 h-1.5 bg-warning rounded-full" />
-                      <span className="heading-meta">Warn</span>
+                      <span className="heading-meta">Warnings</span>
                     </div>
                     <span className="text-foreground text-base">{s.warn.toLocaleString()}</span>
                   </div>
                   <div className="flex flex-col items-end">
                     <div className="flex items-center gap-2">
                       <div className="w-1.5 h-1.5 bg-destructive rounded-full" />
-                      <span className="heading-meta">Err</span>
+                      <span className="heading-meta">Errors</span>
                     </div>
                     <span className="text-foreground text-base">{s.err.toLocaleString()}</span>
                   </div>
@@ -231,7 +231,7 @@ export const ProjectUsageSectionDeltas = () => {
                     chartConfig={{
                       error_count: { label: 'Errors' },
                       warning_count: { label: 'Warnings' },
-                      ok_count: { label: 'Requests' },
+                      ok_count: { label: 'Infos' },
                     }}
                     EmptyState={
                       isLoading ? (