mirror of
https://github.com/supabase/supabase.git
synced 2026-10-18 23:59:08 +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 -->
40 lines
1.2 KiB
TypeScript
40 lines
1.2 KiB
TypeScript
import { type ReactNode } from 'react'
|
|
import { InfoTooltip } from 'ui-patterns/info-tooltip'
|
|
|
|
import { DetailSubtext } from '../DetailSubtext'
|
|
|
|
interface PipelineDetailItemProps {
|
|
label: string
|
|
/** A fixed explanation of what this field is. Never the current value's meaning. */
|
|
tooltip?: ReactNode
|
|
/** Explains what the current value means, when the value alone isn't enough. */
|
|
description?: ReactNode
|
|
children: ReactNode
|
|
}
|
|
|
|
/**
|
|
* One label and value inside a pipeline detail card. Shared so the configuration and health
|
|
* cards read as the same grid rather than two different treatments of the same idea.
|
|
*/
|
|
export const PipelineDetailItem = ({
|
|
label,
|
|
tooltip,
|
|
description,
|
|
children,
|
|
}: PipelineDetailItemProps) => (
|
|
<div className="space-y-1">
|
|
<dt className="flex items-center gap-1.5 text-sm text-foreground-lighter">
|
|
{label}
|
|
{tooltip !== undefined && (
|
|
<InfoTooltip side="top" className="max-w-56">
|
|
{tooltip}
|
|
</InfoTooltip>
|
|
)}
|
|
</dt>
|
|
<dd className="text-sm">{children}</dd>
|
|
{description !== undefined && <DetailSubtext>{description}</DetailSubtext>}
|
|
</div>
|
|
)
|
|
|
|
export const PIPELINE_DETAIL_GRID_CLASS_NAME = 'grid grid-cols-1 gap-x-10 gap-y-6 md:grid-cols-2'
|