feat(api): add CloudWatch alarms and metric charts to the cloud explorer

2026-10-24 22:48:41 -04:00
parent f4b3e45f3d
commit 6dd33b8f65
26 changed files with 1551 additions and 1 deletions
@@ -0,0 +1,35 @@
+import {fireEvent, render, screen} from '@testing-library/react'
+import {expect, test} from 'vitest'
+import {MetricChart} from './MetricChart'
+
+const series = {label: 'Errors', statistic: 'Sum', periodSeconds: 60, points: [
+    {timestamp: '2026-10-25T10:00:00Z', value: 3},
+    {timestamp: '2026-10-25T10:01:00Z', value: 7},
+]}
+
+test('draws the line, labels the latest value and the threshold, and tabulates the points', () => {
+    const {container} = render(<MetricChart series={series} threshold={5}/>)
+
+    expect(container.querySelector('.metric-chart-line')?.getAttribute('d')).toMatch(/^M[\d.]+,[\d.]+ L[\d.]+,[\d.]+$/)
+    expect(screen.getByText('Threshold 5')).toBeInTheDocument()
+    expect(screen.getByRole('img', {name: /Errors \(Sum\), 2 points; latest 7 .*threshold 5/})).toBeInTheDocument()
+    expect(screen.getByText('Data table (2 points)')).toBeInTheDocument()
+    expect(container.querySelectorAll('.metric-chart-table tbody tr')).toHaveLength(2)
+})
+
+test('shows the tooltip from the keyboard, value first', () => {
+    render(<MetricChart series={series}/>)
+    const chart = screen.getByRole('img')
+
+    fireEvent.focus(chart)
+    expect(screen.getByRole('status')).toHaveTextContent(/^7Errors · Sum/)
+    fireEvent.keyDown(chart, {key: 'ArrowLeft'})
+    expect(screen.getByRole('status')).toHaveTextContent(/^3/)
+    fireEvent.keyDown(chart, {key: 'Escape'})
+    expect(screen.queryByRole('status')).not.toBeInTheDocument()
+})
+
+test('says when there is no data', () => {
+    render(<MetricChart series={{...series, points: []}}/>)
+    expect(screen.getByText('No data points in this time range.')).toBeInTheDocument()
+})