Files
supabase/apps/studio/components/interfaces/Observability/ObservabilityOverview.utils.ts
T
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

84 lines
2.3 KiB
TypeScript

import {
computeSuccessAndNonSuccessRates,
sumErrors,
sumTotal,
sumWarnings,
} from '../HomeNew/ProjectUsage.metrics'
import type { LogsBarChartDatum } from '../HomeNew/ProjectUsage.metrics'
import { useServiceHealthMetrics } from './useServiceHealthMetrics'
export type ServiceKey = 'db' | 'functions' | 'auth' | 'storage' | 'realtime' | 'postgrest'
export type HealthStatus = 'healthy' | 'error' | 'unknown'
export type ServiceHealthData = {
total: number
errorRate: number
successRate: number
errorCount: number
warningCount: number
okCount: number
eventChartData: LogsBarChartDatum[]
isLoading: boolean
error: unknown | null
refresh: () => void
}
export type OverviewData = {
services: Record<ServiceKey, ServiceHealthData>
aggregated: {
totalRequests: number
totalErrors: number
totalWarnings: number
overallErrorRate: number
overallSuccessRate: number
}
isLoading: boolean
}
export const calculateErrorRate = (data: LogsBarChartDatum[]): number => {
const total = sumTotal(data)
const errors = sumErrors(data)
return total > 0 ? (errors / total) * 100 : 0
}
export const calculateSuccessRate = (data: LogsBarChartDatum[]): number => {
const total = sumTotal(data)
const warnings = sumWarnings(data)
const errors = sumErrors(data)
const { successRate } = computeSuccessAndNonSuccessRates(total, warnings, errors)
return successRate
}
/**
* Get health status and color based on error rate
* - Unknown: total_requests < 100 (insufficient data)
* - Healthy: error_rate < 1%
* - Unhealthy: error_rate ≥ 1%
*/
export const getHealthStatus = (
errorRate: number,
total: number
): { status: HealthStatus; color: string } => {
if (total < 100) {
return { status: 'unknown', color: 'muted' }
}
if (errorRate >= 1) {
return { status: 'error', color: 'destructive' }
}
return { status: 'healthy', color: 'brand' }
}
/**
* Hook to fetch and transform observability overview data for all services
* Uses the same reliable query logic as the logs pages
*/
export const useObservabilityOverviewData = (
projectRef: string,
interval: '1hr' | '1day' | '7day',
refreshKey: number
): OverviewData => {
// The new hook handles all services using logs page logic
return useServiceHealthMetrics(projectRef, interval, refreshKey)
}