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

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<{

package/components/routes/cases/detail/assets/Asset.test.js

@@ -49,13 +49,13 @@ describe('Asset', () => {
             const _case = createMockCase({
                 items: [
                     { path: 'alerts/my-analytic (hit-001)', type: 'hit', value: 'hit-001' },
-                    { path: 'observables/obs-002', type: 'observable', value: 'obs-002' },
+                    { path: 'events/obs-002', type: 'event', value: 'obs-002' },
                     { path: 'alerts/other-analytic (hit-003)', type: 'hit', value: 'hit-003' }
                 ]
             });
             render(_jsx(MemoryRouter, { children: _jsx(Asset, { asset: makeAsset({ seenIn: ['hit-001', 'obs-002', 'hit-003'] }), case: _case }) }));
             expect(screen.getByText('alerts/my-analytic (hit-001)')).toBeTruthy();
-            expect(screen.getByText('observables/obs-002')).toBeTruthy();
+            expect(screen.getByText('events/obs-002')).toBeTruthy();
             expect(screen.getByText('alerts/other-analytic (hit-003)')).toBeTruthy();
         });
         it('links each chip to /cases/:case_id/:path', () => {

package/components/routes/cases/detail/sidebar/CaseFolderContextMenu.d.ts

@@ -10,7 +10,7 @@ export declare const collectAllLeaves: (tree: Tree) => Item[];
  * Returns the URL to open for a given leaf item, or null if no URL applies.
  * - reference: the item's value (an external URL)
  * - hit: /hits/<id>
- * - observable: /observables/<id>
+ * - event: /events/<id>
  * - case: /cases/<id>
  * - table / lead: null (no dedicated detail page)
  */

package/components/routes/cases/detail/sidebar/CaseFolderContextMenu.js

@@ -21,7 +21,7 @@ export const collectAllLeaves = (tree) => {
  * Returns the URL to open for a given leaf item, or null if no URL applies.
  * - reference: the item's value (an external URL)
  * - hit: /hits/<id>
- * - observable: /observables/<id>
+ * - event: /events/<id>
  * - case: /cases/<id>
  * - table / lead: null (no dedicated detail page)
  */
@@ -33,8 +33,8 @@ export const getOpenUrl = (leaf) => {
     if (type === 'hit') {
         return leaf.value ? `/hits/${leaf.value}` : null;
     }
-    if (type === 'observable') {
-        return leaf.value ? `/observables/${leaf.value}` : null;
+    if (type === 'event') {
+        return leaf.value ? `/events/${leaf.value}` : null;
     }
     if (type === 'case') {
         return leaf.value ? `/cases/${leaf.value}` : null;

package/components/routes/cases/detail/sidebar/CaseFolderContextMenu.test.js

@@ -54,7 +54,7 @@ import CaseFolderContextMenu, { collectAllLeaves, getOpenUrl } from './CaseFolde
 const mockCase = { case_id: 'case-1', title: 'Test Case', items: [] };
 const hitLeaf = { type: 'hit', value: 'hit-123', path: 'folder/hit-item' };
 const referenceLeaf = { type: 'reference', value: 'https://example.com', path: 'folder/ref-item' };
-const observableLeaf = { type: 'observable', value: 'obs-456', path: 'folder/obs-item' };
+const eventLeaf = { type: 'event', value: 'obs-456', path: 'folder/event-item' };
 const caseLeaf = { type: 'case', value: 'nested-case-id', path: 'folder/case-item' };
 const tableLeaf = { type: 'table', value: 'table-789', path: 'folder/table-item' };
 const leadLeaf = { type: 'lead', value: 'lead-999', path: 'folder/lead-item' };
@@ -119,8 +119,8 @@ describe('getOpenUrl', () => {
     it('returns /hits/<id> for a hit item', () => {
         expect(getOpenUrl(hitLeaf)).toBe('/hits/hit-123');
     });
-    it('returns /observables/<id> for an observable item', () => {
-        expect(getOpenUrl(observableLeaf)).toBe('/observables/obs-456');
+    it('returns /events/<id> for an event item', () => {
+        expect(getOpenUrl(eventLeaf)).toBe('/events/obs-456');
     });
     it('returns /cases/<id> for a case item', () => {
         expect(getOpenUrl(caseLeaf)).toBe('/cases/nested-case-id');
@@ -159,8 +159,8 @@ describe('CaseFolderContextMenu', () => {
             expect(screen.getByTestId('open-item')).toBeInTheDocument();
             expect(screen.getByTestId('remove-item')).toBeInTheDocument();
         });
-        it('shows "Open item" and "Remove item" for an observable leaf', () => {
-            renderMenu({ leaf: observableLeaf });
+        it('shows "Open item" and "Remove item" for an event leaf', () => {
+            renderMenu({ leaf: eventLeaf });
             expect(screen.getByTestId('open-item')).toBeInTheDocument();
             expect(screen.getByTestId('remove-item')).toBeInTheDocument();
         });
@@ -219,12 +219,12 @@ describe('CaseFolderContextMenu', () => {
             });
             expect(window.open).toHaveBeenCalledWith('https://example.com', '_blank', 'noopener noreferrer');
         });
-        it('calls window.open with the observable URL', () => {
-            renderMenu({ leaf: observableLeaf });
+        it('calls window.open with the event URL', () => {
+            renderMenu({ leaf: eventLeaf });
             act(() => {
                 fireEvent.click(screen.getByTestId('open-item'));
             });
-            expect(window.open).toHaveBeenCalledWith('/observables/obs-456', '_blank', 'noopener noreferrer');
+            expect(window.open).toHaveBeenCalledWith('/events/obs-456', '_blank', 'noopener noreferrer');
         });
         it('calls window.open with the case URL', () => {
             renderMenu({ leaf: caseLeaf });

package/components/routes/cases/detail/sidebar/FolderEntry.js

@@ -9,7 +9,7 @@ import { Link, useLocation } from 'react-router-dom';
 const ICON_FOR_TYPE = {
     folder: Folder,
     case: BookRounded,
-    observable: Visibility,
+    event: Visibility,
     hit: CheckCircle,
     table: TableChart,
     lead: Lightbulb,

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

@@ -1,7 +1,7 @@
+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 FC } from 'react';
 declare const AddToCaseModal: FC<{
-    records: (Hit | Observable)[];
+    records: (Hit | Event)[];
 }>;
 export default AddToCaseModal;

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

@@ -5,7 +5,7 @@ import userEvent, {} from '@testing-library/user-event';
 import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
 import i18n from '@cccsaurora/howler-ui/i18n';
 import { I18nextProvider } from 'react-i18next';
-import { createMockCase, createMockHit, createMockObservable } from '@cccsaurora/howler-ui/tests/utils';
+import { createMockCase, createMockEvent, createMockHit } from '@cccsaurora/howler-ui/tests/utils';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import AddToCaseModal from './AddToCaseModal';
 // ---------------------------------------------------------------------------
@@ -49,7 +49,7 @@ const MOCK_HIT_1 = createMockHit({
 const MOCK_HIT_2 = createMockHit({
     howler: { id: 'hit-002', analytic: 'AnalyticTwo', status: 'open' }
 });
-const MOCK_OBSERVABLE = createMockObservable({
+const MOCK_EVENT = createMockEvent({
     howler: { id: 'obs-001' }
 });
 // ---------------------------------------------------------------------------
@@ -114,12 +114,12 @@ describe('AddToCaseModal', () => {
             const titleInput = screen.getByPlaceholderText(i18n.t('modal.cases.add_to_case.title'));
             expect(titleInput).toHaveValue(`${MOCK_HIT_1.howler.analytic} (${MOCK_HIT_1.howler.id})`);
         });
-        it('pre-populates title for an observable with Observable and id', async () => {
-            renderModal([MOCK_OBSERVABLE]);
+        it('pre-populates title for an event with Event and id', async () => {
+            renderModal([MOCK_EVENT]);
             await waitFor(() => expect(mockDispatchApi).toHaveBeenCalled());
             await selectCase(user, 'Case Alpha');
             const titleInput = screen.getByPlaceholderText(i18n.t('modal.cases.add_to_case.title'));
-            expect(titleInput).toHaveValue(`Observable (${MOCK_OBSERVABLE.howler.id})`);
+            expect(titleInput).toHaveValue(`Event (${MOCK_EVENT.howler.id})`);
         });
         it('title input is editable', async () => {
             renderModal([MOCK_HIT_1]);
@@ -161,13 +161,13 @@ describe('AddToCaseModal', () => {
             expect(titleInputs[0]).toHaveValue('Edited');
             expect(titleInputs[1]).toHaveValue(`${MOCK_HIT_2.howler.analytic} (${MOCK_HIT_2.howler.id})`);
         });
-        it('mixed hit and observable records each get correct default titles', async () => {
-            renderModal([MOCK_HIT_1, MOCK_OBSERVABLE]);
+        it('mixed hit and event records each get correct default titles', async () => {
+            renderModal([MOCK_HIT_1, MOCK_EVENT]);
             await waitFor(() => expect(mockDispatchApi).toHaveBeenCalled());
             await selectCase(user, 'Case Alpha');
             const titleInputs = screen.getAllByPlaceholderText(i18n.t('modal.cases.add_to_case.title'));
             expect(titleInputs[0]).toHaveValue(`${MOCK_HIT_1.howler.analytic} (${MOCK_HIT_1.howler.id})`);
-            expect(titleInputs[1]).toHaveValue(`Observable (${MOCK_OBSERVABLE.howler.id})`);
+            expect(titleInputs[1]).toHaveValue(`Event (${MOCK_EVENT.howler.id})`);
         });
     });
     // -------------------------------------------------------------------------
@@ -260,14 +260,14 @@ describe('AddToCaseModal', () => {
                 path: `investigations/${MOCK_HIT_1.howler.analytic} (${MOCK_HIT_1.howler.id})`
             }));
         });
-        it('uses observable __index for observable records', async () => {
+        it('uses event __index for event records', async () => {
             const api = (await import('api')).default;
-            renderModal([MOCK_OBSERVABLE]);
+            renderModal([MOCK_EVENT]);
             await waitFor(() => expect(mockDispatchApi).toHaveBeenCalled());
             await selectCase(user, 'Case Alpha');
             await user.click(screen.getByRole('button', { name: i18n.t('confirm') }));
             await waitFor(() => expect(mockClose).toHaveBeenCalled());
-            expect(api.v2.case.items.post).toHaveBeenCalledWith('case-a', expect.objectContaining({ type: 'observable' }));
+            expect(api.v2.case.items.post).toHaveBeenCalledWith('case-a', expect.objectContaining({ type: 'event' }));
         });
     });
     // -------------------------------------------------------------------------

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

@@ -10,6 +10,6 @@ const CaseRecordRow = ({ entry, folderOptions = [], onTitleChange, onPathChange
     const { record, path, title } = entry;
     const fullPath = path ? `${path}/${title}` : title;
     const pathError = path.startsWith('/') || path.endsWith('/');
-    return (_jsxs(Accordion, { variant: "outlined", defaultExpanded: true, sx: { flexShrink: 0 }, children: [_jsx(AccordionSummary, { expandIcon: _jsx(KeyboardArrowDown, {}), sx: { px: 1, minHeight: '48px !important', '& > *': { margin: '0 !important' } }, children: _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, width: "100%", children: [_jsx(Typography, { variant: "body2", fontWeight: 500, sx: { flex: 1, overflow: 'hidden', textOverflow: 'ellipsis' }, children: isHit(record) ? record.howler.analytic : 'Observable' }), isHit(record) && _jsx(EscalationChip, { hit: record, layout: HitLayout.DENSE }), isHit(record) && _jsx(Chip, { label: record.howler.status, size: "small", color: "primary", sx: { flexShrink: 0 } }), _jsx(Typography, { variant: "caption", color: "textSecondary", sx: { flexShrink: 0 }, children: record.howler.id })] }) }), _jsx(AccordionDetails, { children: _jsxs(Stack, { spacing: 1, children: [_jsx(Autocomplete, { freeSolo: true, disablePortal: true, options: folderOptions, value: path, onInputChange: (_ev, newVal) => onPathChange(newVal), renderInput: params => (_jsx(TextField, { ...params, size: "small", placeholder: t('modal.cases.add_to_case.select_path'), fullWidth: true, error: pathError, helperText: pathError ? t('modal.cases.add_to_case.path_invalid') : undefined })) }), _jsx(TextField, { size: "small", fullWidth: true, placeholder: t('modal.cases.add_to_case.title'), value: title, onChange: ev => onTitleChange(ev.target.value) }), title && (_jsx(Typography, { variant: "caption", color: "textSecondary", children: t('modal.cases.add_to_case.full_path', { path: fullPath }) }))] }) })] }));
+    return (_jsxs(Accordion, { variant: "outlined", defaultExpanded: true, sx: { flexShrink: 0 }, children: [_jsx(AccordionSummary, { expandIcon: _jsx(KeyboardArrowDown, {}), sx: { px: 1, minHeight: '48px !important', '& > *': { margin: '0 !important' } }, children: _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, width: "100%", children: [_jsx(Typography, { variant: "body2", fontWeight: 500, sx: { flex: 1, overflow: 'hidden', textOverflow: 'ellipsis' }, children: isHit(record) ? record.howler.analytic : 'Event' }), isHit(record) && _jsx(EscalationChip, { hit: record, layout: HitLayout.DENSE }), isHit(record) && _jsx(Chip, { label: record.howler.status, size: "small", color: "primary", sx: { flexShrink: 0 } }), _jsx(Typography, { variant: "caption", color: "textSecondary", sx: { flexShrink: 0 }, children: record.howler.id })] }) }), _jsx(AccordionDetails, { children: _jsxs(Stack, { spacing: 1, children: [_jsx(Autocomplete, { freeSolo: true, disablePortal: true, options: folderOptions, value: path, onInputChange: (_ev, newVal) => onPathChange(newVal), renderInput: params => (_jsx(TextField, { ...params, size: "small", placeholder: t('modal.cases.add_to_case.select_path'), fullWidth: true, error: pathError, helperText: pathError ? t('modal.cases.add_to_case.path_invalid') : undefined })) }), _jsx(TextField, { size: "small", fullWidth: true, placeholder: t('modal.cases.add_to_case.title'), value: title, onChange: ev => onTitleChange(ev.target.value) }), title && (_jsx(Typography, { variant: "caption", color: "textSecondary", children: t('modal.cases.add_to_case.full_path', { path: fullPath }) }))] }) })] }));
 };
 export default CaseRecordRow;

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

@@ -1,7 +1,7 @@
+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 FC } from 'react';
 declare const CreateCaseModal: FC<{
-    records: (Hit | Observable)[];
+    records: (Hit | Event)[];
 }>;
 export default CreateCaseModal;

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

@@ -6,7 +6,7 @@ import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers
 import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
 import i18n from '@cccsaurora/howler-ui/i18n';
 import { I18nextProvider } from 'react-i18next';
-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 CreateCaseModal from './CreateCaseModal';
 // ---------------------------------------------------------------------------
@@ -48,7 +48,7 @@ const MOCK_HIT_1 = createMockHit({
 const MOCK_HIT_2 = createMockHit({
     howler: { id: 'hit-002', analytic: 'AnalyticTwo', status: 'open' }
 });
-const MOCK_OBSERVABLE = createMockObservable({
+const MOCK_EVENT = createMockEvent({
     howler: { id: 'obs-001' }
 });
 const MOCK_CONFIG = {
@@ -115,19 +115,19 @@ describe('CreateCaseModal', () => {
             expect(screen.getByText(MOCK_HIT_1.howler.analytic)).toBeInTheDocument();
             expect(screen.getByText(MOCK_HIT_2.howler.analytic)).toBeInTheDocument();
         });
-        it('renders a row for an observable record', () => {
-            renderModal([MOCK_OBSERVABLE]);
-            expect(screen.getByText('Observable')).toBeInTheDocument();
+        it('renders a row for an event record', () => {
+            renderModal([MOCK_EVENT]);
+            expect(screen.getByText('Event')).toBeInTheDocument();
         });
         it('pre-populates the title for a hit with analytic and id', () => {
             renderModal([MOCK_HIT_1]);
             const titleInputs = screen.getAllByPlaceholderText(i18n.t('modal.cases.add_to_case.title'));
             expect(titleInputs[0]).toHaveValue(`${MOCK_HIT_1.howler.analytic} (${MOCK_HIT_1.howler.id})`);
         });
-        it('pre-populates the title for an observable with Observable and id', () => {
-            renderModal([MOCK_OBSERVABLE]);
+        it('pre-populates the title for an event with Event and id', () => {
+            renderModal([MOCK_EVENT]);
             const titleInput = screen.getByPlaceholderText(i18n.t('modal.cases.add_to_case.title'));
-            expect(titleInput).toHaveValue(`Observable (${MOCK_OBSERVABLE.howler.id})`);
+            expect(titleInput).toHaveValue(`Event (${MOCK_EVENT.howler.id})`);
         });
         it('shows the alert placement section label when there are records', () => {
             renderModal([MOCK_HIT_1]);
@@ -302,14 +302,14 @@ describe('CreateCaseModal', () => {
                 path: `investigations/${MOCK_HIT_1.howler.analytic} (${MOCK_HIT_1.howler.id})`
             }));
         });
-        it('uses observable __index for observable records', async () => {
+        it('uses event __index for event records', async () => {
             const api = (await import('api')).default;
             mockDispatchApi.mockResolvedValue({ case_id: 'new-case-id' });
-            renderModal([MOCK_OBSERVABLE]);
+            renderModal([MOCK_EVENT]);
             await fillCaseMetadata(user);
             await user.click(screen.getByRole('button', { name: i18n.t('confirm') }));
             await waitFor(() => expect(mockClose).toHaveBeenCalled());
-            expect(api.v2.case.items.post).toHaveBeenCalledWith('new-case-id', expect.objectContaining({ type: 'observable' }));
+            expect(api.v2.case.items.post).toHaveBeenCalledWith('new-case-id', expect.objectContaining({ type: 'event' }));
         });
         it('does not call items.post when there are no records', async () => {
             const api = (await import('api')).default;
@@ -348,11 +348,11 @@ describe('CreateCaseModal', () => {
             expect(titleInputs[0]).toHaveValue('Edited Title');
             expect(titleInputs[1]).toHaveValue(`${MOCK_HIT_2.howler.analytic} (${MOCK_HIT_2.howler.id})`);
         });
-        it('mixed hit and observable records each get correct default titles', () => {
-            renderModal([MOCK_HIT_1, MOCK_OBSERVABLE]);
+        it('mixed hit and event records each get correct default titles', () => {
+            renderModal([MOCK_HIT_1, MOCK_EVENT]);
             const titleInputs = screen.getAllByPlaceholderText(i18n.t('modal.cases.add_to_case.title'));
             expect(titleInputs[0]).toHaveValue(`${MOCK_HIT_1.howler.analytic} (${MOCK_HIT_1.howler.id})`);
-            expect(titleInputs[1]).toHaveValue(`Observable (${MOCK_OBSERVABLE.howler.id})`);
+            expect(titleInputs[1]).toHaveValue(`Event (${MOCK_EVENT.howler.id})`);
         });
     });
 });

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

@@ -1,7 +1,7 @@
 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 { RecordEntry } from './types';
-export declare const defaultTitle: (record: Hit | Observable) => string;
+export declare const defaultTitle: (record: Hit | Event) => string;
 export declare const useFolderOptions: (selectedCase: Case | null) => string[];
-export declare const useRecordEntries: (records: (Hit | Observable)[]) => readonly [RecordEntry[], (index: number, field: "title" | "path", value: string) => void];
+export declare const useRecordEntries: (records: (Hit | Event)[]) => readonly [RecordEntry[], (index: number, field: "title" | "path", value: string) => void];

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

@@ -3,7 +3,7 @@ export const defaultTitle = (record) => {
     if (record.__index === 'hit') {
         return `${record.howler.analytic} (${record.howler.id})`;
     }
-    return `Observable (${record.howler.id})`;
+    return `Event (${record.howler.id})`;
 };
 export const useFolderOptions = (selectedCase) => {
     return useMemo(() => {

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

@@ -1,5 +1,8 @@
+import type { Event } from 'models/entities/generated/Event';
+import type { Hit } from 'models/entities/generated/Hit';
+
 export interface RecordEntry {
-  record: Hit | Observable;
+  record: Hit | Event;
   path: string;
   title: string;
 }

package/components/routes/events/EventViewer.d.ts

@@ -0,0 +1,7 @@
+import type { Event } from '@cccsaurora/howler-ui/models/entities/generated/Event';
+import { type FC } from 'react';
+declare const EventViewer: FC<{
+    event?: Event;
+    eventId?: string;
+}>;
+export default EventViewer;

package/components/routes/events/EventViewer.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, Skeleton } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
+import ObjectDetails from '@cccsaurora/howler-ui/components/elements/ObjectDetails';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import { useEffect, useState } from 'react';
+const EventViewer = ({ event: provided, eventId }) => {
+    const { dispatchApi } = useMyApi();
+    const [event, setEvent] = useState(null);
+    useEffect(() => {
+        if (provided) {
+            setEvent(provided);
+        }
+    }, [provided]);
+    useEffect(() => {
+        if (eventId) {
+            dispatchApi(api.v2.search.post('event', { query: `howler.id:${eventId}`, rows: 1 }), {
+                throwError: false
+            }).then(res => setEvent(res.items[0]));
+        }
+    }, [dispatchApi, eventId]);
+    if (!event) {
+        return;
+    }
+    return _jsx(Box, { p: 1, children: event ? _jsx(ObjectDetails, { obj: event }) : _jsx(Skeleton, { height: 120 }) });
+};
+export default EventViewer;

package/components/routes/hits/search/SearchPane.js

@@ -14,9 +14,9 @@ import VSBoxContent from '@cccsaurora/howler-ui/components/elements/addons/layou
 import VSBoxHeader from '@cccsaurora/howler-ui/components/elements/addons/layout/vsbox/VSBoxHeader';
 import SearchPagination from '@cccsaurora/howler-ui/components/elements/addons/search/SearchPagination';
 import SearchTotal from '@cccsaurora/howler-ui/components/elements/addons/search/SearchTotal';
+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 RecordContextMenu from '@cccsaurora/howler-ui/components/elements/record/RecordContextMenu';
 import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
 import useRecordSelection from '@cccsaurora/howler-ui/components/hooks/useRecordSelection';
@@ -26,7 +26,7 @@ import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import { useContextSelector } from 'use-context-selector';
 import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
-import { isHit, isObservable } from '@cccsaurora/howler-ui/utils/typeUtils';
+import { isEvent, isHit } from '@cccsaurora/howler-ui/utils/typeUtils';
 import LayoutSettings from './LayoutSettings';
 import QuerySettings from './QuerySettings';
 import RecordQuery from './RecordQuery';
@@ -73,7 +73,7 @@ const Item = memo(({ record, onClick }) => {
                     boxShadow: `0px 0px 5px 2px ${theme.palette.primary.main}`
                 }
             }
-        ], children: [isHit(record) && _jsx(HitCard, { id: record.howler.id, layout: layout }), isObservable(record) && _jsx(ObservableCard, { id: record.howler.id, observable: record })] }));
+        ], children: [isHit(record) && _jsx(HitCard, { id: record.howler.id, layout: layout }), isEvent(record) && _jsx(EventCard, { id: record.howler.id, event: record })] }));
 });
 const SearchPane = () => {
     const { t } = useTranslation();