@cccsaurora/howler-ui 2.19.0-cases.1065 → 2.19.0-cases.1097

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

@@ -0,0 +1,110 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fireEvent, render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { createMockCase } from '@cccsaurora/howler-ui/tests/utils';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+// ---------------------------------------------------------------------------
+// Hoisted mocks
+// ---------------------------------------------------------------------------
+const mockHitCardProps = vi.hoisted(() => ({ current: [] }));
+// ---------------------------------------------------------------------------
+// Module mocks
+// ---------------------------------------------------------------------------
+vi.mock('components/elements/hit/HitCard', () => ({
+    default: (props) => {
+        mockHitCardProps.current.push(props);
+        return _jsx("div", { id: `hit-card-${String(props.id)}` });
+    }
+}));
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({
+        t: (key) => key
+    })
+}));
+vi.mock('react-router-dom', async () => {
+    const actual = await vi.importActual('react-router-dom');
+    return {
+        ...actual,
+        Link: ({ to, children, ...props }) => (_jsx("a", { href: to, ...props, children: children }))
+    };
+});
+// ---------------------------------------------------------------------------
+// Imports after mocks
+// ---------------------------------------------------------------------------
+import AlertPanel from './AlertPanel';
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+const renderPanel = (caseValue) => {
+    return render(_jsx(MemoryRouter, { children: _jsx(AlertPanel, { case: caseValue }) }));
+};
+const makeHitItem = (id, path = `/cases/test/${id}`) => ({
+    type: 'hit',
+    value: id,
+    path
+});
+// ---------------------------------------------------------------------------
+// Setup
+// ---------------------------------------------------------------------------
+beforeEach(() => {
+    mockHitCardProps.current = [];
+});
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+describe('AlertPanel', () => {
+    it('renders a skeleton when the case is null', () => {
+        const { container } = renderPanel(null);
+        expect(container.querySelector('.MuiSkeleton-root')).toBeTruthy();
+    });
+    it('renders the translated heading key', () => {
+        const _case = createMockCase({ case_id: 'case-1', items: [] });
+        renderPanel(_case);
+        expect(screen.getByText('page.cases.dashboard.alerts')).toBeInTheDocument();
+    });
+    it('renders HitCard only for unique hit items on the current page', () => {
+        const duplicate = makeHitItem('hit-1', '/cases/test/path-a');
+        const _case = createMockCase({
+            case_id: 'case-2',
+            items: [
+                duplicate,
+                duplicate,
+                makeHitItem('hit-2', '/cases/test/path-b'),
+                { type: 'event', value: 'event-1', path: '/cases/test/event-1' }
+            ]
+        });
+        renderPanel(_case);
+        expect(screen.getByTestId('hit-card-hit-1')).toBeInTheDocument();
+        expect(screen.getByTestId('hit-card-hit-2')).toBeInTheDocument();
+        expect(screen.queryByTestId('hit-card-event-1')).not.toBeInTheDocument();
+        expect(mockHitCardProps.current).toHaveLength(2);
+        expect(mockHitCardProps.current[0]).toEqual(expect.objectContaining({
+            id: 'hit-1',
+            lazy: true,
+            layout: 'dense'
+        }));
+    });
+    it('renders overlay links that target each hit path', () => {
+        const _case = createMockCase({
+            case_id: 'case-3',
+            items: [makeHitItem('hit-1', '/cases/case-3/path-one'), makeHitItem('hit-2', '/cases/case-3/path-two')]
+        });
+        const { container } = renderPanel(_case);
+        const links = Array.from(container.querySelectorAll('a'));
+        expect(links).toHaveLength(2);
+        expect(links[0]).toHaveAttribute('href', '/cases/case-3/path-one');
+        expect(links[1]).toHaveAttribute('href', '/cases/case-3/path-two');
+    });
+    it('shows pagination with multiple pages and switches to page 2 items', () => {
+        const items = Array.from({ length: 6 }, (_, idx) => makeHitItem(`hit-${idx + 1}`, `/cases/test/hit-${idx + 1}`));
+        const _case = createMockCase({ case_id: 'case-4', items });
+        renderPanel(_case);
+        expect(screen.getByTestId('hit-card-hit-1')).toBeInTheDocument();
+        expect(screen.getByTestId('hit-card-hit-5')).toBeInTheDocument();
+        expect(screen.queryByTestId('hit-card-hit-6')).not.toBeInTheDocument();
+        const pageTwoButton = screen.getByRole('button', { name: 'Go to page 2' });
+        fireEvent.click(pageTwoButton);
+        expect(screen.getByTestId('hit-card-hit-6')).toBeInTheDocument();
+        expect(screen.queryByTestId('hit-card-hit-1')).not.toBeInTheDocument();
+    });
+});

package/components/routes/cases/detail/CaseAssets.d.ts

@@ -1,9 +1,9 @@
 import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
+import type { Event } from '@cccsaurora/howler-ui/models/entities/generated/Event';
 import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
