@cccsaurora/howler-ui 3.1.0-dev.1705 → 3.1.0-dev.1708

package/api/search/fields/event.d.ts

@@ -0,0 +1,3 @@
+import type { SearchField } from '@cccsaurora/howler-ui/api/search/fields';
+export declare const uri: () => string;
+export declare const get: () => Promise<SearchField[]>;

package/api/search/fields/event.js

@@ -0,0 +1,8 @@
+import { hget, joinUri } from '@cccsaurora/howler-ui/api';
+import { indexed, uri as parentUri } from '@cccsaurora/howler-ui/api/search/fields';
+export const uri = () => {
+    return joinUri(parentUri(), 'event');
+};
+export const get = async () => {
+    return indexed((await hget(uri())) ?? {});
+};

package/api/search/fields/index.d.ts

@@ -1,3 +1,4 @@
+import * as event from '@cccsaurora/howler-ui/api/search/fields/event';
 import * as hit from '@cccsaurora/howler-ui/api/search/fields/hit';
 import * as user from '@cccsaurora/howler-ui/api/search/fields/user';
 export type SearchField = {
@@ -8,6 +9,10 @@ export type SearchField = {
     stored: boolean;
     type: string;
     description?: string;
+    deprecated?: boolean;
+    deprecated_description?: string;
+    regex?: string;
+    values?: string[];
 };
 export declare const uri: () => string;
 export declare const map: (fields: {
@@ -16,4 +21,4 @@ export declare const map: (fields: {
 export declare const indexed: (fields: {
     [key: string]: SearchField;
 }) => SearchField[];
-export { hit, user };
+export { event, hit, user };

package/api/search/fields/index.js

@@ -1,4 +1,5 @@
 import { uri as parentUri } from '@cccsaurora/howler-ui/api/search';
+import * as event from '@cccsaurora/howler-ui/api/search/fields/event';
 import * as hit from '@cccsaurora/howler-ui/api/search/fields/hit';
 import * as user from '@cccsaurora/howler-ui/api/search/fields/user';
 // import urlJoin from 'url-join';
@@ -12,4 +13,4 @@ export const map = (fields) => {
 export const indexed = (fields) => {
     return map(fields).filter(field => field.indexed);
 };
-export { hit, user };
+export { event, hit, user };

package/api/v2/case/rules/backfill/count.d.ts

@@ -0,0 +1,4 @@
+export declare const uri: (caseId: string, ruleId: string) => string;
+export declare const post: (caseId: string, ruleId: string, since: string) => Promise<{
+    count: number;
+} | undefined>;

package/api/v2/case/rules/backfill/count.js

@@ -0,0 +1,8 @@
+import { hpost, joinAllUri } from '@cccsaurora/howler-ui/api';
+import { uri as caseUri } from '@cccsaurora/howler-ui/api/v2/case';
+export const uri = (caseId, ruleId) => {
+    return joinAllUri(caseUri(caseId), 'rules', ruleId, 'backfill', 'count');
+};
+export const post = (caseId, ruleId, since) => {
+    return hpost(uri(caseId, ruleId), { since });
+};

package/api/v2/case/rules/backfill/index.d.ts

@@ -0,0 +1,6 @@
+import * as count from './count';
+export declare const uri: (caseId: string, ruleId: string) => string;
+export declare const post: (caseId: string, ruleId: string, since: string) => Promise<{
+    queued: number;
+} | undefined>;
+export { count };

package/api/v2/case/rules/backfill/index.js

@@ -0,0 +1,10 @@
+import { hpost, joinAllUri } from '@cccsaurora/howler-ui/api';
+import { uri as caseUri } from '@cccsaurora/howler-ui/api/v2/case';
+import * as count from './count';
+export const uri = (caseId, ruleId) => {
+    return joinAllUri(caseUri(caseId), 'rules', ruleId, 'backfill');
+};
+export const post = (caseId, ruleId, since) => {
+    return hpost(uri(caseId, ruleId), { since });
+};
+export { count };

package/api/v2/case/{rules.d.ts → rules/index.d.ts}

@@ -1,6 +1,8 @@
+import * as backfill from '@cccsaurora/howler-ui/api/v2/case/rules/backfill';
 import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
 import type { Rule } from '@cccsaurora/howler-ui/models/entities/generated/Rule';
 export declare const uri: (caseId: string, ruleId?: string) => string;
 export declare const post: (caseId: string, ruleData: Partial<Rule>) => Promise<Case | undefined>;
 export declare const del: (caseId: string, ruleId: string) => Promise<Case | undefined>;
 export declare const put: (caseId: string, ruleId: string, data: Partial<Rule>) => Promise<Case | undefined>;
+export { backfill };

package/api/v2/case/{rules.js → rules/index.js}

@@ -1,6 +1,7 @@
 // eslint-disable-next-line import/no-cycle
 import { hdelete, hpost, hput, joinAllUri } from '@cccsaurora/howler-ui/api';
 import { uri as parentUri } from '@cccsaurora/howler-ui/api/v2/case';
+import * as backfill from '@cccsaurora/howler-ui/api/v2/case/rules/backfill';
 export const uri = (caseId, ruleId) => {
     if (ruleId) {
         return joinAllUri(parentUri(caseId), 'rules', ruleId);
@@ -16,3 +17,4 @@ export const del = (caseId, ruleId) => {
 export const put = (caseId, ruleId, data) => {
     return hput(uri(caseId, ruleId), data);
 };
+export { backfill };

package/api/v2/index.d.ts

@@ -1,5 +1,6 @@
 import * as case_ from '@cccsaurora/howler-ui/api/v2/case';
 import * as fuzzy from '@cccsaurora/howler-ui/api/v2/fuzzy';
+import * as ingest from '@cccsaurora/howler-ui/api/v2/ingest';
 import * as search from '@cccsaurora/howler-ui/api/v2/search';
 export declare const uri: () => string;
-export { case_ as case, fuzzy, search };
+export { case_ as case, fuzzy, ingest, search };

package/api/v2/index.js

@@ -1,7 +1,8 @@
 import * as case_ from '@cccsaurora/howler-ui/api/v2/case';
 import * as fuzzy from '@cccsaurora/howler-ui/api/v2/fuzzy';
+import * as ingest from '@cccsaurora/howler-ui/api/v2/ingest';
 import * as search from '@cccsaurora/howler-ui/api/v2/search';
 export const uri = () => {
     return '/api/v2';
 };
-export { case_ as case, fuzzy, search };
+export { case_ as case, fuzzy, ingest, search };

package/api/v2/ingest.d.ts

@@ -0,0 +1,3 @@
+import { type HowlerRefreshParam } from '@cccsaurora/howler-ui/api';
+export declare const uri: (index: string) => string;
+export declare const post: (index: string, records: Record<string, unknown>[], refresh?: HowlerRefreshParam) => Promise<string[] | undefined>;

package/api/v2/ingest.js

@@ -0,0 +1,8 @@
+import { hpost, joinAllUri } from '@cccsaurora/howler-ui/api';
+import { uri as parentUri } from '@cccsaurora/howler-ui/api/v2';
+export const uri = (index) => {
+    return joinAllUri(parentUri(), 'ingest', index);
+};
+export const post = (index, records, refresh) => {
+    return hpost(uri(index), records, undefined, refresh ? new URLSearchParams({ refresh }) : undefined);
+};

package/components/elements/event/EventPreview.js

@@ -7,6 +7,6 @@ import { Link } from 'react-router';
 const EventPreview = ({ event }) => {
     const { t } = useTranslation();
     const theme = useTheme();
-    return (_jsx(Stack, { flex: 1, spacing: 1, sx: { overflow: 'hidden', borderBottom: `thin solid ${theme.palette.divider}`, pb: 1, mb: 0 }, children: _jsxs(Stack, { children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Typography, { variant: "body1", fontWeight: "bold", children: event.event.provider }), _jsx("div", { style: { flex: 1 } }), _jsx(Chip, { label: event.event.kind }), event.event.reference && (_jsx(IconButton, { size: "small", component: Link, to: event.event.reference, sx: { opacity: 1 }, target: "_blank", rel: "noopener noreferrer", children: _jsx(OpenInNew, { fontSize: "small" }) }))] }), event.event.type && (_jsxs(Typography, { variant: "caption", children: [t('event.type'), " - ", event.event.type.join(', ')] })), event.event.module && (_jsxs(Typography, { variant: "caption", children: [t('event.module'), " - ", event.event.module] }))] }) }));
+    return (_jsx(Stack, { flex: 1, spacing: 1, sx: { overflow: 'hidden', borderBottom: `thin solid ${theme.palette.divider}`, pb: 1, mb: 0 }, children: _jsxs(Stack, { children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Typography, { variant: "body1", fontWeight: "bold", children: event.message || event.event.provider }), _jsx("div", { style: { flex: 1 } }), _jsx(Chip, { label: event.event.kind }), event.event.reference && (_jsx(IconButton, { size: "small", component: Link, to: event.event.reference, sx: { opacity: 1 }, target: "_blank", rel: "noopener noreferrer", children: _jsx(OpenInNew, { fontSize: "small" }) }))] }), event.message && event.event.provider && (_jsxs(Typography, { variant: "caption", children: [t('event.provider'), " - ", event.event.provider] })), event.event.type && (_jsxs(Typography, { variant: "caption", children: [t('event.type'), " - ", event.event.type.join(', ')] })), event.event.module && (_jsxs(Typography, { variant: "caption", children: [t('event.module'), " - ", event.event.module] }))] }) }));
 };
 export default memo(EventPreview);

