feat(ui/alerts): alert rule query hooks (CRUD, enable/disable, preview, test-evaluate)
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
66
ui/src/api/queries/alertRules.test.tsx
Normal file
66
ui/src/api/queries/alertRules.test.tsx
Normal file
@@ -0,0 +1,66 @@
|
|||||||
|
import { describe, it, expect, beforeEach, vi } from 'vitest';
|
||||||
|
import { renderHook, waitFor } from '@testing-library/react';
|
||||||
|
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
||||||
|
import type { ReactNode } from 'react';
|
||||||
|
import { useEnvironmentStore } from '../environment-store';
|
||||||
|
|
||||||
|
vi.mock('../client', () => ({
|
||||||
|
api: { GET: vi.fn(), POST: vi.fn(), PUT: vi.fn(), DELETE: vi.fn() },
|
||||||
|
}));
|
||||||
|
|
||||||
|
import { api as apiClient } from '../client';
|
||||||
|
import { useAlertRules, useSetAlertRuleEnabled } from './alertRules';
|
||||||
|
|
||||||
|
function wrapper({ children }: { children: ReactNode }) {
|
||||||
|
const qc = new QueryClient({
|
||||||
|
defaultOptions: {
|
||||||
|
queries: { retry: false },
|
||||||
|
mutations: { retry: false },
|
||||||
|
},
|
||||||
|
});
|
||||||
|
return <QueryClientProvider client={qc}>{children}</QueryClientProvider>;
|
||||||
|
}
|
||||||
|
|
||||||
|
describe('useAlertRules', () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
vi.clearAllMocks();
|
||||||
|
useEnvironmentStore.setState({ environment: 'prod' });
|
||||||
|
});
|
||||||
|
|
||||||
|
it('fetches rules for selected env', async () => {
|
||||||
|
(apiClient.GET as any).mockResolvedValue({ data: [], error: null });
|
||||||
|
const { result } = renderHook(() => useAlertRules(), { wrapper });
|
||||||
|
await waitFor(() => expect(result.current.isSuccess).toBe(true));
|
||||||
|
expect(apiClient.GET).toHaveBeenCalledWith(
|
||||||
|
'/environments/{envSlug}/alerts/rules',
|
||||||
|
{ params: { path: { envSlug: 'prod' } } },
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('useSetAlertRuleEnabled', () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
vi.clearAllMocks();
|
||||||
|
useEnvironmentStore.setState({ environment: 'prod' });
|
||||||
|
});
|
||||||
|
|
||||||
|
it('POSTs to /enable when enabling', async () => {
|
||||||
|
(apiClient.POST as any).mockResolvedValue({ error: null });
|
||||||
|
const { result } = renderHook(() => useSetAlertRuleEnabled(), { wrapper });
|
||||||
|
await result.current.mutateAsync({ id: 'r1', enabled: true });
|
||||||
|
expect(apiClient.POST).toHaveBeenCalledWith(
|
||||||
|
'/environments/{envSlug}/alerts/rules/{id}/enable',
|
||||||
|
{ params: { path: { envSlug: 'prod', id: 'r1' } } },
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('POSTs to /disable when disabling', async () => {
|
||||||
|
(apiClient.POST as any).mockResolvedValue({ error: null });
|
||||||
|
const { result } = renderHook(() => useSetAlertRuleEnabled(), { wrapper });
|
||||||
|
await result.current.mutateAsync({ id: 'r1', enabled: false });
|
||||||
|
expect(apiClient.POST).toHaveBeenCalledWith(
|
||||||
|
'/environments/{envSlug}/alerts/rules/{id}/disable',
|
||||||
|
{ params: { path: { envSlug: 'prod', id: 'r1' } } },
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
||||||
187
ui/src/api/queries/alertRules.ts
Normal file
187
ui/src/api/queries/alertRules.ts
Normal file
@@ -0,0 +1,187 @@
|
|||||||
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||||
|
import type { components } from '../schema';
|
||||||
|
import { apiClient, useSelectedEnv } from './alertMeta';
|
||||||
|
|
||||||
|
export type AlertRuleResponse = components['schemas']['AlertRuleResponse'];
|
||||||
|
export type AlertRuleRequest = components['schemas']['AlertRuleRequest'];
|
||||||
|
export type RenderPreviewRequest = components['schemas']['RenderPreviewRequest'];
|
||||||
|
export type RenderPreviewResponse = components['schemas']['RenderPreviewResponse'];
|
||||||
|
export type TestEvaluateRequest = components['schemas']['TestEvaluateRequest'];
|
||||||
|
export type TestEvaluateResponse = components['schemas']['TestEvaluateResponse'];
|
||||||
|
export type AlertCondition = AlertRuleResponse['condition'];
|
||||||
|
export type ConditionKind = AlertRuleResponse['conditionKind'];
|
||||||
|
|
||||||
|
// NOTE ON TYPES: the generated OpenAPI schema for env-scoped alert-rule endpoints
|
||||||
|
// emits `path?: never` plus a `query.env: Environment` parameter because the
|
||||||
|
// server resolves the env via the `@EnvPath` argument resolver, which the
|
||||||
|
// OpenAPI scanner does not recognise as a path variable. At runtime the URL
|
||||||
|
// template `{envSlug}` is substituted from `params.path.envSlug` by
|
||||||
|
// openapi-fetch regardless of what the TS types say; we therefore cast the
|
||||||
|
// call options to `any` on each call to bypass the generated type oddity.
|
||||||
|
|
||||||
|
/** List alert rules in the current env. */
|
||||||
|
export function useAlertRules() {
|
||||||
|
const env = useSelectedEnv();
|
||||||
|
return useQuery({
|
||||||
|
queryKey: ['alertRules', env],
|
||||||
|
enabled: !!env,
|
||||||
|
queryFn: async () => {
|
||||||
|
if (!env) throw new Error('no env');
|
||||||
|
const { data, error } = await apiClient.GET(
|
||||||
|
'/environments/{envSlug}/alerts/rules',
|
||||||
|
{
|
||||||
|
params: { path: { envSlug: env } },
|
||||||
|
} as any,
|
||||||
|
);
|
||||||
|
if (error) throw error;
|
||||||
|
return data as AlertRuleResponse[];
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Fetch a single alert rule by id. */
|
||||||
|
export function useAlertRule(id: string | undefined) {
|
||||||
|
const env = useSelectedEnv();
|
||||||
|
return useQuery({
|
||||||
|
queryKey: ['alertRules', env, id],
|
||||||
|
enabled: !!env && !!id,
|
||||||
|
queryFn: async () => {
|
||||||
|
if (!env || !id) throw new Error('no env/id');
|
||||||
|
const { data, error } = await apiClient.GET(
|
||||||
|
'/environments/{envSlug}/alerts/rules/{id}',
|
||||||
|
{
|
||||||
|
params: { path: { envSlug: env, id } },
|
||||||
|
} as any,
|
||||||
|
);
|
||||||
|
if (error) throw error;
|
||||||
|
return data as AlertRuleResponse;
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Create a new alert rule in the current env. */
|
||||||
|
export function useCreateAlertRule() {
|
||||||
|
const qc = useQueryClient();
|
||||||
|
const env = useSelectedEnv();
|
||||||
|
return useMutation({
|
||||||
|
mutationFn: async (req: AlertRuleRequest) => {
|
||||||
|
if (!env) throw new Error('no env');
|
||||||
|
const { data, error } = await apiClient.POST(
|
||||||
|
'/environments/{envSlug}/alerts/rules',
|
||||||
|
{
|
||||||
|
params: { path: { envSlug: env } },
|
||||||
|
body: req,
|
||||||
|
} as any,
|
||||||
|
);
|
||||||
|
if (error) throw error;
|
||||||
|
return data as AlertRuleResponse;
|
||||||
|
},
|
||||||
|
onSuccess: () => {
|
||||||
|
qc.invalidateQueries({ queryKey: ['alertRules', env] });
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Update an existing alert rule. */
|
||||||
|
export function useUpdateAlertRule(id: string) {
|
||||||
|
const qc = useQueryClient();
|
||||||
|
const env = useSelectedEnv();
|
||||||
|
return useMutation({
|
||||||
|
mutationFn: async (req: AlertRuleRequest) => {
|
||||||
|
if (!env) throw new Error('no env');
|
||||||
|
const { data, error } = await apiClient.PUT(
|
||||||
|
'/environments/{envSlug}/alerts/rules/{id}',
|
||||||
|
{
|
||||||
|
params: { path: { envSlug: env, id } },
|
||||||
|
body: req,
|
||||||
|
} as any,
|
||||||
|
);
|
||||||
|
if (error) throw error;
|
||||||
|
return data as AlertRuleResponse;
|
||||||
|
},
|
||||||
|
onSuccess: () => {
|
||||||
|
qc.invalidateQueries({ queryKey: ['alertRules', env] });
|
||||||
|
qc.invalidateQueries({ queryKey: ['alertRules', env, id] });
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Delete an alert rule. */
|
||||||
|
export function useDeleteAlertRule() {
|
||||||
|
const qc = useQueryClient();
|
||||||
|
const env = useSelectedEnv();
|
||||||
|
return useMutation({
|
||||||
|
mutationFn: async (id: string) => {
|
||||||
|
if (!env) throw new Error('no env');
|
||||||
|
const { error } = await apiClient.DELETE(
|
||||||
|
'/environments/{envSlug}/alerts/rules/{id}',
|
||||||
|
{
|
||||||
|
params: { path: { envSlug: env, id } },
|
||||||
|
} as any,
|
||||||
|
);
|
||||||
|
if (error) throw error;
|
||||||
|
},
|
||||||
|
onSuccess: () => {
|
||||||
|
qc.invalidateQueries({ queryKey: ['alertRules', env] });
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Enable or disable an alert rule. Routes to /enable or /disable based on the flag. */
|
||||||
|
export function useSetAlertRuleEnabled() {
|
||||||
|
const qc = useQueryClient();
|
||||||
|
const env = useSelectedEnv();
|
||||||
|
return useMutation({
|
||||||
|
mutationFn: async ({ id, enabled }: { id: string; enabled: boolean }) => {
|
||||||
|
if (!env) throw new Error('no env');
|
||||||
|
const path = enabled
|
||||||
|
? '/environments/{envSlug}/alerts/rules/{id}/enable'
|
||||||
|
: '/environments/{envSlug}/alerts/rules/{id}/disable';
|
||||||
|
const { error } = await apiClient.POST(path, {
|
||||||
|
params: { path: { envSlug: env, id } },
|
||||||
|
} as any);
|
||||||
|
if (error) throw error;
|
||||||
|
},
|
||||||
|
onSuccess: () => {
|
||||||
|
qc.invalidateQueries({ queryKey: ['alertRules', env] });
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Render a preview of the notification title + message for a rule using the provided context. */
|
||||||
|
export function useRenderPreview() {
|
||||||
|
const env = useSelectedEnv();
|
||||||
|
return useMutation({
|
||||||
|
mutationFn: async ({ id, req }: { id: string; req: RenderPreviewRequest }) => {
|
||||||
|
if (!env) throw new Error('no env');
|
||||||
|
const { data, error } = await apiClient.POST(
|
||||||
|
'/environments/{envSlug}/alerts/rules/{id}/render-preview',
|
||||||
|
{
|
||||||
|
params: { path: { envSlug: env, id } },
|
||||||
|
body: req,
|
||||||
|
} as any,
|
||||||
|
);
|
||||||
|
if (error) throw error;
|
||||||
|
return data as RenderPreviewResponse;
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Test-evaluate a rule (dry-run) without persisting an alert instance. */
|
||||||
|
export function useTestEvaluate() {
|
||||||
|
const env = useSelectedEnv();
|
||||||
|
return useMutation({
|
||||||
|
mutationFn: async ({ id, req }: { id: string; req: TestEvaluateRequest }) => {
|
||||||
|
if (!env) throw new Error('no env');
|
||||||
|
const { data, error } = await apiClient.POST(
|
||||||
|
'/environments/{envSlug}/alerts/rules/{id}/test-evaluate',
|
||||||
|
{
|
||||||
|
params: { path: { envSlug: env, id } },
|
||||||
|
body: req,
|
||||||
|
} as any,
|
||||||
|
);
|
||||||
|
if (error) throw error;
|
||||||
|
return data as TestEvaluateResponse;
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user