-import type { Observable } from '@cccsaurora/howler-ui/models/entities/generated/Observable';
 import { type AssetEntry } from './assets/Asset';
 /** Deduplicate and merge seenIn lists into a map keyed by `type:value` */
-export declare const buildAssetEntries: (records: Partial<Hit | Observable>[]) => AssetEntry[];
+export declare const buildAssetEntries: (records: Partial<Hit | Event>[]) => AssetEntry[];
 declare const _default: import("react").NamedExoticComponent<{
     case?: Case;
     caseId?: string;

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

@@ -60,7 +60,7 @@ const CaseAssets = ({ case: providedCase, caseId }) => {
     const [records, setRecords] = useState(null);
     const [activeFilters, setActiveFilters] = useState(new Set());
     const ids = useMemo(() => (_case?.items ?? [])
-        .filter(item => ['hit', 'observable'].includes(item.type))
+        .filter(item => ['hit', 'event'].includes(item.type))
         .map(item => item.value)
         .filter(val => !!val), [_case?.items]);
     useEffect(() => {
@@ -68,7 +68,7 @@ const CaseAssets = ({ case: providedCase, caseId }) => {
             setRecords([]);
             return;
         }
-        dispatchApi(api.v2.search.post(['hit', 'observable'], {
+        dispatchApi(api.v2.search.post(['hit', 'event'], {
             query: `howler.id:(${ids.join(' OR ')})`,
             fl: `howler.id,${RELATED_FIELDS}`
         })).then(response => setRecords(response.items));

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

@@ -4,7 +4,7 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { createElement } from 'react';
 import { MemoryRouter } from 'react-router-dom';
-import { createMockHit, createMockObservable } from '@cccsaurora/howler-ui/tests/utils';
+import { createMockEvent, createMockHit } from '@cccsaurora/howler-ui/tests/utils';
 import { describe, expect, it, vi } from 'vitest';
 import { buildAssetEntries } from './CaseAssets';
 // ---------------------------------------------------------------------------
@@ -29,7 +29,7 @@ describe('buildAssetEntries', () => {
     it('deduplicates the same asset value across multiple records', () => {
         const result = buildAssetEntries([
             createMockHit({ howler: { id: 'h1' }, related: { ip: ['1.2.3.4'] } }),
-            createMockObservable({ howler: { id: 'obs1' }, related: { ip: ['1.2.3.4'] } })
+            createMockEvent({ howler: { id: 'obs1' }, related: { ip: ['1.2.3.4'] } })
         ]);
         expect(result).toHaveLength(1);
         expect(result[0].seenIn).toEqual(['h1', 'obs1']);
@@ -88,7 +88,7 @@ const mockCase = {
     case_id: 'case-001',
     items: [
         { type: 'hit', value: 'hit-1' },
-        { type: 'observable', value: 'obs-1' }
+        { type: 'event', value: 'obs-1' }
     ]
 };
 const Wrapper = ({ children }) => createElement(MemoryRouter, { initialEntries: ['/cases/case-001/assets'] }, children);
@@ -155,7 +155,7 @@ describe('CaseAssets component', () => {
         expect(screen.getByText('1.2.3.4')).toBeTruthy();
         expect(screen.getByText('alice')).toBeTruthy();
     });
-    it('renders nothing when the case has no hit/observable items', async () => {
+    it('renders nothing when the case has no hit/event items', async () => {
         const emptyCase = { case_id: 'case-002', items: [] };
         render(_jsx(CaseAssets, { case: emptyCase }), { wrapper: Wrapper });
         await screen.findByText('page.cases.assets.empty');

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

@@ -36,7 +36,7 @@ const CaseDashboard = ({ case: providedCase, caseId }) => {
     const { case: _case, update: updateCase } = useCase({ case: providedCase ?? routeCase, caseId });
     const [invalidIds, setInvalidIds] = useState([]);
     const ids = useMemo(() => (_case?.items ?? [])
-        .filter(item => ['hit', 'observable'].includes(item.type))
+        .filter(item => ['hit', 'event'].includes(item.type))
         .map(item => item.value)
         .filter(val => !!val), [_case?.items]);
     const records = useContextSelector(RecordContext, ctx => ctx.records);
@@ -50,7 +50,7 @@ const CaseDashboard = ({ case: providedCase, caseId }) => {
         if (missingIds.length < 1) {
             return;
         }
-        dispatchApi(api.v2.search.post(['hit', 'observable'], {
+        dispatchApi(api.v2.search.post(['hit', 'event'], {
             query: `howler.id:(${missingIds.join(' OR ')})`,
             metadata: ['template', 'analytic']
         })).then(response => {

package/components/routes/cases/detail/CaseDashboard.test.d.ts

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

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

@@ -0,0 +1,218 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, waitFor } from '@testing-library/react';
+import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
+import { useState } from 'react';
+import { createMockCase, createMockEvent, createMockHit } from '@cccsaurora/howler-ui/tests/utils';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+// ---------------------------------------------------------------------------
+// Hoisted mocks
+// ---------------------------------------------------------------------------
+const mockDispatchApi = vi.hoisted(() => vi.fn());
+const mockSearchPost = vi.hoisted(() => vi.fn());
+const mockUpdateCase = vi.hoisted(() => vi.fn());
+const mockUseCaseState = vi.hoisted(() => ({ case: null }));
+const mockAggregateProps = vi.hoisted(() => ({
+    current: []
+}));
+const mockCaseOverviewProps = vi.hoisted(() => ({ current: [] }));
+const mockTaskPanelProps = vi.hoisted(() => ({ current: [] }));
+const mockAlertPanelProps = vi.hoisted(() => ({ current: [] }));
+const mockRelatedCasePanelProps = vi.hoisted(() => ({ current: [] }));
+// ---------------------------------------------------------------------------
+// Module mocks
+// ---------------------------------------------------------------------------
+vi.mock('use-context-selector', async () => {
+    const react = (await vi.importActual('react'));
+    return {
+        createContext: react.createContext,
+        useContextSelector: (context, selector) => {
+            return selector(react.useContext(context));
+        }
+    };
+});
+vi.mock('components/hooks/useMyApi', () => ({
+    default: () => ({ dispatchApi: mockDispatchApi })
+}));
+vi.mock('api', () => ({
+    default: {
+        v2: {
+            search: {
+                post: (...args) => mockSearchPost(...args)
+            }
+        }
+    }
+}));
+vi.mock('../hooks/useCase', () => ({
+    default: () => ({
+        case: mockUseCaseState.case,
+        update: mockUpdateCase
+    })
+}));
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({
+        t: (key) => key
+    })
+}));
+vi.mock('react-router-dom', async () => {
+    const actual = await vi.importActual('react-router-dom');
+    return {
+        ...actual,
+        useOutletContext: () => createMockCase({ case_id: 'route-case-id', items: [] })
+    };
+});
+vi.mock('./aggregates/CaseAggregate', () => ({
+    default: (props) => {
+        mockAggregateProps.current.push(props);
+        return _jsx("div", { id: `aggregate-${String(mockAggregateProps.current.length)}` });
+    }
+}));
+vi.mock('./CaseOverview', () => ({
+    default: (props) => {
+        mockCaseOverviewProps.current.push(props);
+        return _jsx("div", { id: "case-overview" });
+    }
+}));
+vi.mock('./TaskPanel', () => ({
+    default: (props) => {
+        mockTaskPanelProps.current.push(props);
+        return _jsx("div", { id: "task-panel" });
+    }
+}));
+vi.mock('./AlertPanel', () => ({
+    default: (props) => {
+        mockAlertPanelProps.current.push(props);
+        return _jsx("div", { id: "alert-panel" });
+    }
+}));
+vi.mock('./RelatedCasePanel', () => ({
+    default: (props) => {
+        mockRelatedCasePanelProps.current.push(props);
+        return _jsx("div", { id: "related-case-panel" });
+    }
+}));
+// ---------------------------------------------------------------------------
+// Imports after mocks
+// ---------------------------------------------------------------------------
+import CaseDashboard from './CaseDashboard';
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+const makeRecordContextValue = (records, loadRecords) => ({
+    records,
+    selectedRecords: [],
+    addRecordToSelection: vi.fn(),
+    removeRecordFromSelection: vi.fn(),
+    clearSelectedRecords: vi.fn(),
+    loadRecords,
+    updateRecord: vi.fn(),
+    getRecord: vi.fn()
+});
+const renderDashboard = ({ dashboardCase, initialRecords = {}, onLoadRecords }) => {
+    const Wrapper = ({ children }) => {
+        const [records, setRecords] = useState(initialRecords);
+        const loadRecords = items => {
+            onLoadRecords?.(items);
+            const mapped = Object.fromEntries(items.map(item => [item.howler.id, item]));
+            setRecords(prev => ({ ...prev, ...mapped }));
+        };
+        return (_jsx(RecordContext.Provider, { value: makeRecordContextValue(records, loadRecords), children: children }));
+    };
+    return render(_jsx(CaseDashboard, { case: dashboardCase }), { wrapper: Wrapper });
+};
+// ---------------------------------------------------------------------------
+// Setup
+// ---------------------------------------------------------------------------
+beforeEach(() => {
+    mockDispatchApi.mockReset();
+    mockSearchPost.mockReset();
+    mockUpdateCase.mockReset();
+    mockAggregateProps.current = [];
+    mockCaseOverviewProps.current = [];
+    mockTaskPanelProps.current = [];
+    mockAlertPanelProps.current = [];
+    mockRelatedCasePanelProps.current = [];
+    mockUseCaseState.case = null;
+});
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+describe('CaseDashboard', () => {
+    it('renders nothing when useCase does not return a case', () => {
+        const baseCase = createMockCase({ case_id: 'case-1', items: [] });
+        mockUseCaseState.case = null;
+        const { container } = renderDashboard({ dashboardCase: baseCase });
+        expect(container).toBeEmptyDOMElement();
+    });
+    it('renders overview, panels and aggregate cards with translated subtitles', () => {
+        const dashboardCase = createMockCase({
+            case_id: 'case-2',
+            items: [
+                { type: 'hit', value: 'hit-1', path: 'root/hit-1' },
+                { type: 'event', value: 'event-1', path: 'root/event-1' }
+            ]
+        });
+        mockUseCaseState.case = dashboardCase;
+        renderDashboard({
+            dashboardCase,
+            initialRecords: {
+                'hit-1': createMockHit({ howler: { id: 'hit-1', outline: { threat: 'threat-a', target: 'target-a' } } }),
+                'event-1': createMockEvent({ howler: { id: 'event-1', outline: { indicators: ['ioc-a'] } } })
+            }
+        });
+        expect(mockCaseOverviewProps.current).toHaveLength(1);
+        expect(mockTaskPanelProps.current).toHaveLength(1);
+        expect(mockAlertPanelProps.current).toHaveLength(1);
+        expect(mockRelatedCasePanelProps.current).toHaveLength(1);
+        expect(mockAggregateProps.current).toHaveLength(4);
+        expect(mockAggregateProps.current[0]).toEqual(expect.objectContaining({
+            field: 'howler.outline.threat',
+            subtitle: 'page.cases.dashboard.threat'
+        }));
+        expect(mockAggregateProps.current[1]).toEqual(expect.objectContaining({
+            field: 'howler.outline.target',
+            subtitle: 'page.cases.dashboard.target'
+        }));
+        expect(mockAggregateProps.current[2]).toEqual(expect.objectContaining({
+            field: 'howler.outline.indicators',
+            subtitle: 'page.cases.dashboard.indicators'
+        }));
+        expect(mockAggregateProps.current[3]).toEqual(expect.objectContaining({
+            subtitle: 'page.cases.dashboard.duration',
+            title: '--'
+        }));
+    });
+    it('loads missing hit and event records and sends expected search query', async () => {
+        const dashboardCase = createMockCase({
+            case_id: 'case-3',
+            items: [
+                { type: 'hit', value: 'hit-1', path: 'root/hit-1' },
+                { type: 'event', value: 'event-1', path: 'root/event-1' },
+                { type: 'hit', value: 'hit-2', path: 'root/hit-2' },
+                { type: 'case', value: 'case-child', path: 'root/case-child' }
+            ]
+        });
+        mockUseCaseState.case = dashboardCase;
+        const loadedEvent = createMockEvent({ howler: { id: 'event-1' } });
+        const loadedHit = createMockHit({ howler: { id: 'hit-2' } });
+        mockSearchPost.mockReturnValue({ endpoint: 'search' });
+        mockDispatchApi.mockResolvedValue({
+            items: [loadedEvent, loadedHit]
+        });
+        const onLoadRecords = vi.fn();
+        renderDashboard({
+            dashboardCase,
+            initialRecords: {
+                'hit-1': createMockHit({ howler: { id: 'hit-1' } })
+            },
+            onLoadRecords
+        });
+        await waitFor(() => {
+            expect(mockSearchPost).toHaveBeenCalledWith(['hit', 'event'], {
+                query: 'howler.id:(event-1 OR hit-2)',
+                metadata: ['template', 'analytic']
+            });
+            expect(mockDispatchApi).toHaveBeenCalledTimes(1);
+            expect(onLoadRecords).toHaveBeenCalledWith([loadedEvent, loadedHit]);
+        });
+    });
+});

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

@@ -116,11 +116,11 @@ describe('CaseRules', () => {
     it('renders index chips for rule indexes', () => {
         mockCase.current = createMockCase({
             case_id: 'case-001',
-            rules: [makeRule({ indexes: ['hit', 'observable'] })]
+            rules: [makeRule({ indexes: ['hit', 'event'] })]
         });
         render(_jsx(CaseRules, {}));
         expect(screen.getByText('hit')).toBeInTheDocument();
-        expect(screen.getByText('observable')).toBeInTheDocument();
+        expect(screen.getByText('event')).toBeInTheDocument();
     });
     it('defaults to hit chip when indexes is undefined', () => {
         mockCase.current = createMockCase({

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

@@ -5,9 +5,9 @@ import { Autocomplete, Box, Chip, Divider, Skeleton, Stack, TextField, Tooltip,
 import api from '@cccsaurora/howler-ui/api';
 import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
 import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
+import EventCard from '@cccsaurora/howler-ui/components/elements/event/EventCard';
 import HitCard from '@cccsaurora/howler-ui/components/elements/hit/HitCard';
 import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
-import ObservableCard from '@cccsaurora/howler-ui/components/elements/observable/ObservableCard';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import dayjs from 'dayjs';
 import { capitalize } from 'lodash-es';
@@ -48,7 +48,7 @@ const CaseTimeline = ({ case: providedCase, caseId }) => {
     const [selectedMitres, setSelectedMitres] = useState([]);
     const [selectedEscalations, setSelectedEscalations] = useState(['evidence']);
     const ids = useMemo(() => (_case?.items ?? [])
-        .filter(item => ['hit', 'observable'].includes(item.type))
+        .filter(item => ['hit', 'event'].includes(item.type))
         .map(item => item.value)
         .filter(Boolean), [_case]);
     const getPath = (value) => _case.items.find(item => item.value === value)?.path;
@@ -56,7 +56,7 @@ const CaseTimeline = ({ case: providedCase, caseId }) => {
         if (ids.length < 1) {
             return;
         }
-        dispatchApi(api.v2.search.facet.post(['hit', 'observable'], {
+        dispatchApi(api.v2.search.facet.post(['hit', 'event'], {
             fields: ['threat.tactic.id', 'threat.technique.id', 'howler.escalation'],
             filters: [`howler.id:(${ids.join(' OR ')})`]
         }), { throwError: false }).then(result => {
@@ -84,7 +84,7 @@ const CaseTimeline = ({ case: providedCase, caseId }) => {
         }
         setLoading(true);
         const filters = buildFilters(selectedMitres, selectedEscalations);
-        dispatchApi(api.v2.search.post(['hit', 'observable'], {
+        dispatchApi(api.v2.search.post(['hit', 'event'], {
             query: `howler.id:(${ids.join(' OR ')})`,
             sort: 'event.created asc',
             rows: ids.length,
@@ -101,6 +101,6 @@ const CaseTimeline = ({ case: providedCase, caseId }) => {
     if (!_case) {
         return null;
     }
-    return (_jsxs(Stack, { spacing: 0, sx: { height: '100%' }, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", flexWrap: "wrap", sx: { p: 1, gap: 1 }, children: [_jsx(Tooltip, { title: t('page.cases.timeline.filter.label'), children: _jsx(FilterList, { fontSize: "small", color: "action" }) }), _jsx(Autocomplete, { multiple: true, size: "small", options: mitreOptions, value: selectedMitres, onChange: (_e, values) => setSelectedMitres(values), getOptionLabel: opt => `${opt.id} - ${opt.name}`, isOptionEqualToValue: (opt, val) => opt.id === val.id, groupBy: opt => capitalize(opt.kind), renderTags: (value, getTagProps) => value.map((opt, index) => (_createElement(Chip, { ...getTagProps({ index }), key: opt.id, size: "small", label: opt.id, color: "primary" }))), renderInput: params => (_jsx(TextField, { ...params, label: t('page.cases.timeline.filter.mitre'), sx: { minWidth: 260 } })), noOptionsText: t('page.cases.timeline.filter.mitre.empty') }), _jsx(Autocomplete, { multiple: true, size: "small", options: escalationOptions, value: selectedEscalations, onChange: (_e, value) => setSelectedEscalations(value), getOptionLabel: opt => t(`howler.escalation.${opt}`, opt), renderTags: (value, getTagProps) => value.map((opt, index) => (_createElement(Chip, { ...getTagProps({ index }), key: opt, size: "small", label: opt, color: ESCALATION_COLORS[opt] }))), renderInput: params => (_jsx(TextField, { ...params, label: t('page.cases.timeline.filter.escalation'), sx: { minWidth: 220 } })), noOptionsText: t('page.cases.timeline.filter.escalation.empty') })] }), _jsx(Divider, {}), loading ? (_jsx(Stack, { spacing: 2, sx: { px: 2, py: 1 }, children: [0, 1, 2].map(i => (_jsxs(Stack, { direction: "row", width: "100%", spacing: 1, children: [_jsx(Skeleton, { variant: "text", width: 120, height: 24 }), _jsx(Skeleton, { variant: "rounded", height: 120, sx: { flex: 1 } })] }, i))) })) : displayedEntries.length === 0 ? (_jsx(Box, { sx: { pt: 4, textAlign: 'center' }, children: _jsx(Typography, { color: "textSecondary", children: t('page.cases.timeline.empty') }) })) : (_jsx(Stack, { component: "ol", spacing: 0, sx: { px: 2, py: 1, listStyle: 'none', m: 0, overflow: 'auto' }, children: displayedEntries.map(entry => (_jsxs(Stack, { component: "li", spacing: 1, sx: { pb: 1 }, children: [_jsxs(Stack, { direction: "row", spacing: 2, alignItems: "flex-start", children: [_jsxs(Stack, { spacing: 0.5, alignItems: "end", children: [_jsx(Typography, { variant: "caption", color: "text.secondary", sx: { whiteSpace: 'nowrap' }, children: dayjs(entry.event?.created ?? entry.timestamp).format('YYYY-MM-DD HH:mm:ss') }), entry.threat?.technique?.id && (_jsx(Tooltip, { title: `${entry.threat.technique.id}: ${config.lookups?.techniques?.[entry.threat.technique.id].name}`, children: _jsx(Typography, { component: config.lookups?.techniques?.[entry.threat.technique.id]?.url ? 'a' : undefined, href: config.lookups?.techniques?.[entry.threat.technique.id]?.url, variant: "caption", color: "text.secondary", sx: { whiteSpace: 'nowrap' }, children: entry.threat.technique.id }) })), entry.threat?.tactic?.id && (_jsx(Tooltip, { title: `${entry.threat.tactic.id}: ${config.lookups?.tactics?.[entry.threat.tactic.id]?.name ?? t('unknown')}`, children: _jsx(Typography, { component: config.lookups?.tactics?.[entry.threat.tactic.id]?.url ? 'a' : undefined, href: config.lookups?.tactics?.[entry.threat.tactic.id]?.url, variant: "caption", color: "text.secondary", sx: { whiteSpace: 'nowrap' }, children: entry.threat.tactic.id }) }))] }), _jsx(Box, { component: Link, to: `/cases/${_case.case_id}/${getPath(entry.howler.id)}`, sx: { flex: 1, minWidth: 0, textDecoration: 'none' }, children: isHit(entry) ? (_jsx(HitCard, { id: entry.howler.id, layout: HitLayout.DENSE, readOnly: true })) : (_jsx(ObservableCard, { id: entry.howler.id })) })] }), _jsx(Divider, { flexItem: true })] }, entry.howler.id))) }))] }));
+    return (_jsxs(Stack, { spacing: 0, sx: { height: '100%' }, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", flexWrap: "wrap", sx: { p: 1, gap: 1 }, children: [_jsx(Tooltip, { title: t('page.cases.timeline.filter.label'), children: _jsx(FilterList, { fontSize: "small", color: "action" }) }), _jsx(Autocomplete, { multiple: true, size: "small", options: mitreOptions, value: selectedMitres, onChange: (_e, values) => setSelectedMitres(values), getOptionLabel: opt => `${opt.id} - ${opt.name}`, isOptionEqualToValue: (opt, val) => opt.id === val.id, groupBy: opt => capitalize(opt.kind), renderTags: (value, getTagProps) => value.map((opt, index) => (_createElement(Chip, { ...getTagProps({ index }), key: opt.id, size: "small", label: opt.id, color: "primary" }))), renderInput: params => (_jsx(TextField, { ...params, label: t('page.cases.timeline.filter.mitre'), sx: { minWidth: 260 } })), noOptionsText: t('page.cases.timeline.filter.mitre.empty') }), _jsx(Autocomplete, { multiple: true, size: "small", options: escalationOptions, value: selectedEscalations, onChange: (_e, value) => setSelectedEscalations(value), getOptionLabel: opt => t(`howler.escalation.${opt}`, opt), renderTags: (value, getTagProps) => value.map((opt, index) => (_createElement(Chip, { ...getTagProps({ index }), key: opt, size: "small", label: opt, color: ESCALATION_COLORS[opt] }))), renderInput: params => (_jsx(TextField, { ...params, label: t('page.cases.timeline.filter.escalation'), sx: { minWidth: 220 } })), noOptionsText: t('page.cases.timeline.filter.escalation.empty') })] }), _jsx(Divider, {}), loading ? (_jsx(Stack, { spacing: 2, sx: { px: 2, py: 1 }, children: [0, 1, 2].map(i => (_jsxs(Stack, { direction: "row", width: "100%", spacing: 1, children: [_jsx(Skeleton, { variant: "text", width: 120, height: 24 }), _jsx(Skeleton, { variant: "rounded", height: 120, sx: { flex: 1 } })] }, i))) })) : displayedEntries.length === 0 ? (_jsx(Box, { sx: { pt: 4, textAlign: 'center' }, children: _jsx(Typography, { color: "textSecondary", children: t('page.cases.timeline.empty') }) })) : (_jsx(Stack, { component: "ol", spacing: 0, sx: { px: 2, py: 1, listStyle: 'none', m: 0, overflow: 'auto' }, children: displayedEntries.map(entry => (_jsxs(Stack, { component: "li", spacing: 1, sx: { pb: 1 }, children: [_jsxs(Stack, { direction: "row", spacing: 2, alignItems: "flex-start", children: [_jsxs(Stack, { spacing: 0.5, alignItems: "end", children: [_jsx(Typography, { variant: "caption", color: "text.secondary", sx: { whiteSpace: 'nowrap' }, children: dayjs(entry.event?.created ?? entry.timestamp).format('YYYY-MM-DD HH:mm:ss') }), entry.threat?.technique?.id && (_jsx(Tooltip, { title: `${entry.threat.technique.id}: ${config.lookups?.techniques?.[entry.threat.technique.id].name}`, children: _jsx(Typography, { component: config.lookups?.techniques?.[entry.threat.technique.id]?.url ? 'a' : undefined, href: config.lookups?.techniques?.[entry.threat.technique.id]?.url, variant: "caption", color: "text.secondary", sx: { whiteSpace: 'nowrap' }, children: entry.threat.technique.id }) })), entry.threat?.tactic?.id && (_jsx(Tooltip, { title: `${entry.threat.tactic.id}: ${config.lookups?.tactics?.[entry.threat.tactic.id]?.name ?? t('unknown')}`, children: _jsx(Typography, { component: config.lookups?.tactics?.[entry.threat.tactic.id]?.url ? 'a' : undefined, href: config.lookups?.tactics?.[entry.threat.tactic.id]?.url, variant: "caption", color: "text.secondary", sx: { whiteSpace: 'nowrap' }, children: entry.threat.tactic.id }) }))] }), _jsx(Box, { component: Link, to: `/cases/${_case.case_id}/${getPath(entry.howler.id)}`, sx: { flex: 1, minWidth: 0, textDecoration: 'none' }, children: isHit(entry) ? (_jsx(HitCard, { id: entry.howler.id, hit: entry, layout: HitLayout.DENSE, readOnly: true })) : (_jsx(EventCard, { id: entry.howler.id, event: entry })) })] }), _jsx(Divider, { flexItem: true })] }, entry.howler.id))) }))] }));
 };
 export default memo(CaseTimeline);

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

@@ -7,7 +7,7 @@ import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers
 import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
 import { createElement } from 'react';
 import { MemoryRouter } from 'react-router-dom';
-import { createMockHit, createMockObservable } from '@cccsaurora/howler-ui/tests/utils';
+import { createMockEvent, createMockHit } from '@cccsaurora/howler-ui/tests/utils';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { buildFilters } from './CaseTimeline';
 // ---------------------------------------------------------------------------
@@ -70,8 +70,8 @@ vi.mock('react-router-dom', async () => {
 vi.mock('components/elements/hit/HitCard', () => ({
     default: ({ id }) => _jsx("div", { children: `HitCard:${id}` })
 }));
-vi.mock('components/elements/observable/ObservableCard', () => ({
-    default: ({ id }) => _jsx("div", { children: `ObservableCard:${id}` })
+vi.mock('components/elements/event/EventCard', () => ({
+    default: ({ id }) => _jsx("div", { children: `EventCard:${id}` })
 }));
 // Return the request object rather than a Promise so dispatchApi's first
 // argument is JSON-serialisable (JSON.stringify(Promise) === '{}').
@@ -98,7 +98,7 @@ const mockCase = {
     case_id: 'case-001',
     items: [
         { type: 'hit', value: 'hit-1', path: 'hits/hit-1' },
-        { type: 'observable', value: 'obs-1', path: 'observables/obs-1' }
+        { type: 'event', value: 'obs-1', path: 'events/obs-1' }
     ]
 };
 const Wrapper = ({ children }) => (_jsx(ApiConfigContext.Provider, { value: { config: mockConfig, setConfig: vi.fn() }, children: _jsx(RecordContext.Provider, { value: { records: {}, loadRecords: mockLoadRecords }, children: _jsx(MemoryRouter, { initialEntries: ['/cases/case-001/timeline'], children: children }) }) }));
@@ -120,7 +120,7 @@ const mockFacetResponse = {
 };
 const mockSearchResponse = (items = [
     createMockHit({ howler: { id: 'hit-1' }, event: { created: '2024-01-01T00:00:00Z' } }),
-    createMockObservable({ howler: { id: 'obs-1' } })
+    createMockEvent({ howler: { id: 'obs-1' } })
 ]) => ({ items, total: items.length, rows: items.length, offset: 0 });
 describe('CaseTimeline component', () => {
     beforeEach(() => {
@@ -137,11 +137,11 @@ describe('CaseTimeline component', () => {
         render(_jsx(CaseTimeline, { case: mockCase }), { wrapper: Wrapper });
         await screen.findByText('page.cases.timeline.empty');
     });
-    it('renders HitCard for hit entries and ObservableCard for observable entries', async () => {
+    it('renders HitCard for hit entries and EventCard for event entries', async () => {
         mockDispatchApi.mockResolvedValueOnce(mockFacetResponse).mockResolvedValueOnce(mockSearchResponse());
         render(_jsx(CaseTimeline, { case: mockCase }), { wrapper: Wrapper });
         expect(await screen.findByText('HitCard:hit-1')).toBeTruthy();
-        expect(screen.getByText('ObservableCard:obs-1')).toBeTruthy();
+        expect(screen.getByText('EventCard:obs-1')).toBeTruthy();
     });
     it('renders the formatted event.created timestamp for hits', async () => {
         mockDispatchApi

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

@@ -141,14 +141,14 @@ const CreateRuleDialog = ({ open, onClose, onSubmit }) => {
                                                         }
                                                         return prev.filter(i => i !== 'hit');
                                                     });
-                                                } }), label: t('hit.search.index.hit') }), _jsx(FormControlLabel, { control: _jsx(Checkbox, { id: "rule-index-observable", checked: indexes.includes('observable'), onChange: (_e, checked) => {
+                                                } }), label: t('hit.search.index.hit') }), _jsx(FormControlLabel, { control: _jsx(Checkbox, { id: "rule-index-event", checked: indexes.includes('event'), onChange: (_e, checked) => {
                                                     setIndexes(prev => {
                                                         if (checked) {
-                                                            return prev.includes('observable') ? prev : [...prev, 'observable'];
+                                                            return prev.includes('event') ? prev : [...prev, 'event'];
                                                         }
-                                                        return prev.filter(i => i !== 'observable');
+                                                        return prev.filter(i => i !== 'event');
                                                     });
-                                                } }), label: t('hit.search.index.observable') })] })] }), _jsxs(Stack, { direction: "row", spacing: 2, alignItems: "center", children: [_jsx(LocalizationProvider, { dateAdapter: AdapterDayjs, children: _jsx(DateTimePicker, { slotProps: {
+                                                } }), label: t('hit.search.index.event') })] })] }), _jsxs(Stack, { direction: "row", spacing: 2, alignItems: "center", children: [_jsx(LocalizationProvider, { dateAdapter: AdapterDayjs, children: _jsx(DateTimePicker, { slotProps: {
                                             textField: {
                                                 id: 'rule-timeframe-input',
                                                 fullWidth: true,

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

@@ -61,7 +61,7 @@ describe('CreateRuleDialog', () => {
         expect(screen.getByTestId('rule-timeframe-input')).toBeInTheDocument();
         expect(screen.getByTestId('rule-no-expiry-checkbox')).toBeInTheDocument();
         expect(screen.getByTestId('rule-index-hit')).toBeInTheDocument();
-        expect(screen.getByTestId('rule-index-observable')).toBeInTheDocument();
+        expect(screen.getByTestId('rule-index-event')).toBeInTheDocument();
     });
     it('disables submit when query is empty', () => {
         render(_jsx(CreateRuleDialog, { ...defaultProps }));
@@ -205,9 +205,9 @@ describe('CreateRuleDialog', () => {
     it('defaults to hit index checked', () => {
         render(_jsx(CreateRuleDialog, { ...defaultProps }));
         const hitCheckbox = screen.getByTestId('rule-index-hit');
-        const observableCheckbox = screen.getByTestId('rule-index-observable');
+        const eventCheckbox = screen.getByTestId('rule-index-event');
         expect(hitCheckbox).toBeChecked();
-        expect(observableCheckbox).not.toBeChecked();
+        expect(eventCheckbox).not.toBeChecked();
     });
     it('includes both indexes when both are selected', async () => {
         const user = userEvent.setup();
@@ -216,7 +216,7 @@ describe('CreateRuleDialog', () => {
         api.search.hit.post.mockReturnValue('search-request');
         render(_jsx(CreateRuleDialog, { ...defaultProps, onSubmit: onSubmit }));
         await act(async () => {
-            await user.click(screen.getByTestId('rule-index-observable'));
+            await user.click(screen.getByTestId('rule-index-event'));
         });
         await act(async () => {
             await user.type(screen.getByTestId('rule-query-editor'), 'event.kind:alert');
@@ -232,7 +232,7 @@ describe('CreateRuleDialog', () => {
         });
         await waitFor(() => {
             expect(onSubmit).toHaveBeenCalledWith(expect.objectContaining({
-                indexes: expect.arrayContaining(['hit', 'observable'])
+                indexes: expect.arrayContaining(['hit', 'event'])
             }));
         });
     });

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

@@ -84,7 +84,7 @@ const ItemPage = ({ case: providedCase }) => {
     if (!item) {
         return _jsx(NotFoundPage, {});
     }
-    if (item.type === 'hit' || item.type === 'observable') {
+    if (item.type === 'hit' || item.type === 'event') {
         return _jsx(InformationPane, { selected: item.value });
     }
     if (item.type === 'case') {

package/components/routes/cases/detail/aggregates/CaseAggregate.d.ts

@@ -1,10 +1,10 @@
+import type { Event } from '@cccsaurora/howler-ui/models/entities/generated/Event';
 import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
-import type { Observable } from '@cccsaurora/howler-ui/models/entities/generated/Observable';
 declare const _default: import("react").NamedExoticComponent<{
     icon?: string;
     iconColor?: string;
     field?: string;
-    records?: Partial<Hit | Observable>[];
+    records?: Partial<Hit | Event>[];
     title?: string;
     subtitle?: string;
 }>;

package/components/routes/cases/detail/assets/Asset.d.ts

@@ -4,7 +4,7 @@ export type AssetType = 'hash' | 'hosts' | 'ip' | 'user' | 'ids' | 'id' | 'uri'
 export interface AssetEntry {
     type: AssetType;
     value: string;
-    /** IDs of the hits/observables this asset was seen in */
+    /** IDs of the hits/events this asset was seen in */
     seenIn: string[];
 }
 declare const Asset: FC<{