Files
supabase/apps/studio/components/interfaces/Observability/ObservabilityOverview.utils.ts
Pamela Chia 01c178e159 chore(studio): graduate homeNew experiment (#43437)
## Summary

The `homeNew` PostHog experiment has concluded. This PR graduates it by
making the new homepage (`ProjectHome`, formerly `HomeV2`) the permanent
default for all users, and removes all dead code from the old
experiment.

## Changes

- Remove `homeNew` PostHog feature flag checks and `home_new` experiment
exposure tracking from 3 files
- Rename `HomeNew/` → `ProjectHome/` directory and `HomeV2` →
`ProjectHome` export
- Delete old `Home/Home.tsx` component (shared components like
`ProjectList/` are kept — still used by org pages)
- Delete `pages/project/[ref]/building.tsx` and add a server-side
redirect from `/project/:ref/building` → `/project/:ref` to prevent 404s
during rollout (old cached JS bundles may still route to `/building`)
- Simplify `ContentWrapper` building-state logic in `ProjectLayout` —
always redirect building projects to home, always suppress building
interstitial on home page
- Always route to `/project/{ref}` after project creation (remove
`/building` path)
- Update all Observability imports from `HomeNew` → `ProjectHome`

## Self-hosted behavior change

Self-hosted Studio previously showed the old `Home` component (client
libraries + example projects) since PostHog flags don't load. This PR
changes self-hosted to show `ProjectHome` (TopSection with service
status + instance diagram, advisor, custom reports). All sections query
backend APIs that exist on self-hosted. E2E tests pass against the
self-hosted build.

## Testing

- [x] `pnpm turbo run build --filter=studio` passes
- [x] No remaining references to `homeNew`, `home_new`, or `HomeNew` in
codebase
- [x] No broken imports to deleted files
- [x] Self-hosted E2E tests pass (145 passed, 1 flaky, 4 skipped)
- [x] `/building` redirect added to both platform and self-hosted config
blocks

**Quick test:**
1. Navigate to any project homepage — should render the ProjectHome
component
2. Create a new project — should redirect to `/project/{ref}` (not
`/building`)
3. Visit a project in `COMING_UP` state on a non-home route — should
redirect to home
4. Visit `/project/{ref}/building` directly — should 302 redirect to
`/project/{ref}`

## Linear

- fixes GROWTH-671
2026-03-10 17:03:58 +09:00

84 lines
2.3 KiB
TypeScript

import {
computeSuccessAndNonSuccessRates,
sumErrors,
sumTotal,
sumWarnings,
} from '../ProjectHome/ProjectUsage.metrics'
import type { LogsBarChartDatum } from '../ProjectHome/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)
}