cameleer/cameleer-server
1
0
Fork 0
Code Issues 44 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(alerting): server-side state+severity filters, ButtonGroup filter UI

Browse Source 
Backend: `GET /environments/{envSlug}/alerts` now accepts optional multi-value
`state=…` and `severity=…` query params. Filters are pushed down to
PostgresAlertInstanceRepository, which appends `AND state::text = ANY(?)` /
`AND severity::text = ANY(?)` to the inbox query (null/empty = no filter).

`AlertInstanceRepository.listForInbox` gained a 7-arg overload; the old 5-arg
form is preserved as a default delegate so existing callers (evaluator,
AlertingFullLifecycleIT, PostgresAlertInstanceRepositoryIT) compile unchanged.
`InAppInboxQuery.listInbox` also has a new filtered overload.

UI: InboxPage severity filter migrated from `SegmentedTabs` (single-select,
no color cues) to `ButtonGroup` (multi-select with severity-coloured dots),
matching the topnavbar status-filter pattern. `useAlerts` forwards the
filters as query params and cache-keys on the filter tuple so each combo
is independently cached.

Unit + hook tests updated to the new contract (5 UI tests + 8 Java unit
tests passing). OpenAPI types regenerated from the fresh local backend.
This commit is contained in:
hsiegeln
2026-04-21 12:47:31 +02:00
parent 468132d1dd
commit f037d8c922
10 changed files with 144 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
ui/src/api/queries/alerts.test.tsx
View File

@@ -22,16 +22,32 @@ describe('useAlerts', () => {
useEnvironmentStore.setState({ environment: 'dev' });
});
it('fetches up to 200 alerts for selected env (no server-side filter params)', async () => {
// Backend AlertController.list accepts only `limit`; state/severity are
// dropped server-side. We therefore fetch once per env and filter
// client-side via react-query `select`.
it('forwards state + severity filters to the server as query params', async () => {
(apiClient.GET as any).mockResolvedValue({ data: [], error: null });
const { result } = renderHook(
() => useAlerts({ state: 'FIRING', severity: ['CRITICAL', 'WARNING'] }),
{ wrapper },
);
await waitFor(() => expect(result.current.isSuccess).toBe(true));
expect(apiClient.GET).toHaveBeenCalledWith(
'/environments/{envSlug}/alerts',
expect.objectContaining({
params: expect.objectContaining({
path: { envSlug: 'dev' },
query: {
limit: 200,
state: ['FIRING'],
severity: ['CRITICAL', 'WARNING'],
},
}),
}),
);
});
it('omits state + severity when no filter is set', async () => {
(apiClient.GET as any).mockResolvedValue({ data: [], error: null });
const { result } = renderHook(() => useAlerts(), { wrapper });
await waitFor(() => expect(result.current.isSuccess).toBe(true));
expect(apiClient.GET).toHaveBeenCalledWith(
'/environments/{envSlug}/alerts',
expect.objectContaining({
@@ -43,21 +59,19 @@ describe('useAlerts', () => {
);
});
it('applies state + severity filters client-side via select', async () => {
it('still applies ruleId client-side via select', async () => {
const dataset = [
{ id: '1', state: 'FIRING', severity: 'CRITICAL', title: 'a' },
{ id: '2', state: 'FIRING', severity: 'WARNING', title: 'b' },
{ id: '3', state: 'ACKNOWLEDGED', severity: 'CRITICAL', title: 'c' },
{ id: '4', state: 'RESOLVED', severity: 'INFO', title: 'd' },
{ id: '1', ruleId: 'R1', state: 'FIRING', severity: 'WARNING', title: 'a' },
{ id: '2', ruleId: 'R2', state: 'FIRING', severity: 'WARNING', title: 'b' },
];
(apiClient.GET as any).mockResolvedValue({ data: dataset, error: null });
const { result } = renderHook(
() => useAlerts({ state: ['FIRING'], severity: ['CRITICAL', 'WARNING'] }),
() => useAlerts({ ruleId: 'R2' }),
{ wrapper },
);
await waitFor(() => expect(result.current.isSuccess).toBe(true));
const ids = (result.current.data ?? []).map((a: any) => a.id);
expect(ids).toEqual(['1', '2']);
expect(ids).toEqual(['2']);
});
it('does not fetch when no env is selected', () => {