package/components/routes/cases/detail/CaseRules.js

@@ -1,11 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Add, Delete } from '@mui/icons-material';
-import { Button, Card, Chip, IconButton, Stack, Switch, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Tooltip, Typography } from '@mui/material';
+import { Add, Delete, History } from '@mui/icons-material';
+import { Button, Card, Chip, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, Stack, Switch, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Tooltip, Typography } from '@mui/material';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
 import api from '@cccsaurora/howler-ui/api';
 import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
 import ConfirmDeleteModal from '@cccsaurora/howler-ui/components/elements/display/modals/ConfirmDeleteModal';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
-import { useCallback, useContext, useState } from 'react';
+import dayjs, {} from 'dayjs';
+import { useCallback, useContext, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useOutletContext } from 'react-router';
 import useCase from '../hooks/useCase';
@@ -17,6 +21,58 @@ const CaseRules = ({ case: providedCase, caseId }) => {
     const routeCase = useOutletContext();
     const { case: _case, update } = useCase({ case: providedCase ?? routeCase, caseId });
     const [dialogOpen, setDialogOpen] = useState(false);
+    const [backfillRule, setBackfillRule] = useState();
+    const [backfillSince, setBackfillSince] = useState(dayjs().subtract(30, 'day'));
+    const [backfillCount, setBackfillCount] = useState(null);
+    const [backfillLoading, setBackfillLoading] = useState(false);
+    const backfillCountRequestId = useRef(0);
+    const invalidateBackfillCountRequest = useCallback(() => {
+        backfillCountRequestId.current += 1;
+        setBackfillLoading(false);
+    }, []);
+    const handleBackfillDialogClose = useCallback(() => {
+        invalidateBackfillCountRequest();
+        setBackfillRule(undefined);
+        setBackfillCount(null);
+        setBackfillSince(dayjs().subtract(30, 'day'));
+    }, [invalidateBackfillCountRequest]);
+    const handleCountBackfill = useCallback(async () => {
+        if (!_case?.case_id || !backfillRule?.rule_id || !backfillSince?.isValid()) {
+            return;
+        }
+        const requestId = ++backfillCountRequestId.current;
+        setBackfillLoading(true);
+        try {
+            const response = await dispatchApi(api.v2.case.rules.backfill.count.post(_case.case_id, backfillRule.rule_id, backfillSince.toISOString()));
+            if (response && requestId === backfillCountRequestId.current) {
+                setBackfillCount(response.count);
+            }
+        }
+        finally {
+            if (requestId === backfillCountRequestId.current) {
+                setBackfillLoading(false);
+            }
+        }
+    }, [_case?.case_id, backfillRule, backfillSince, dispatchApi]);
+    const handleBackfillDialogOpen = useCallback((rule) => {
+        invalidateBackfillCountRequest();
+        setBackfillRule(rule);
+        setBackfillCount(null);
+        setBackfillSince(dayjs().subtract(30, 'day'));
+    }, [invalidateBackfillCountRequest]);
+    const handleSubmitBackfill = useCallback(async () => {
+        if (!_case?.case_id || !backfillRule?.rule_id || !backfillSince?.isValid() || backfillCount === null) {
+            return;
+        }
+        setBackfillLoading(true);
+        try {
+            await dispatchApi(api.v2.case.rules.backfill.post(_case.case_id, backfillRule.rule_id, backfillSince.toISOString()));
+            handleBackfillDialogClose();
+        }
+        finally {
+            setBackfillLoading(false);
+        }
+    }, [_case?.case_id, backfillRule, backfillSince, backfillCount, dispatchApi, handleBackfillDialogClose]);
     const handleCreateRule = useCallback(async (ruleData) => {
         if (!_case?.case_id) {
             return;
@@ -54,6 +110,13 @@ const CaseRules = ({ case: providedCase, caseId }) => {
                                                     fontFamily: 'monospace'
                                                 }, children: rule.query }) }), _jsx(TableCell, { children: _jsx(Stack, { direction: "row", spacing: 0.5, children: (rule.indexes ?? ['hit']).map(idx => (_jsx(Chip, { size: "small", label: idx, variant: "outlined" }, idx))) }) }), _jsx(TableCell, { children: rule.timeframe != null ? (_jsx(Chip, { size: "small", label: rule.expire_after_resolved
                                                     ? t('page.cases.rules.timeframe.after_resolved', { days: rule.timeframe })
-                                                    : t('page.cases.rules.timeframe.days', { days: rule.timeframe }), color: rule.expire_after_resolved ? 'info' : 'default' })) : (_jsx(Chip, { size: "small", label: t('page.cases.rules.no_expiry'), color: "success" })) }), _jsx(TableCell, { children: _jsx(Typography, { variant: "body2", children: rule.author }) }), _jsx(TableCell, { align: "center", children: _jsx(Switch, { id: `rule-toggle-${rule.rule_id}`, checked: rule.enabled ?? true, onChange: (_e, checked) => handleToggleEnabled(rule.rule_id, checked), size: "small" }) }), _jsx(TableCell, { align: "right", children: _jsx(Tooltip, { title: t('delete'), children: _jsx(IconButton, { id: `rule-delete-${rule.rule_id}`, size: "small", onClick: () => handleDeleteRule(rule.rule_id), children: _jsx(Delete, { fontSize: "small" }) }) }) })] }, rule.rule_id))) })] }) })) }), _jsx(CreateRuleDialog, { open: dialogOpen, onClose: () => setDialogOpen(false), onSubmit: handleCreateRule })] }));
+                                                    : t('page.cases.rules.timeframe.days', { days: rule.timeframe }), color: rule.expire_after_resolved ? 'info' : 'default' })) : (_jsx(Chip, { size: "small", label: t('page.cases.rules.no_expiry'), color: "success" })) }), _jsx(TableCell, { children: _jsx(Typography, { variant: "body2", children: rule.author }) }), _jsx(TableCell, { align: "center", children: _jsx(Switch, { id: `rule-toggle-${rule.rule_id}`, checked: rule.enabled ?? true, onChange: (_e, checked) => handleToggleEnabled(rule.rule_id, checked), size: "small" }) }), _jsxs(TableCell, { align: "right", children: [_jsx(Tooltip, { title: t('page.cases.rules.backfill'), children: _jsx(IconButton, { id: `rule-backfill-${rule.rule_id}`, size: "small", disabled: rule.enabled === false, onClick: () => handleBackfillDialogOpen(rule), children: _jsx(History, { fontSize: "small" }) }) }), _jsx(Tooltip, { title: t('delete'), children: _jsx(IconButton, { id: `rule-delete-${rule.rule_id}`, size: "small", onClick: () => handleDeleteRule(rule.rule_id), children: _jsx(Delete, { fontSize: "small" }) }) })] })] }, rule.rule_id))) })] }) })) }), _jsx(CreateRuleDialog, { open: dialogOpen, onClose: () => setDialogOpen(false), onSubmit: handleCreateRule }), _jsxs(Dialog, { open: !!backfillRule, onClose: handleBackfillDialogClose, maxWidth: "sm", fullWidth: true, id: "rule-backfill-dialog", children: [_jsx(DialogTitle, { children: t('page.cases.rules.backfill') }), _jsx(DialogContent, { children: _jsxs(Stack, { spacing: 2, sx: { mt: 1 }, children: [_jsx(Typography, { children: t('page.cases.rules.backfill.description') }), _jsx(LocalizationProvider, { dateAdapter: AdapterDayjs, children: _jsx(DateTimePicker, { label: t('page.cases.rules.backfill.since'), value: backfillSince, onChange: value => {
+                                            if (!value) {
+                                                return;
+                                            }
+                                            invalidateBackfillCountRequest();
+                                            setBackfillSince(value);
+                                            setBackfillCount(null);
+                                        }, maxDateTime: dayjs(), ampm: false, slotProps: { textField: { id: 'rule-backfill-since', size: 'small', fullWidth: true } } }) }), backfillCount !== null && (_jsx(Typography, { id: "rule-backfill-confirmation", children: t('page.cases.rules.backfill.confirm', { count: backfillCount }) }))] }) }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: handleBackfillDialogClose, children: t('cancel') }), backfillCount === null ? (_jsx(Button, { id: "rule-backfill-count-button", variant: "contained", onClick: handleCountBackfill, disabled: backfillLoading || !backfillSince?.isValid(), children: t('page.cases.rules.backfill.preview') })) : (_jsx(Button, { id: "rule-backfill-submit-button", variant: "contained", onClick: handleSubmitBackfill, disabled: backfillLoading || backfillCount === 0, children: t('page.cases.rules.backfill.submit') }))] })] })] }));
 };
 export default CaseRules;

