ObservabilityOverview.utils.ts83 lines · main

1	import {
2	computeSuccessAndNonSuccessRates,
3	sumErrors,
4	sumTotal,
5	sumWarnings,
6	} from '../ProjectHome/ProjectUsage.metrics'
7	import type { LogsBarChartDatum } from '../ProjectHome/ProjectUsage.metrics'
8	import { useServiceHealthMetrics } from './useServiceHealthMetrics'
9
10	export type ServiceKey = 'db' | 'functions' | 'auth' | 'storage' | 'realtime' | 'postgrest'
11
12	export type HealthStatus = 'healthy' | 'error' | 'unknown'
13
14	export type ServiceHealthData = {
15	total: number
16	errorRate: number
17	successRate: number
18	errorCount: number
19	warningCount: number
20	okCount: number
21	eventChartData: LogsBarChartDatum[]
22	isLoading: boolean
23	error: unknown | null
24	refresh: () => void
25	}
26
27	export type OverviewData = {
28	services: Record<ServiceKey, ServiceHealthData>
29	aggregated: {
30	totalRequests: number
31	totalErrors: number
32	totalWarnings: number
33	overallErrorRate: number
34	overallSuccessRate: number
35	}
36	isLoading: boolean
37	}
38
39	export const calculateErrorRate = (data: LogsBarChartDatum[]): number => {
40	const total = sumTotal(data)
41	const errors = sumErrors(data)
42	return total > 0 ? (errors / total) * 100 : 0
43	}
44
45	export const calculateSuccessRate = (data: LogsBarChartDatum[]): number => {
46	const total = sumTotal(data)
47	const warnings = sumWarnings(data)
48	const errors = sumErrors(data)
49	const { successRate } = computeSuccessAndNonSuccessRates(total, warnings, errors)
50	return successRate
51	}
52
53	/**
54	* Get health status and color based on error rate
55	* - Unknown: total_requests < 100 (insufficient data)
56	* - Healthy: error_rate < 1%
57	* - Unhealthy: error_rate ≥ 1%
58	*/
59	export const getHealthStatus = (
60	errorRate: number,
61	total: number
62	): { status: HealthStatus; color: string } => {
63	if (total < 100) {
64	return { status: 'unknown', color: 'muted' }
65	}
66	if (errorRate >= 1) {
67	return { status: 'error', color: 'destructive' }
68	}
69	return { status: 'healthy', color: 'brand' }
70	}
71
72	/**
73	* Hook to fetch and transform observability overview data for all services
74	* Uses the same reliable query logic as the logs pages
75	*/
76	export const useObservabilityOverviewData = (
77	projectRef: string,
78	interval: '1hr' | '1day' | '7day',
79	refreshKey: number
80	): OverviewData => {
81	// The new hook handles all services using logs page logic
82	return useServiceHealthMetrics(projectRef, interval, refreshKey)
83	}