mirror of
https://github.com/supabase/supabase.git
synced 2026-09-09 03:19:36 +08:00
## 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
351 lines
9.8 KiB
TypeScript
351 lines
9.8 KiB
TypeScript
import dayjs from 'dayjs'
|
|
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
|
|
|
|
import type { LogsBarChartDatum } from '../ProjectHome/ProjectUsage.metrics'
|
|
import {
|
|
calculateAggregatedMetrics,
|
|
calculateDateRange,
|
|
calculateHealthMetrics,
|
|
transformToBarChartData,
|
|
} from './useServiceHealthMetrics.utils'
|
|
|
|
describe('calculateDateRange', () => {
|
|
beforeEach(() => {
|
|
// Mock the current time to ensure consistent test results
|
|
vi.useFakeTimers()
|
|
vi.setSystemTime(new Date('2024-01-15T12:00:00Z'))
|
|
})
|
|
|
|
afterEach(() => {
|
|
vi.useRealTimers()
|
|
})
|
|
|
|
it('calculates correct date range for 1hr interval', () => {
|
|
const result = calculateDateRange('1hr')
|
|
|
|
expect(result.startDate).toBe('2024-01-15T11:00:00.000Z')
|
|
expect(result.endDate).toBe('2024-01-15T12:00:00.000Z')
|
|
})
|
|
|
|
it('calculates correct date range for 1day interval', () => {
|
|
const result = calculateDateRange('1day')
|
|
|
|
expect(result.startDate).toBe('2024-01-14T12:00:00.000Z')
|
|
expect(result.endDate).toBe('2024-01-15T12:00:00.000Z')
|
|
})
|
|
|
|
it('calculates correct date range for 7day interval', () => {
|
|
const result = calculateDateRange('7day')
|
|
|
|
expect(result.startDate).toBe('2024-01-08T12:00:00.000Z')
|
|
expect(result.endDate).toBe('2024-01-15T12:00:00.000Z')
|
|
})
|
|
|
|
it('returns ISO format strings', () => {
|
|
const result = calculateDateRange('1hr')
|
|
|
|
expect(dayjs(result.startDate).isValid()).toBe(true)
|
|
expect(dayjs(result.endDate).isValid()).toBe(true)
|
|
})
|
|
|
|
it('end date is always after start date', () => {
|
|
const intervals: Array<'1hr' | '1day' | '7day'> = ['1hr', '1day', '7day']
|
|
|
|
intervals.forEach((interval) => {
|
|
const result = calculateDateRange(interval)
|
|
expect(dayjs(result.endDate).isAfter(dayjs(result.startDate))).toBe(true)
|
|
})
|
|
})
|
|
})
|
|
|
|
describe('transformToBarChartData', () => {
|
|
it('transforms raw data to LogsBarChartDatum format', () => {
|
|
const rawData = [
|
|
{ timestamp: '2024-01-15T12:00:00Z', ok_count: 10, warning_count: 2, error_count: 1 },
|
|
{ timestamp: '2024-01-15T12:01:00Z', ok_count: 15, warning_count: 0, error_count: 0 },
|
|
]
|
|
|
|
const result = transformToBarChartData(rawData)
|
|
|
|
expect(result).toEqual([
|
|
{ timestamp: '2024-01-15T12:00:00Z', ok_count: 10, warning_count: 2, error_count: 1 },
|
|
{ timestamp: '2024-01-15T12:01:00Z', ok_count: 15, warning_count: 0, error_count: 0 },
|
|
])
|
|
})
|
|
|
|
it('handles missing count fields by setting them to 0', () => {
|
|
const rawData = [
|
|
{ timestamp: '2024-01-15T12:00:00Z' },
|
|
{ timestamp: '2024-01-15T12:01:00Z', ok_count: 5 },
|
|
]
|
|
|
|
const result = transformToBarChartData(rawData)
|
|
|
|
expect(result).toEqual([
|
|
{ timestamp: '2024-01-15T12:00:00Z', ok_count: 0, warning_count: 0, error_count: 0 },
|
|
{ timestamp: '2024-01-15T12:01:00Z', ok_count: 5, warning_count: 0, error_count: 0 },
|
|
])
|
|
})
|
|
|
|
it('handles null values by converting to 0', () => {
|
|
const rawData = [
|
|
{
|
|
timestamp: '2024-01-15T12:00:00Z',
|
|
ok_count: null,
|
|
warning_count: null,
|
|
error_count: null,
|
|
},
|
|
]
|
|
|
|
const result = transformToBarChartData(rawData)
|
|
|
|
expect(result).toEqual([
|
|
{ timestamp: '2024-01-15T12:00:00Z', ok_count: 0, warning_count: 0, error_count: 0 },
|
|
])
|
|
})
|
|
|
|
it('handles empty array', () => {
|
|
const result = transformToBarChartData([])
|
|
|
|
expect(result).toEqual([])
|
|
})
|
|
|
|
it('preserves timestamp values', () => {
|
|
const rawData = [
|
|
{ timestamp: '2024-01-15T12:00:00Z', ok_count: 10, warning_count: 0, error_count: 0 },
|
|
]
|
|
|
|
const result = transformToBarChartData(rawData)
|
|
|
|
expect(result[0].timestamp).toBe('2024-01-15T12:00:00Z')
|
|
})
|
|
})
|
|
|
|
describe('calculateHealthMetrics', () => {
|
|
it('calculates metrics correctly with only ok requests', () => {
|
|
const eventChartData: LogsBarChartDatum[] = [
|
|
{ timestamp: '2024-01-15T12:00:00Z', ok_count: 100, warning_count: 0, error_count: 0 },
|
|
{ timestamp: '2024-01-15T12:01:00Z', ok_count: 50, warning_count: 0, error_count: 0 },
|
|
]
|
|
|
|
const result = calculateHealthMetrics(eventChartData)
|
|
|
|
expect(result).toEqual({
|
|
total: 150,
|
|
errorRate: 0,
|
|
successRate: 100,
|
|
errorCount: 0,
|
|
warningCount: 0,
|
|
okCount: 150,
|
|
})
|
|
})
|
|
|
|
it('calculates metrics correctly with errors', () => {
|
|
const eventChartData: LogsBarChartDatum[] = [
|
|
{ timestamp: '2024-01-15T12:00:00Z', ok_count: 80, warning_count: 10, error_count: 10 },
|
|
]
|
|
|
|
const result = calculateHealthMetrics(eventChartData)
|
|
|
|
expect(result).toEqual({
|
|
total: 100,
|
|
errorRate: 10,
|
|
successRate: 80,
|
|
errorCount: 10,
|
|
warningCount: 10,
|
|
okCount: 80,
|
|
})
|
|
})
|
|
|
|
it('calculates metrics correctly with warnings', () => {
|
|
const eventChartData: LogsBarChartDatum[] = [
|
|
{ timestamp: '2024-01-15T12:00:00Z', ok_count: 70, warning_count: 30, error_count: 0 },
|
|
]
|
|
|
|
const result = calculateHealthMetrics(eventChartData)
|
|
|
|
expect(result).toEqual({
|
|
total: 100,
|
|
errorRate: 0,
|
|
successRate: 70,
|
|
errorCount: 0,
|
|
warningCount: 30,
|
|
okCount: 70,
|
|
})
|
|
})
|
|
|
|
it('returns 0 error rate when total is 0', () => {
|
|
const eventChartData: LogsBarChartDatum[] = [
|
|
{ timestamp: '2024-01-15T12:00:00Z', ok_count: 0, warning_count: 0, error_count: 0 },
|
|
]
|
|
|
|
const result = calculateHealthMetrics(eventChartData)
|
|
|
|
expect(result).toEqual({
|
|
total: 0,
|
|
errorRate: 0,
|
|
successRate: 0,
|
|
errorCount: 0,
|
|
warningCount: 0,
|
|
okCount: 0,
|
|
})
|
|
})
|
|
|
|
it('handles empty array', () => {
|
|
const result = calculateHealthMetrics([])
|
|
|
|
expect(result).toEqual({
|
|
total: 0,
|
|
errorRate: 0,
|
|
successRate: 0,
|
|
errorCount: 0,
|
|
warningCount: 0,
|
|
okCount: 0,
|
|
})
|
|
})
|
|
|
|
it('aggregates metrics across multiple time periods', () => {
|
|
const eventChartData: LogsBarChartDatum[] = [
|
|
{ timestamp: '2024-01-15T12:00:00Z', ok_count: 50, warning_count: 5, error_count: 5 },
|
|
{ timestamp: '2024-01-15T12:01:00Z', ok_count: 30, warning_count: 5, error_count: 5 },
|
|
{ timestamp: '2024-01-15T12:02:00Z', ok_count: 20, warning_count: 0, error_count: 0 },
|
|
]
|
|
|
|
const result = calculateHealthMetrics(eventChartData)
|
|
|
|
expect(result).toEqual({
|
|
total: 120,
|
|
errorRate: (10 / 120) * 100,
|
|
successRate: (100 / 120) * 100,
|
|
errorCount: 10,
|
|
warningCount: 10,
|
|
okCount: 100,
|
|
})
|
|
})
|
|
|
|
it('calculates correct error rate for high error scenario', () => {
|
|
const eventChartData: LogsBarChartDatum[] = [
|
|
{ timestamp: '2024-01-15T12:00:00Z', ok_count: 10, warning_count: 10, error_count: 80 },
|
|
]
|
|
|
|
const result = calculateHealthMetrics(eventChartData)
|
|
|
|
expect(result.errorRate).toBe(80)
|
|
expect(result.successRate).toBe(10)
|
|
})
|
|
})
|
|
|
|
describe('calculateAggregatedMetrics', () => {
|
|
it('aggregates metrics from multiple services', () => {
|
|
const services = [
|
|
{ total: 100, errorCount: 10, warningCount: 5 },
|
|
{ total: 200, errorCount: 20, warningCount: 10 },
|
|
{ total: 50, errorCount: 5, warningCount: 2 },
|
|
]
|
|
|
|
const result = calculateAggregatedMetrics(services)
|
|
|
|
expect(result).toEqual({
|
|
totalRequests: 350,
|
|
totalErrors: 35,
|
|
totalWarnings: 17,
|
|
overallErrorRate: ((35 + 17) / 350) * 100,
|
|
overallSuccessRate: ((350 - 35 - 17) / 350) * 100,
|
|
})
|
|
})
|
|
|
|
it('handles empty services array', () => {
|
|
const result = calculateAggregatedMetrics([])
|
|
|
|
expect(result).toEqual({
|
|
totalRequests: 0,
|
|
totalErrors: 0,
|
|
totalWarnings: 0,
|
|
overallErrorRate: 0,
|
|
overallSuccessRate: 0,
|
|
})
|
|
})
|
|
|
|
it('handles single service', () => {
|
|
const services = [{ total: 100, errorCount: 10, warningCount: 5 }]
|
|
|
|
const result = calculateAggregatedMetrics(services)
|
|
|
|
expect(result).toEqual({
|
|
totalRequests: 100,
|
|
totalErrors: 10,
|
|
totalWarnings: 5,
|
|
overallErrorRate: 15,
|
|
overallSuccessRate: 85,
|
|
})
|
|
})
|
|
|
|
it('handles services with zero metrics', () => {
|
|
const services = [
|
|
{ total: 0, errorCount: 0, warningCount: 0 },
|
|
{ total: 100, errorCount: 10, warningCount: 5 },
|
|
]
|
|
|
|
const result = calculateAggregatedMetrics(services)
|
|
|
|
expect(result).toEqual({
|
|
totalRequests: 100,
|
|
totalErrors: 10,
|
|
totalWarnings: 5,
|
|
overallErrorRate: 15,
|
|
overallSuccessRate: 85,
|
|
})
|
|
})
|
|
|
|
it('calculates correct rates when all requests are successful', () => {
|
|
const services = [
|
|
{ total: 100, errorCount: 0, warningCount: 0 },
|
|
{ total: 200, errorCount: 0, warningCount: 0 },
|
|
]
|
|
|
|
const result = calculateAggregatedMetrics(services)
|
|
|
|
expect(result).toEqual({
|
|
totalRequests: 300,
|
|
totalErrors: 0,
|
|
totalWarnings: 0,
|
|
overallErrorRate: 0,
|
|
overallSuccessRate: 100,
|
|
})
|
|
})
|
|
|
|
it('calculates correct rates when all requests fail', () => {
|
|
const services = [
|
|
{ total: 100, errorCount: 100, warningCount: 0 },
|
|
{ total: 200, errorCount: 200, warningCount: 0 },
|
|
]
|
|
|
|
const result = calculateAggregatedMetrics(services)
|
|
|
|
expect(result).toEqual({
|
|
totalRequests: 300,
|
|
totalErrors: 300,
|
|
totalWarnings: 0,
|
|
overallErrorRate: 100,
|
|
overallSuccessRate: 0,
|
|
})
|
|
})
|
|
|
|
it('handles mixed success/warning/error scenarios', () => {
|
|
const services = [
|
|
{ total: 100, errorCount: 20, warningCount: 30 }, // 50% success
|
|
{ total: 100, errorCount: 10, warningCount: 10 }, // 80% success
|
|
{ total: 100, errorCount: 0, warningCount: 0 }, // 100% success
|
|
]
|
|
|
|
const result = calculateAggregatedMetrics(services)
|
|
|
|
expect(result.totalRequests).toBe(300)
|
|
expect(result.totalErrors).toBe(30)
|
|
expect(result.totalWarnings).toBe(40)
|
|
// Overall: 230 success, 40 warnings, 30 errors out of 300
|
|
expect(result.overallSuccessRate).toBeCloseTo((230 / 300) * 100, 2)
|
|
expect(result.overallErrorRate).toBeCloseTo((70 / 300) * 100, 2)
|
|
})
|
|
})
|