package/components/routes/cases/detail/CaseRules.test.js

@@ -6,6 +6,7 @@ import { describe, expect, it, vi } from 'vitest';
 const mockDispatchApi = vi.hoisted(() => vi.fn());
 const mockUpdate = vi.hoisted(() => vi.fn());
 const mockShowModal = vi.hoisted(() => vi.fn());
+const mockTranslate = vi.hoisted(() => vi.fn((key, options) => (options?.count === undefined ? key : `${key}:${options.count}`)));
 const mockCase = vi.hoisted(() => ({
     current: {
         case_id: 'case-001',
@@ -16,6 +17,9 @@ const mockCase = vi.hoisted(() => ({
 vi.mock('components/hooks/useMyApi', () => ({
     default: () => ({ dispatchApi: mockDispatchApi })
 }));
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({ t: mockTranslate })
+}));
 vi.mock('components/app/providers/ModalProvider', async () => {
     const { createContext } = await import('react');
     return {
@@ -47,6 +51,12 @@ vi.mock('./CreateRuleDialog', () => ({
         return open ? (_jsxs("div", { id: "create-rule-dialog", children: [_jsx("button", { id: "rule-submit-button", onClick: () => onSubmit({ query: 'event.kind:alert', destination: 'alerts/incoming' }), children: "submit" }), _jsx("button", { onClick: onClose, children: "cancel" })] })) : null;
     }
 }));
+vi.mock('@mui/x-date-pickers/DateTimePicker', async () => {
+    const { default: dayjs } = await import('dayjs');
+    return {
+        DateTimePicker: ({ onChange }) => (_jsx("button", { id: "rule-backfill-since", onClick: () => onChange(dayjs('2025-06-01')), children: "pick date" }))
+    };
+});
 vi.mock('api', () => ({
     default: {
         v2: {
@@ -54,7 +64,11 @@ vi.mock('api', () => ({
                 rules: {
                     post: vi.fn(),
                     del: vi.fn(),
-                    put: vi.fn()
+                    put: vi.fn(),
+                    backfill: {
+                        post: vi.fn(),
+                        count: { post: vi.fn() }
+                    }
                 }
             }
         }
@@ -73,6 +87,13 @@ const makeRule = (overrides) => ({
     indexes: ['hit'],
     ...overrides
 });
+const createDeferred = () => {
+    let resolve;
+    const promise = new Promise(resolvePromise => {
+        resolve = resolvePromise;
+    });
+    return { promise, resolve };
+};
 describe('CaseRules', () => {
     beforeEach(() => {
         vi.clearAllMocks();
@@ -222,6 +243,72 @@ describe('CaseRules', () => {
             expect(mockDispatchApi).toHaveBeenCalledWith('put-request');
         });
     });
+    it('previews and confirms the number of matching alerts before backfilling', async () => {
+        const user = userEvent.setup();
+        mockCase.current = createMockCase({
+            case_id: 'case-001',
+            rules: [makeRule()]
+        });
+        mockDispatchApi.mockResolvedValueOnce({ count: 23 }).mockResolvedValueOnce({ queued: 23 });
+        vi.mocked(api.v2.case.rules.backfill.count.post).mockReturnValue('count-backfill-request');
+        vi.mocked(api.v2.case.rules.backfill.post).mockReturnValue('backfill-request');
+        render(_jsx(CaseRules, {}));
+        await user.click(screen.getByTestId('rule-backfill-rule-001'));
+        await user.click(screen.getByTestId('rule-backfill-count-button'));
+        await waitFor(() => {
+            expect(screen.getByTestId('rule-backfill-confirmation')).toHaveTextContent('page.cases.rules.backfill.confirm:23');
+        });
+        expect(mockDispatchApi).toHaveBeenCalledWith('count-backfill-request');
+        await user.click(screen.getByTestId('rule-backfill-submit-button'));
+        await waitFor(() => {
+            expect(mockDispatchApi).toHaveBeenCalledWith('backfill-request');
+            expect(screen.queryByTestId('rule-backfill-dialog')).not.toBeInTheDocument();
+        });
+    });
+    it('ignores a pending count response after closing and reopening for another rule', async () => {
+        const user = userEvent.setup();
+        mockCase.current = createMockCase({
+            case_id: 'case-001',
+            rules: [makeRule(), makeRule({ rule_id: 'rule-002' })]
+        });
+        const pendingCount = createDeferred();
+        mockDispatchApi.mockReturnValueOnce(pendingCount.promise);
+        vi.mocked(api.v2.case.rules.backfill.count.post).mockReturnValue('count-backfill-request');
+        render(_jsx(CaseRules, {}));
+        await user.click(screen.getByTestId('rule-backfill-rule-001'));
+        await user.click(screen.getByTestId('rule-backfill-count-button'));
+        await user.click(screen.getByText('cancel'));
+        await waitFor(() => {
+            expect(screen.queryByTestId('rule-backfill-dialog')).not.toBeInTheDocument();
+        });
+        await user.click(screen.getByTestId('rule-backfill-rule-002'));
+        await act(async () => {
+            pendingCount.resolve({ count: 23 });
+            await pendingCount.promise;
+        });
+        expect(screen.getByTestId('rule-backfill-count-button')).toBeInTheDocument();
+        expect(screen.queryByTestId('rule-backfill-confirmation')).not.toBeInTheDocument();
+    });
+    it('ignores a pending count response after the preview date changes', async () => {
+        const user = userEvent.setup();
+        mockCase.current = createMockCase({
+            case_id: 'case-001',
+            rules: [makeRule()]
+        });
+        const pendingCount = createDeferred();
+        mockDispatchApi.mockReturnValueOnce(pendingCount.promise);
+        vi.mocked(api.v2.case.rules.backfill.count.post).mockReturnValue('count-backfill-request');
+        render(_jsx(CaseRules, {}));
+        await user.click(screen.getByTestId('rule-backfill-rule-001'));
+        await user.click(screen.getByTestId('rule-backfill-count-button'));
+        await user.click(screen.getByTestId('rule-backfill-since'));
+        await act(async () => {
+            pendingCount.resolve({ count: 23 });
+            await pendingCount.promise;
+        });
+        expect(screen.getByTestId('rule-backfill-count-button')).toBeEnabled();
+        expect(screen.queryByTestId('rule-backfill-confirmation')).not.toBeInTheDocument();
+    });
     it('renders multiple rules', () => {
         mockCase.current = createMockCase({
             case_id: 'case-001',

package/components/routes/cases/detail/CaseSidebar.js

@@ -1,10 +1,11 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DndContext, DragOverlay, MouseSensor, pointerWithin, TouchSensor, useSensor, useSensors } from '@dnd-kit/core';
-import { AddCircle, CalendarMonth, Circle, Dashboard, Dataset, Description, Folder, Refresh, Rule, Search, UnfoldLess } from '@mui/icons-material';
+import { AddCircle, CalendarMonth, Circle, Dashboard, Dataset, Description, Event as EventIcon, Folder, Refresh, Rule, Search, UnfoldLess } from '@mui/icons-material';
 import { alpha, Box, Card, Chip, IconButton, LinearProgress, Skeleton, Stack, Tooltip, Typography, useTheme } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
 import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import AddEventModal from '@cccsaurora/howler-ui/components/routes/cases/modals/AddEventModal';
 import AddToCaseModal from '@cccsaurora/howler-ui/components/routes/cases/modals/AddToCaseModal';
 import dayjs from 'dayjs';
 import { useCallback, useContext, useReducer, useState } from 'react';
@@ -90,13 +91,27 @@ const CaseSidebar = ({ case: _case, update }) => {
             setLoading(false);
         }
     }, [_case, dispatchApi, update]);
+    if (!_case) {
+        return null;
+    }
     return (_jsxs(Box, { sx: {
             flex: 1,
             maxWidth: '350px',
             maxHeight: 'calc(100vh - 64px)',
             display: 'flex',
             flexDirection: 'column'
-        }, children: [_jsxs(Card, { sx: { borderRadius: 0, px: 2, py: 1 }, children: [_case?.title ? _jsx(Typography, { variant: "body1", children: _case.title }) : _jsx(Skeleton, { height: 24 }), _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", divider: _jsx(Circle, { color: "disabled", sx: { fontSize: '8px' } }), children: [_jsxs(Typography, { variant: "caption", color: "textSecondary", children: [t('started'), ": ", _case?.created ? dayjs(_case.created).toString() : _jsx(Skeleton, { height: 14 })] }), _case?.escalation ? (_jsx(Chip, { color: ESCALATION_COLOR_MAP[_case.escalation], label: t(_case.escalation) })) : (_jsx(Skeleton, { height: 24 }))] })] }), _case ? (_jsxs(_Fragment, { children: [_jsxs(Stack, { direction: "row", alignItems: "center", sx: navItemSx(location.pathname.endsWith(_case.case_id)), component: Link, to: `/cases/${_case.case_id}`, children: [_jsx(Dashboard, { fontSize: "small" }), _jsx(Typography, { variant: "body2", sx: { pl: 1, textWrap: 'nowrap' }, children: t('page.cases.dashboard') })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: navItemSx(location.pathname.endsWith('search')), component: Link, to: `/cases/${_case.case_id}/search`, children: [_jsx(Search, { fontSize: "small" }), _jsx(Typography, { variant: "body2", sx: { userSelect: 'none', pl: 1, textWrap: 'nowrap' }, children: t('page.cases.search') })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: navItemSx(location.pathname.endsWith('observables')), component: Link, to: `/cases/${_case.case_id}/observables`, children: [_jsx(Dataset, { fontSize: "small" }), _jsx(Typography, { variant: "body2", sx: { userSelect: 'none', pl: 1, textWrap: 'nowrap' }, children: t('page.cases.observables') })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: navItemSx(location.pathname.endsWith('timeline')), component: Link, to: `/cases/${_case.case_id}/timeline`, children: [_jsx(CalendarMonth, { fontSize: "small" }), _jsx(Typography, { variant: "body2", sx: { userSelect: 'none', pl: 1, textWrap: 'nowrap' }, children: t('page.cases.timeline') })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: navItemSx(location.pathname.endsWith('rules')), component: Link, to: `/cases/${_case.case_id}/rules`, children: [_jsx(Rule, {}), _jsx(Typography, { variant: "body2", sx: { userSelect: 'none', pl: 1, textWrap: 'nowrap' }, children: t('page.cases.rules') })] })] })) : (_jsxs(_Fragment, { children: [_jsx(Skeleton, { height: 28 }), _jsx(Skeleton, { height: 28 }), _jsx(Skeleton, { height: 28 }), _jsx(Skeleton, { height: 28 }), _jsx(Skeleton, { height: 28 })] })), _jsx(Card, { sx: { borderRadius: 0, p: 0.25 }, children: _jsxs(Stack, { direction: "row", spacing: 0.25, children: [_jsx("div", { style: { flex: 1 } }), _jsx(Tooltip, { title: t('page.cases.sidebar.add_item'), children: _jsxs(IconButton, { size: "small", sx: { position: 'relative' }, onClick: () => {
+        }, children: [_jsxs(Card, { sx: { borderRadius: 0, px: 2, py: 1 }, children: [_case?.title ? _jsx(Typography, { variant: "body1", children: _case.title }) : _jsx(Skeleton, { height: 24 }), _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", divider: _jsx(Circle, { color: "disabled", sx: { fontSize: '8px' } }), children: [_jsxs(Typography, { variant: "caption", color: "textSecondary", children: [t('started'), ": ", _case?.created ? dayjs(_case.created).toString() : _jsx(Skeleton, { height: 14 })] }), _case?.escalation ? (_jsx(Chip, { color: ESCALATION_COLOR_MAP[_case.escalation], label: t(_case.escalation) })) : (_jsx(Skeleton, { height: 24 }))] })] }), _case ? (_jsxs(_Fragment, { children: [_jsxs(Stack, { direction: "row", alignItems: "center", sx: navItemSx(location.pathname.endsWith(_case.case_id)), component: Link, to: `/cases/${_case.case_id}`, children: [_jsx(Dashboard, { fontSize: "small" }), _jsx(Typography, { variant: "body2", sx: { pl: 1, textWrap: 'nowrap' }, children: t('page.cases.dashboard') })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: navItemSx(location.pathname.endsWith('search')), component: Link, to: `/cases/${_case.case_id}/search`, children: [_jsx(Search, { fontSize: "small" }), _jsx(Typography, { variant: "body2", sx: { userSelect: 'none', pl: 1, textWrap: 'nowrap' }, children: t('page.cases.search') })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: navItemSx(location.pathname.endsWith('observables')), component: Link, to: `/cases/${_case.case_id}/observables`, children: [_jsx(Dataset, { fontSize: "small" }), _jsx(Typography, { variant: "body2", sx: { userSelect: 'none', pl: 1, textWrap: 'nowrap' }, children: t('page.cases.observables') })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: navItemSx(location.pathname.endsWith('timeline')), component: Link, to: `/cases/${_case.case_id}/timeline`, children: [_jsx(CalendarMonth, { fontSize: "small" }), _jsx(Typography, { variant: "body2", sx: { userSelect: 'none', pl: 1, textWrap: 'nowrap' }, children: t('page.cases.timeline') })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: navItemSx(location.pathname.endsWith('rules')), component: Link, to: `/cases/${_case.case_id}/rules`, children: [_jsx(Rule, {}), _jsx(Typography, { variant: "body2", sx: { userSelect: 'none', pl: 1, textWrap: 'nowrap' }, children: t('page.cases.rules') })] })] })) : (_jsxs(_Fragment, { children: [_jsx(Skeleton, { height: 28 }), _jsx(Skeleton, { height: 28 }), _jsx(Skeleton, { height: 28 }), _jsx(Skeleton, { height: 28 }), _jsx(Skeleton, { height: 28 })] })), _jsx(Card, { sx: { borderRadius: 0, p: 0.25 }, children: _jsxs(Stack, { direction: "row", spacing: 0.25, children: [_jsx("div", { style: { flex: 1 } }), _jsx(Tooltip, { title: t('page.cases.sidebar.add_event'), children: _jsxs(IconButton, { size: "small", sx: { position: 'relative' }, onClick: () => {
+                                    if (_case) {
+                                        showModal(_jsx(AddEventModal, { case: _case, onUpdated: update }), { maxHeight: '90vh', height: 'unset' });
+                                    }
+                                }, children: [_jsx(EventIcon, { sx: { fontSize: '18px' } }), _jsx(AddCircle, { sx: {
+                                            fontSize: '12px',
+                                            position: 'absolute',
+                                            bottom: 2,
+                                            right: 2,
+                                            backgroundColor: theme.palette.background.paper,
+                                            borderRadius: '100%'
+                                        }, htmlColor: "grey" })] }) }), _jsx(Tooltip, { title: t('page.cases.sidebar.add_item'), children: _jsxs(IconButton, { size: "small", sx: { position: 'relative' }, onClick: () => {
                                     if (_case) {
                                         showModal(_jsx(AddToCaseModal, { case: _case, onUpdated: update }), { maxHeight: '90vh', height: 'unset' });
                                     }

package/components/routes/cases/modals/AddEventModal.d.ts

@@ -0,0 +1,9 @@
+import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
+import { type FC } from 'react';
+type AddEventModalProps = {
+    case: Case;
+    parentId?: string;
+    onUpdated?: (updatedCase: Case) => void;
+};
+declare const AddEventModal: FC<AddEventModalProps>;
+export default AddEventModal;

package/components/routes/cases/modals/AddEventModal.js

@@ -0,0 +1,213 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Add, Delete } from '@mui/icons-material';
+import { Autocomplete, Box, Button, CircularProgress, Divider, IconButton, Stack, TextField, Typography } from '@mui/material';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import api from '@cccsaurora/howler-ui/api';
+import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import { unflatten } from 'flat';
+import Fuse from 'fuse.js';
+import { useContext, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useFolderOptions } from './hooks';
+const ESCALATIONS = ['hit', 'alert', 'evidence'];
+const MANAGED_FIELDS = new Set([
+    'event.created',
+    'event.id',
+    'event.ingested',
+    'event.kind',
+    'event.provider',
+    'howler.escalation',
+    'howler.hash',
+    'howler.id',
+    'howler.outline.indicators',
+    'howler.outline.summary',
+    'howler.outline.target',
+    'howler.outline.threat',
+    'howler.related',
+    'message',
+    'classification',
+    'timestamp'
+]);
+const isBlank = (value) => {
+    if (Array.isArray(value)) {
+        return value.length === 0;
+    }
+    return value === undefined || value === null || (typeof value === 'string' && value.trim() === '');
+};
+const getFieldOptions = (fields) => fields.filter(field => {
+    const key = field.key ?? '';
+    return (key &&
+        !MANAGED_FIELDS.has(key) &&
+        field.type !== 'object' &&
+        !key.startsWith('howler.comment.') &&
+        !key.startsWith('howler.log.'));
+});
+const parseList = (value) => value
+    .split(/[\n,]/)
+    .map(entry => entry.trim())
+    .filter(Boolean);
+const searchFields = (fields, query) => {
+    if (!query.trim()) {
+        return fields;
+    }
+    const tokens = query.toLowerCase().trim().split(/\s+/);
+    const tokenMatches = fields.filter(field => {
+        const searchable = `${field.key ?? ''} ${field.description ?? ''}`.toLowerCase();
+        return tokens.every(token => searchable.includes(token));
+    });
+    const fuzzyMatches = new Fuse(fields, {
+        keys: ['key', 'description'],
+        ignoreLocation: true,
+        threshold: 0.4
+    })
+        .search(query)
+        .map(result => result.item);
+    return [...tokenMatches, ...fuzzyMatches.filter(field => !tokenMatches.includes(field))];
+};
+const FieldInput = ({ field, value, onChange }) => {
+    const label = field.key ?? '';
+    const values = field.values ?? [];
+    if (values.length > 0) {
+        if (field.list) {
+            return (_jsx(Autocomplete, { multiple: true, options: values, value: Array.isArray(value) ? value.map(String) : [], onChange: (_, nextValue) => onChange(nextValue), renderInput: params => _jsx(TextField, { ...params, size: "small", label: label, helperText: field.description }) }));
+        }
+        return (_jsx(Autocomplete, { options: values, value: typeof value === 'string' ? value : null, onChange: (_, nextValue) => onChange(nextValue ?? undefined), renderInput: params => _jsx(TextField, { ...params, size: "small", label: label, helperText: field.description }) }));
+    }
+    if (field.type === 'boolean') {
+        return (_jsx(Autocomplete, { options: ['true', 'false'], value: typeof value === 'boolean' ? String(value) : null, onChange: (_, nextValue) => onChange(nextValue === null ? undefined : nextValue === 'true'), renderInput: params => _jsx(TextField, { ...params, size: "small", label: label, helperText: field.description }) }));
+    }
+    if (field.list) {
+        return (_jsx(TextField, { size: "small", label: label, helperText: field.description ?? 'Enter one value per line.', value: Array.isArray(value) ? value.join('\n') : '', onChange: event => onChange(parseList(event.target.value)), multiline: true }));
+    }
+    const numeric = ['integer', 'long', 'float', 'double', 'number'].includes(field.type);
+    return (_jsx(TextField, { size: "small", label: label, type: numeric ? 'number' : 'text', helperText: field.description, value: value === undefined ? '' : String(value), onChange: event => {
+            const nextValue = event.target.value;
+            if (!nextValue) {
+                onChange(undefined);
+            }
+            else if (numeric) {
+                onChange(field.type === 'integer' || field.type === 'long' ? Number.parseInt(nextValue, 10) : Number(nextValue));
+            }
+            else {
+                onChange(nextValue);
+            }
+        } }));
+};
+const AddEventModal = ({ case: _case, parentId, onUpdated }) => {
+    const { t } = useTranslation();
+    const { dispatchApi } = useMyApi();
+    const { close } = useContext(ModalContext);
+    const [fields, setFields] = useState([]);
+    const [selectedFields, setSelectedFields] = useState([]);
+    const [fieldValues, setFieldValues] = useState({});
+    const [fieldSearch, setFieldSearch] = useState('');
+    const [title, setTitle] = useState('');
+    const [created, setCreated] = useState(null);
+    const [provider, setProvider] = useState('');
+    const [escalation, setEscalation] = useState(null);
+    const [target, setTarget] = useState('');
+    const [threat, setThreat] = useState('');
+    const [indicators, setIndicators] = useState('');
+    const [summary, setSummary] = useState('');
+    const [selectedParent, setSelectedParent] = useState(parentId);
+    const [createdEventId, setCreatedEventId] = useState();
+    const [submitting, setSubmitting] = useState(false);
+    const folderOptions = useFolderOptions(_case);
+    useEffect(() => {
+        void dispatchApi(api.search.fields.event.get(), { throwError: false }).then(result => {
+            if (result) {
+                setFields(getFieldOptions(result));
+            }
+        });
+    }, [dispatchApi]);
+    const filteredFields = useMemo(() => searchFields(fields, fieldSearch), [fieldSearch, fields]);
+    const hasOutlineValue = Boolean(target.trim() || threat.trim() || parseList(indicators).length);
+    const isValid = Boolean(title.trim() && created?.isValid() && provider.trim() && escalation && hasOutlineValue);
+    const setOptionalField = (field) => {
+        if (!field.key || selectedFields.some(selected => selected.key === field.key)) {
+            return;
+        }
+        setSelectedFields(current => [...current, field]);
+        setFieldSearch('');
+    };
+    const removeOptionalField = (key) => {
+        setSelectedFields(current => current.filter(field => field.key !== key));
+        setFieldValues(current => {
+            return Object.fromEntries(Object.entries(current).filter(([fieldKey]) => fieldKey !== key));
+        });
+    };
+    const buildPayload = () => {
+        const payload = {
+            classification: _case.classification,
+            message: title.trim(),
+            'event.created': created.toISOString(),
+            'event.kind': 'event',
+            'event.provider': provider.trim(),
+            'howler.escalation': escalation,
+            'howler.outline.indicators': parseList(indicators)
+        };
+        if (target.trim()) {
+            payload['howler.outline.target'] = target.trim();
+        }
+        if (threat.trim()) {
+            payload['howler.outline.threat'] = threat.trim();
+        }
+        if (summary.trim()) {
+            payload['howler.outline.summary'] = summary.trim();
+        }
+        for (const field of selectedFields) {
+            const value = field.key ? fieldValues[field.key] : undefined;
+            if (field.key && !isBlank(value)) {
+                payload[field.key] = value;
+            }
+        }
+        return unflatten(payload);
+    };
+    const onSubmit = async () => {
+        if (!isValid || !_case.case_id) {
+            return;
+        }
+        setSubmitting(true);
+        try {
+            let eventId = createdEventId;
+            if (!eventId) {
+                const ids = await dispatchApi(api.v2.ingest.post('event', [buildPayload()], 'wait_for'));
+                eventId = ids?.[0];
+                if (!eventId) {
+                    throw new Error(t('modal.cases.add_event.error.no_id'));
+                }
+                setCreatedEventId(eventId);
+            }
+            const updatedCase = await dispatchApi(api.v2.case.items.post(_case.case_id, {
+                type: 'event',
+                value: eventId,
+                name: title.trim(),
+                parent: selectedParent
+            }));
+            if (updatedCase) {
+                onUpdated?.(updatedCase);
+                close();
+            }
+        }
+        finally {
+            setSubmitting(false);
+        }
+    };
+    const renderField = (field) => {
+        if (!field.key) {
+            return null;
+        }
+        return (_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "flex-start", children: [_jsx(Box, { flex: 1, children: _jsx(FieldInput, { field: field, value: fieldValues[field.key], onChange: value => setFieldValues(current => ({ ...current, [field.key]: value })) }) }), _jsx(IconButton, { "aria-label": t('modal.cases.add_event.remove_field'), onClick: () => removeOptionalField(field.key), children: _jsx(Delete, {}) })] }, field.key));
+    };
+    return (_jsxs(Stack, { spacing: 2, p: 2, sx: { minWidth: 'min(900px, 70vw)', maxHeight: '90vh', height: '100%' }, children: [_jsx(Typography, { variant: "h4", children: t('modal.cases.add_event') }), _jsxs(Stack, { spacing: 1, alignItems: "stretch", children: [_jsx(TextField, { required: true, size: "small", label: t('modal.cases.add_event.title'), value: title, onChange: event => setTitle(event.target.value), fullWidth: true }), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(LocalizationProvider, { dateAdapter: AdapterDayjs, children: _jsx(DateTimePicker, { value: created, onChange: setCreated, ampm: false, slotProps: {
+                                        textField: { required: true, size: 'small', fullWidth: true },
+                                        dialog: { disablePortal: true },
+                                        popper: { disablePortal: true }
+                                    }, label: t('modal.cases.add_event.created') }) }), _jsx(Autocomplete, { fullWidth: true, disablePortal: true, options: ESCALATIONS, value: escalation, onChange: (_, value) => setEscalation(value), renderInput: params => (_jsx(TextField, { ...params, required: true, size: "small", label: t('modal.cases.add_event.escalation') })) })] }), _jsx(TextField, { required: true, size: "small", label: t('modal.cases.add_event.provider'), value: provider, onChange: event => setProvider(event.target.value), fullWidth: true }), _jsx(TextField, { size: "small", label: t('modal.cases.add_event.summary'), value: summary, onChange: event => setSummary(event.target.value) }), folderOptions.length > 0 && (_jsx(Autocomplete, { disablePortal: true, options: folderOptions, getOptionLabel: option => option.label, value: folderOptions.find(folder => folder.id === selectedParent) ?? null, onChange: (_, value) => setSelectedParent(value?.id), renderInput: params => _jsx(TextField, { ...params, size: "small", label: t('modal.cases.add_item.folder') }) })), _jsx(Typography, { variant: "caption", color: "textSecondary", children: t('modal.cases.add_event.outline_required') }), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(TextField, { fullWidth: true, size: "small", label: t('modal.cases.add_event.target'), value: target, onChange: event => setTarget(event.target.value) }), _jsx(TextField, { fullWidth: true, size: "small", label: t('modal.cases.add_event.threat'), value: threat, onChange: event => setThreat(event.target.value) })] }), _jsx(TextField, { size: "small", multiline: true, label: t('modal.cases.add_event.indicators'), value: indicators, onChange: event => setIndicators(event.target.value), helperText: t('modal.cases.add_event.indicators_help') })] }), _jsx(Divider, { children: _jsx(Typography, { variant: "caption", children: t('modal.cases.add_event.additional_fields') }) }), _jsx(Autocomplete, { disablePortal: true, options: filteredFields, filterOptions: options => options, inputValue: fieldSearch, onInputChange: (_, value) => setFieldSearch(value), value: null, onChange: (_, field) => field && setOptionalField(field), getOptionLabel: field => field.key ?? '', isOptionEqualToValue: (option, value) => option.key === value.key, renderOption: (props, field) => (_createElement(Box, { component: "li", ...props, key: field.key },
+                    _jsxs(Stack, { children: [_jsx(Typography, { variant: "body2", children: field.key }), _jsxs(Typography, { variant: "caption", color: "text.secondary", children: [field.type, " ", field.description ? `- ${field.description}` : ''] })] }))), renderInput: params => _jsx(TextField, { ...params, size: "small", label: t('modal.cases.add_event.search_fields') }) }), selectedFields.length > 0 && (_jsx(Stack, { spacing: 1, overflow: "auto", flex: 1, pt: 1, children: selectedFields.map(renderField) })), _jsxs(Stack, { direction: "row", spacing: 1, alignSelf: "end", children: [_jsx(Button, { variant: "outlined", color: "error", onClick: close, disabled: submitting, children: t('cancel') }), _jsx(Button, { variant: "outlined", color: "success", disabled: !isValid || submitting, startIcon: submitting ? _jsx(CircularProgress, { size: 16, color: "inherit" }) : _jsx(Add, {}), onClick: onSubmit, children: t('modal.cases.add_event.submit') })] })] }));
+};
+export default AddEventModal;

package/components/routes/cases/modals/AddEventModal.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/routes/cases/modals/AddEventModal.test.js

@@ -0,0 +1,152 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import dayjs from 'dayjs';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import AddEventModal from './AddEventModal';
+const mockDispatchApi = vi.hoisted(() => vi.fn());
+const mockClose = vi.hoisted(() => vi.fn());
+const mockIngestPost = vi.hoisted(() => vi.fn());
+const mockItemsPost = vi.hoisted(() => vi.fn());
+const mockFieldsGet = vi.hoisted(() => vi.fn());
+vi.mock('components/hooks/useMyApi', () => ({
+    default: () => ({ dispatchApi: mockDispatchApi })
+}));
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({ t: (key) => key })
+}));
+vi.mock('@mui/x-date-pickers/LocalizationProvider', () => ({
+    LocalizationProvider: ({ children }) => children
+}));
+vi.mock('@mui/x-date-pickers/AdapterDayjs', () => ({ AdapterDayjs: class {
+    } }));
+vi.mock('@mui/x-date-pickers/DateTimePicker', () => ({
+    DateTimePicker: ({ label, onChange }) => (_jsxs(_Fragment, { children: [_jsxs("button", { type: "button", onClick: () => onChange(dayjs('2026-09-21T12:00:00Z')), children: [label, " valid"] }), _jsxs("button", { type: "button", onClick: () => onChange(dayjs('not-a-date')), children: [label, " invalid"] })] }))
+}));
+vi.mock('api', () => ({
+    default: {
+        search: {
+            fields: {
+                event: {
+                    get: () => mockFieldsGet()
+                }
+            }
+        },
+        v2: {
+            ingest: {
+                post: (...args) => mockIngestPost(...args)
+            },
+            case: {
+                items: {
+                    post: (...args) => mockItemsPost(...args)
+                }
+            }
+        }
+    }
+}));
+vi.mock('components/app/providers/ModalProvider', async () => {
+    const { createContext } = await import('react');
+    return {
+        ModalContext: createContext({ close: mockClose })
+    };
+});
+const testCase = {
+    __index: 'case',
+    case_id: 'case-1',
+    classification: 'UNCLASSIFIED',
+    items: []
+};
+const fields = [
+    {
+        key: 'destination.ip',
+        default: false,
+        indexed: true,
+        list: false,
+        stored: true,
+        type: 'ip',
+        description: 'IP address of the destination'
+    }
+];
+const renderModal = () => render(_jsx(AddEventModal, { case: testCase }), {
+    wrapper: ({ children }) => children
+});
+describe('AddEventModal', () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+    });
+    it('requires escalation in addition to the other required fields', async () => {
+        mockFieldsGet.mockResolvedValue(fields);
+        mockDispatchApi.mockImplementation(async (request) => request);
+        renderModal();
+        await waitFor(() => expect(mockFieldsGet).toHaveBeenCalled());
+        fireEvent.change(screen.getByLabelText(/modal\.cases\.add_event\.title/), { target: { value: 'Manual event' } });
+        fireEvent.click(screen.getByRole('button', { name: 'modal.cases.add_event.created valid' }));
+        fireEvent.change(screen.getByLabelText(/modal\.cases\.add_event\.provider/), { target: { value: 'Analyst' } });
+        fireEvent.change(screen.getByLabelText(/modal\.cases\.add_event\.target/), { target: { value: 'host-1' } });
+        expect(screen.getByRole('button', { name: 'modal.cases.add_event.submit' })).toBeDisabled();
+    });
+    it('rejects an invalid created date', async () => {
+        const user = userEvent.setup();
+        mockFieldsGet.mockResolvedValue(fields);
+        mockDispatchApi.mockImplementation(async (request) => request);
+        renderModal();
+        await waitFor(() => expect(mockFieldsGet).toHaveBeenCalled());
+        fireEvent.change(screen.getByLabelText(/modal\.cases\.add_event\.title/), { target: { value: 'Manual event' } });
+        fireEvent.click(screen.getByRole('button', { name: 'modal.cases.add_event.created invalid' }));
+        fireEvent.change(screen.getByLabelText(/modal\.cases\.add_event\.provider/), { target: { value: 'Analyst' } });
+        fireEvent.change(screen.getByLabelText(/modal\.cases\.add_event\.target/), { target: { value: 'host-1' } });
+        await user.click(screen.getByRole('combobox', { name: /modal\.cases\.add_event\.escalation/ }));
+        await user.click(await screen.findByRole('option', { name: 'evidence' }));
+        expect(screen.getByRole('button', { name: 'modal.cases.add_event.submit' })).toBeDisabled();
+    });
+    it('fuzzy-searches optional fields and submits summary and escalation', async () => {
+        const user = userEvent.setup();
+        const updatedCase = { ...testCase, items: [{ type: 'event', value: 'event-1' }] };
+        mockFieldsGet.mockResolvedValue(fields);
+        mockIngestPost.mockReturnValue(Promise.resolve(['event-1']));
+        mockItemsPost.mockReturnValue(Promise.resolve(updatedCase));
+        mockDispatchApi.mockImplementation(async (request) => request);
+        renderModal();
+        await waitFor(() => expect(mockFieldsGet).toHaveBeenCalled());
+        fireEvent.change(screen.getByLabelText(/modal\.cases\.add_event\.title/), { target: { value: 'Manual event' } });
+        fireEvent.click(screen.getByRole('button', { name: 'modal.cases.add_event.created valid' }));
+        fireEvent.change(screen.getByLabelText(/modal\.cases\.add_event\.provider/), { target: { value: 'Analyst' } });
+        await user.click(screen.getByRole('combobox', { name: /modal\.cases\.add_event\.escalation/ }));
+        await user.click(await screen.findByRole('option', { name: 'evidence' }));
+        fireEvent.change(screen.getByLabelText(/modal\.cases\.add_event\.target/), { target: { value: 'host-1' } });
+        fireEvent.change(screen.getByLabelText(/modal\.cases\.add_event\.summary/), {
+            target: { value: 'Observed manually' }
+        });
+        const fieldSearch = screen.getByLabelText(/modal\.cases\.add_event\.search_fields/);
+        fireEvent.change(fieldSearch, { target: { value: 'destination IP' } });
+        await user.click(await screen.findByText('destination.ip'));
+        fireEvent.change(screen.getByLabelText(/destination\.ip/), { target: { value: '192.0.2.10' } });
+        await user.click(screen.getByRole('button', { name: 'modal.cases.add_event.submit' }));
+        expect(mockIngestPost).toHaveBeenCalledWith('event', [
+            expect.objectContaining({
+                classification: 'UNCLASSIFIED',
+                message: 'Manual event',
+                event: expect.objectContaining({
+                    created: '2026-09-21T12:00:00.000Z',
+                    kind: 'event',
+                    provider: 'Analyst'
+                }),
+                howler: expect.objectContaining({
+                    escalation: 'evidence',
+                    outline: expect.objectContaining({
+                        target: 'host-1',
+                        summary: 'Observed manually'
+                    })
+                }),
+                destination: expect.objectContaining({ ip: '192.0.2.10' })
+            })
+        ], 'wait_for');
+        expect(mockItemsPost).toHaveBeenCalledWith('case-1', {
+            type: 'event',
+            value: 'event-1',
+            name: 'Manual event',
+            parent: undefined
+        });
+        expect(mockClose).toHaveBeenCalled();
+    });
+});

package/locales/en/translation.json

@@ -117,6 +117,7 @@
     "error.invalid_detection.message": "Invalid Detection",
     "event.module": "Event Module",
     "event.open": "Open Event",
+    "event.provider": "Event Provider",
     "event.type": "Event Type",
     "features.warning.description": "This feature is undergoing active development, and is not yet in a finished state. You may encounter bugs or instability.",
     "features.warning.title": "Feature In Active Development",
@@ -336,6 +337,23 @@
     "modal.action.empty": "Action Name cannot be empty.",
     "modal.action.label": "Action Name",
     "modal.action.title": "Save Action",
+    "modal.cases.add_event": "Add Event",
+    "modal.cases.add_event.additional_fields": "Additional Fields",
+    "modal.cases.add_event.created": "Event Created",
+    "modal.cases.add_event.error.no_id": "The event was created without an ID.",
+    "modal.cases.add_event.escalation": "Escalation",
+    "modal.cases.add_event.indicators": "Indicators",
+    "modal.cases.add_event.indicators_help": "Enter one indicator per line or separated by commas.",
+    "modal.cases.add_event.outline": "Event Outline",
+    "modal.cases.add_event.outline_required": "At least one target, threat, or indicator is required.",
+    "modal.cases.add_event.provider": "Source / Provenance",
+    "modal.cases.add_event.remove_field": "Remove field",
+    "modal.cases.add_event.search_fields": "Search field names and descriptions",
+    "modal.cases.add_event.submit": "Add Event",
+    "modal.cases.add_event.summary": "Summary",
+    "modal.cases.add_event.target": "Target",
+    "modal.cases.add_event.threat": "Threat",
+    "modal.cases.add_event.title": "Title",
     "modal.cases.add_item": "Add item",
     "modal.cases.add_item.content": "Content",
     "modal.cases.add_item.folder": "Folder",
@@ -462,6 +480,12 @@
     "page.cases.observables.type.user": "User",
     "page.cases.rules": "Rules",
     "page.cases.rules.author": "Author",
+    "page.cases.rules.backfill": "Backfill rule",
+    "page.cases.rules.backfill.confirm": "This will submit {{count}} matching alert(s) to correlation. Continue?",
+    "page.cases.rules.backfill.description": "Find existing alerts matching this rule and submit them to correlation.",
+    "page.cases.rules.backfill.preview": "Preview matches",
+    "page.cases.rules.backfill.since": "Alerts since",
+    "page.cases.rules.backfill.submit": "Submit to correlation",
     "page.cases.rules.create": "Create Rule",
     "page.cases.rules.delete.confirm": "Delete this rule?",
     "page.cases.rules.destination": "Alert Destination Path",
@@ -476,6 +500,7 @@
     "page.cases.rules.timeframe.days": "{{days}} day(s)",
     "page.cases.rules.timeframe.help": "Number of days before the rule expires",
     "page.cases.search": "Search",
+    "page.cases.sidebar.add_event": "Add event",
     "page.cases.sidebar.add_folder": "Add folder",
     "page.cases.sidebar.add_item": "Add item",
     "page.cases.sidebar.collapse_all": "Collapse all folders",

package/locales/fr/translation.json

@@ -117,6 +117,7 @@
     "error.invalid_detection.message": "Détection non valide",
     "event.module": "Module d'événement",
     "event.open": "Ouvrir événement",
+    "event.provider": "Fournisseur de l'événement",
     "event.type": "Type d'événement",
     "features.warning.description": "Cette fonctionnalité fait l'objet d'un développement actif et n'est pas encore achevée. Il est possible que vous rencontriez des problèmes ou de l'instabilité.",
     "features.warning.title": "Fonctionnalité en développement actif",
@@ -336,6 +337,23 @@
     "modal.action.empty": "Le nom de l'action ne peut pas être vide.",
     "modal.action.label": "Nom de l'action",
     "modal.action.title": "Enregistrer l'action",
+    "modal.cases.add_event": "Ajouter un événement",
+    "modal.cases.add_event.additional_fields": "Champs supplémentaires",
+    "modal.cases.add_event.created": "Création de l'événement",
+    "modal.cases.add_event.error.no_id": "L'événement a été créé sans identifiant.",
+    "modal.cases.add_event.escalation": "Escalade",
+    "modal.cases.add_event.indicators": "Indicateurs",
+    "modal.cases.add_event.indicators_help": "Saisissez un indicateur par ligne ou séparé par des virgules.",
+    "modal.cases.add_event.outline": "Résumé de l'événement",
+    "modal.cases.add_event.outline_required": "Au moins une cible, une menace ou un indicateur est requis.",
+    "modal.cases.add_event.provider": "Source / provenance",
+    "modal.cases.add_event.remove_field": "Supprimer le champ",
+    "modal.cases.add_event.search_fields": "Rechercher dans les noms et descriptions de champs",
+    "modal.cases.add_event.submit": "Ajouter l'événement",
+    "modal.cases.add_event.summary": "Résumé",
+    "modal.cases.add_event.target": "Cible",
+    "modal.cases.add_event.threat": "Menace",
+    "modal.cases.add_event.title": "Titre",
     "modal.cases.add_item": "Ajouter un élément",
     "modal.cases.add_item.content": "Contenu",
     "modal.cases.add_item.folder": "Dossier",
@@ -462,6 +480,12 @@
     "page.cases.observables.type.user": "Utilisateur",
     "page.cases.rules": "Règles",
     "page.cases.rules.author": "Auteur",
+    "page.cases.rules.backfill": "Rattraper les alertes",
+    "page.cases.rules.backfill.confirm": "{{count}} alerte(s) correspondante(s) seront soumises à la corrélation. Continuer ?",
+    "page.cases.rules.backfill.description": "Rechercher les alertes existantes correspondant à cette règle et les soumettre à la corrélation.",
+    "page.cases.rules.backfill.preview": "Aperçu des correspondances",
+    "page.cases.rules.backfill.since": "Alertes depuis",
+    "page.cases.rules.backfill.submit": "Soumettre à la corrélation",
     "page.cases.rules.create": "Créer une règle",
     "page.cases.rules.delete.confirm": "Supprimer cette règle ?",
     "page.cases.rules.destination": "Chemin de destination des alertes",
@@ -476,6 +500,7 @@
     "page.cases.rules.timeframe.days": "{{days}} jour(s)",
     "page.cases.rules.timeframe.help": "Nombre de jours avant l'expiration de la règle",
     "page.cases.search": "Rechercher",
+    "page.cases.sidebar.add_event": "Ajouter un événement",
     "page.cases.sidebar.add_folder": "Ajouter un dossier",
     "page.cases.sidebar.add_item": "Ajouter un élément",
     "page.cases.sidebar.collapse_all": "Réduire tous les dossiers",

package/package.json

@@ -97,7 +97,7 @@
     "url": "https://github.com/CybercentreCanada/howler"
   },
   "type": "module",
-  "version": "3.1.0-dev.1705",
+  "version": "3.1.0-dev.1708",
   "exports": {
     "./i18n": "./i18n.js",
     "./index.css": "./index.css",
@@ -243,6 +243,10 @@
     "./api/v2/case": "./api/v2/case/index.js",
     "./api/v2/search/*": "./api/v2/search/*.js",
     "./api/v2/search": "./api/v2/search/index.js",
+    "./api/v2/case/rules/*": "./api/v2/case/rules/*.js",
+    "./api/v2/case/rules": "./api/v2/case/rules/index.js",
+    "./api/v2/case/rules/backfill/*": "./api/v2/case/rules/backfill/*.js",
+    "./api/v2/case/rules/backfill": "./api/v2/case/rules/backfill/index.js",
     "./api/search/histogram/*": "./api/search/histogram/*.js",
     "./api/search/histogram": "./api/search/histogram/index.js",
     "./api/search/count/*": "./api/search/count/*.js",