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

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/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/locales/en/translation.json

@@ -480,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",

package/locales/fr/translation.json

@@ -480,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",

package/package.json

@@ -97,7 +97,7 @@
     "url": "https://github.com/CybercentreCanada/howler"
   },
   "type": "module",
-  "version": "3.1.0-dev.1707",
+  "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",