Files
Saxon Fletcher e0280cb650 docs: restructure observability navigation and overview (#49505)
<!-- CURSOR_AGENT_PR_BODY_BEGIN -->
## Stack

Draft stack extracted from `docs/monitoring`. Merge bottom-up. The
troubleshooting *catalog* rewrite (`content/troubleshooting` and the
Diagnosing UI) stays out of scope.

1. #49503 move inspect and advisors
2. #49501 split Studio logs from ClickHouse queries
3. #49500 treat reports as signal dashboards
4. #49502 add Observe the data hub
5. #49506 add agent setup components
6. #49504 add hire-an-agent templates
7. **#49505** restructure observability nav, overview, Detecting, and
flatten Observe the data ← **this PR**

## 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?

Docs update. Top layer in the observability stack.

## What is the current behavior?

The section is still titled Monitoring and Debugging, with a Debugging /
Monitoring split that does not match the new pages. The debugging guide
is still the master layer-isolation + symptom table. Observe the data is
split into “what data” vs “where to observe it,” which duplicates the
source pages.

## What is the new behavior?

- Section title is Observability
- Overview groups Observe the data, Detect and resolve, Hire an agent,
and Export
- **Observe the data is flattened by source.** Logs, Metrics API,
Database, Advisors, and Reports each list where to read that source.
There is no separate MCP/API/CLI/Studio nav group.
- **Observe vs Detecting:** Observe is the catalog (what exists, how to
access it). Detecting is how to *use* those sources to pick up a Health
/ Security / Performance / Usage signal. Named errors skip to
Diagnosing.
- Studio Logs sits under Logs. Reports sits beside the other sources.
- Troubleshooting stays in the global menu and also appears as
Diagnosing under Detect and resolve

## Additional context

This is the last PR in the stack. Together the seven PRs reconstruct the
`docs/monitoring` observability IA and guide content, without shipping
the troubleshooting catalog overhaul.
<!-- CURSOR_AGENT_PR_BODY_END -->

<div><a
href="https://cursor.com/agents/bc-a3cb5ece-925b-4046-b58a-5d69e9a9d794?cursor_ref=pr_footer&cursor_cta=open_in_web"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://cursor.com/assets/images/open-in-web-dark.png"><source
media="(prefers-color-scheme: light)"
srcset="https://cursor.com/assets/images/open-in-web-light.png"><img
alt="Open in Web" width="114" height="28"
src="https://cursor.com/assets/images/open-in-web-dark.png"></picture></a>&nbsp;<a
href="https://cursor.com/background-agent?bcId=bc-a3cb5ece-925b-4046-b58a-5d69e9a9d794&cursor_ref=pr_footer&cursor_cta=open_in_cursor"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://cursor.com/assets/images/open-in-cursor-dark.png"><source
media="(prefers-color-scheme: light)"
srcset="https://cursor.com/assets/images/open-in-cursor-light.png"><img
alt="Open in Cursor" width="131" height="28"
src="https://cursor.com/assets/images/open-in-cursor-dark.png"></picture></a>&nbsp;</div>

---------

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: Saxon Fletcher <SaxonF@users.noreply.github.com>
Co-authored-by: Nik Richers <nik@validmind.ai>
2026-09-04 13:38:39 +10:00

63 lines
2.3 KiB
TypeScript
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
export type MetricsStackOption = {
title: string
description: string
href: string
iconKind: 'grafana' | 'datadog' | 'elastic' | 'flame'
iconColor: string
iconBg: string
badges: { label: string; variant: 'default' | 'community' }[]
}
export const metricsStackOptions: MetricsStackOption[] = [
{
title: 'Grafana Cloud (SaaS)',
description:
'Use Grafana Clouds managed Prometheus (works on Free + Pro tiers) and import the Supabase dashboard without running any infrastructure.',
href: '/guides/observability/metrics/grafana-cloud',
iconKind: 'grafana',
iconColor: '#F05A28',
iconBg: 'rgba(240,90,40,0.1)',
badges: [{ label: 'Supabase guide', variant: 'default' }],
},
{
title: 'Grafana + self-hosted Prometheus',
description:
'Run Prometheus yourself following the official installation guidance and pair it with Grafana plus our dashboard JSON and alert pack.',
href: '/guides/observability/metrics/grafana-self-hosted',
iconKind: 'grafana',
iconColor: '#F05A28',
iconBg: 'rgba(240,90,40,0.1)',
badges: [{ label: 'Supabase guide', variant: 'default' }],
},
{
title: 'Datadog',
description:
'Scrape the Metrics API with the Datadog Agent or Prometheus remote write and monitor Supabase alongside your app telemetry.',
href: 'https://docs.datadoghq.com/integrations/supabase/',
iconKind: 'datadog',
iconColor: '#632CA6',
iconBg: 'rgba(99,44,166,0.1)',
badges: [{ label: 'Community', variant: 'community' }],
},
{
title: 'Elastic',
description:
"Use Elastic's managed Supabase integration to scrape metrics. The integration automatically installs dashboards, alert templates, and SLO templates as data arrives.",
href: 'https://www.elastic.co/docs/reference/integrations/supabase',
iconKind: 'elastic',
iconColor: '#00BFB3',
iconBg: 'rgba(0,191,179,0.1)',
badges: [{ label: 'Community', variant: 'community' }],
},
{
title: 'Vendor-agnostic / BYO Prometheus',
description:
'Connect AWS AMP, Grafana Mimir, VictoriaMetrics, or any Prometheus-compatible SaaS with the same scrape job pattern.',
href: '/guides/observability/metrics/vendor-agnostic',
iconKind: 'flame',
iconColor: '#0BA678',
iconBg: 'rgba(11,166,120,0.1)',
badges: [{ label: 'Supabase guide', variant: 'default' }],
},
]