mirror of
https://github.com/supabase/supabase.git
synced 2026-05-09 10:19:50 -04:00
Jordi Enric
dfd3eec8e9
## Problem The Primary Database card in the project homepage diagram showed region and instance size, but no live health data. Users had no quick way to spot a high-disk or high-CPU situation without navigating to the database report. ## Fix Added a clickable metrics row at the bottom of the Primary Database card showing CPU, Disk, and RAM as percentages, plus active/max connections when available. Each metric is color-coded (warning at 80%, destructive at 90%). Clicking the row navigates to the database observability report. The metrics are powered by a new \`useComputeMetrics\` hook that wraps the existing \`useInfraMonitoringAttributesQuery\` and \`useMaxConnectionsQuery\`, reusing the parse utilities already used by the database infrastructure section. The \`metricColor\` threshold logic is extracted into a separate util with unit tests. ## How to test - Open the project homepage for a running project - The Primary Database card should show a new bottom row: "CPU X% · Disk X% · RAM X% · Y/Z conns" - Values above 80% should appear in amber, above 90% in red - Click the metrics row and confirm it navigates to \`/project/<ref>/observability/database\` - While metrics are loading, a spinner should appear in the row - If the infra monitoring API is unavailable, the row should show "Metrics unavailable" instead of zeroes <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Release Notes * **New Features** * Infrastructure configuration page now displays real-time compute metrics (CPU, disk, memory usage) with color-coded usage indicators based on thresholds. * Connection information is displayed when available. * Includes loading states and error handling for metric retrieval. * **Tests** * Added test coverage for metric color-coding logic. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
30 lines
904 B
TypeScript
30 lines
904 B
TypeScript
import { describe, expect, it } from 'vitest'
|
|
|
|
import { metricColor } from './InstanceNode.utils'
|
|
|
|
describe('metricColor', () => {
|
|
it('returns warning color at 80%', () => {
|
|
expect(metricColor(80)).toBe('text-warning')
|
|
})
|
|
|
|
it('returns warning color between 80% and 90%', () => {
|
|
expect(metricColor(85)).toBe('text-warning')
|
|
expect(metricColor(89)).toBe('text-warning')
|
|
})
|
|
|
|
it('returns destructive color at 90%', () => {
|
|
expect(metricColor(90)).toBe('text-destructive')
|
|
})
|
|
|
|
it('returns destructive color above 90%', () => {
|
|
expect(metricColor(95)).toBe('text-destructive')
|
|
expect(metricColor(100)).toBe('text-destructive')
|
|
})
|
|
|
|
it('returns light foreground color below 80%', () => {
|
|
expect(metricColor(0)).toBe('text-foreground-light')
|
|
expect(metricColor(50)).toBe('text-foreground-light')
|
|
expect(metricColor(79)).toBe('text-foreground-light')
|
|
})
|
|
})
|