Files
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

102 lines
2.8 KiB
TypeScript

import { useQuery } from '@tanstack/react-query'
import { get } from 'data/fetchers'
import { generateRegexpWhere } from '../Reports/Reports.constants'
import type { LogsBarChartDatum } from '../HomeNew/ProjectUsage.metrics'
type PostgrestMetricsVariables = {
projectRef: string
startDate: string
endDate: string
interval: '1hr' | '1day' | '7day'
}
const getIntervalTrunc = (interval: '1hr' | '1day' | '7day') => {
switch (interval) {
case '1hr':
return 'minute' // 1-minute buckets for 1 hour
case '1day':
return 'hour' // 1-hour buckets for 1 day
case '7day':
return 'day' // 1-day buckets for 7 days
default:
return 'hour'
}
}
const POSTGREST_METRICS_SQL = (interval: '1hr' | '1day' | '7day') => {
const truncInterval = getIntervalTrunc(interval)
return `
-- postgrest-overview-metrics
select
cast(timestamp_trunc(t.timestamp, ${truncInterval}) as datetime) as timestamp,
countif(response.status_code < 300) as ok_count,
countif(response.status_code >= 300 and response.status_code < 400) as warning_count,
countif(response.status_code >= 400) as error_count
FROM edge_logs t
cross join unnest(metadata) as m
cross join unnest(m.response) as response
cross join unnest(m.request) as request
WHERE
request.path like '/rest/%'
GROUP BY
timestamp
ORDER BY
timestamp ASC
`
}
type MetricsRow = {
timestamp: string
ok_count: number
warning_count: number
error_count: number
}
async function fetchPostgrestMetrics(
{ projectRef, startDate, endDate, interval }: PostgrestMetricsVariables,
signal?: AbortSignal
) {
const sql = POSTGREST_METRICS_SQL(interval)
const { data, error } = await get(`/platform/projects/{ref}/analytics/endpoints/logs.all`, {
params: {
path: { ref: projectRef },
query: {
sql,
iso_timestamp_start: startDate,
iso_timestamp_end: endDate,
},
},
signal,
})
if (error || data?.error) {
throw error || data?.error
}
return (data?.result || []) as MetricsRow[]
}
export const usePostgrestOverviewMetrics = (
{ projectRef, startDate, endDate, interval }: PostgrestMetricsVariables,
options?: { enabled?: boolean }
) => {
return useQuery({
queryKey: ['postgrest-overview-metrics', projectRef, startDate, endDate, interval],
queryFn: ({ signal }) =>
fetchPostgrestMetrics({ projectRef, startDate, endDate, interval }, signal),
enabled: (options?.enabled ?? true) && Boolean(projectRef),
staleTime: 1000 * 60,
})
}
export const transformPostgrestMetrics = (rows: MetricsRow[]): LogsBarChartDatum[] => {
return rows.map((row) => ({
timestamp: row.timestamp,
ok_count: row.ok_count,
warning_count: row.warning_count,
error_count: row.error_count,
}))
}