mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 09:55:06 +03:00
Danny White
a5dcf3b57c
## What kind of change does this PR introduce? Studio UI improvement. ## What is the current behavior? Pipeline health is presented as a dense custom metrics panel with repeated connection information and per-table lag details mixed into the pipeline summary. ## What is the new behavior? Moves the pipeline-level slot status, lag, WAL retention, and last check-in into a standard detail section. It removes repeated connection content and keeps table-specific state with the replicated tables. | Before | After | | --- | --- | | <img width="1816" height="274" alt="CleanShot 2026-09-16 at 13 34 43@2x" src="https://github.com/user-attachments/assets/eceed5bb-8af2-4a3b-83a9-7849f1554fbe" /> | <img width="1830" height="506" alt="CleanShot 2026-09-16 at 13 34 15@2x" src="https://github.com/user-attachments/assets/498c4390-17e2-45e5-a923-cb4a7cfd5978" /> | _Note that the page spacing may feel a bit funny. This is handled in https://github.com/supabase/supabase/pull/49630_ This is an independent slice extracted from #49630. The related review series is #50443, #50444, this PR, #50446, then #49630. ## To test 1. Open `/project/<ref>/database/replication` and select a running pipeline. 2. Confirm **Pipeline health** shows slot status, lag, WAL retention remaining, and last check-in. 3. Confirm unlimited WAL retention is labelled **Unlimited** and a caught-up pipeline is labelled **Caught up**. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## UI Improvements - Added a dedicated Pipeline Health section summarizing WAL status, slot status, and replication lag. - Replaced the inline metrics layout with responsive detail cards and clearer supporting descriptions. - Added tooltips for lag values and relative reply times, including precise timestamps. - Updated lag labels and status indicators for improved clarity. - Added concise explanations for reserved, extended, unreserved, lost, and unknown WAL states. - Improved presentation of pipeline details with optional contextual descriptions. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
37 lines
1.3 KiB
TypeScript
37 lines
1.3 KiB
TypeScript
import { screen } from '@testing-library/react'
|
|
import userEvent from '@testing-library/user-event'
|
|
import { describe, expect, it } from 'vitest'
|
|
|
|
import { PipelineHealthSection } from './PipelineHealthSection'
|
|
import { customRender } from '@/tests/lib/custom-render'
|
|
|
|
const baseMetrics = {
|
|
active: true,
|
|
confirmed_flush_lsn_bytes: 0,
|
|
restart_lsn_bytes: 0,
|
|
reply_time_lag: 0,
|
|
}
|
|
|
|
describe('PipelineHealthSection', () => {
|
|
it('renders null safe WAL size as unlimited retention', () => {
|
|
customRender(<PipelineHealthSection metrics={{ ...baseMetrics, safe_wal_size_bytes: null }} />)
|
|
|
|
expect(screen.getByText('WAL retention remaining')).toBeInTheDocument()
|
|
expect(screen.getByText('Unlimited')).toBeInTheDocument()
|
|
})
|
|
|
|
it('formats a numeric safe WAL size normally', () => {
|
|
customRender(<PipelineHealthSection metrics={{ ...baseMetrics, safe_wal_size_bytes: 1024 }} />)
|
|
|
|
expect(screen.getByText('1 KB')).toBeInTheDocument()
|
|
})
|
|
|
|
it('shows the absolute last check-in time on hover', async () => {
|
|
customRender(<PipelineHealthSection metrics={{ ...baseMetrics, safe_wal_size_bytes: null }} />)
|
|
|
|
await userEvent.hover(screen.getByText('Just now'))
|
|
|
|
expect(await screen.findByRole('tooltip')).toHaveTextContent(/\w{3} \d{1,2}, \d{4}/)
|
|
})
|
|
})
|