mirror of
https://github.com/supabase/supabase.git
synced 2026-10-07 10:25:06 +03:00
The function detail layout is now breadcrumbs plus tabs (PageNav), so the Logs and Code tabs get the full height below the tabs. The name, invoke URL and last deploy details move into a header on the Overview tab, which also hosts the chart period selector. Overview sections (invocations, errors, performance, usage) now share a default-width PageContainer instead of each nesting a full-width one. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
31 lines
874 B
TypeScript
31 lines
874 B
TypeScript
import { Button } from 'ui'
|
|
|
|
import {
|
|
EDGE_FUNCTION_CHART_INTERVALS,
|
|
getSegmentedButtonClassName,
|
|
} from './EdgeFunctionOverview.utils'
|
|
|
|
interface EdgeFunctionIntervalSelectorProps {
|
|
interval: string
|
|
onIntervalChange: (interval: string) => void
|
|
}
|
|
|
|
/** Segmented control for the period every Overview chart covers */
|
|
export const EdgeFunctionIntervalSelector = ({
|
|
interval,
|
|
onIntervalChange,
|
|
}: EdgeFunctionIntervalSelectorProps) => (
|
|
<div className="flex items-center">
|
|
{EDGE_FUNCTION_CHART_INTERVALS.map((item, index) => (
|
|
<Button
|
|
key={`function-filter-${item.key}`}
|
|
variant={interval === item.key ? 'secondary' : 'default'}
|
|
onClick={() => onIntervalChange(item.key)}
|
|
className={getSegmentedButtonClassName(index, EDGE_FUNCTION_CHART_INTERVALS.length)}
|
|
>
|
|
{item.label}
|
|
</Button>
|
|
))}
|
|
</div>
|
|
)
|