ObservabilityOverview.utils.ts 2.3 KB

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