npm - @cccsaurora/howler-ui - Versions diffs - 2.19.0-cases.1129 → 2.19.0-cases.1131 - Mend

@cccsaurora/howler-ui 2.19.0-cases.1129 → 2.19.0-cases.1131

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

package/components/routes/cases/detail/CaseObservables.d.ts CHANGED Viewed

@@ -1,9 +1,4 @@
 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 ObservableEntry } from './observables/Observable';
-/** Deduplicate and merge seenIn lists into a map keyed by `type:value` */
-export declare const buildObservableEntries: (records: Partial<Hit | Event>[]) => ObservableEntry[];
 declare const _default: import("react").NamedExoticComponent<{
     case?: Case;
     caseId?: string;

package/components/routes/cases/detail/CaseObservables.js CHANGED Viewed

@@ -1,64 +1,31 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Chip, Grid, Skeleton, Stack, Typography } from '@mui/material';
+import { FilterList } from '@mui/icons-material';
+import { Chip, Grid, Skeleton, Stack, TextField, Typography } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
+import ChipPopper from '@cccsaurora/howler-ui/components/elements/display/ChipPopper';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import { toArray, uniq } from 'lodash-es';
 import { memo, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useOutletContext } from 'react-router-dom';
 import useCase from '../hooks/useCase';
-import Observable, {} from './observables/Observable';
-/** All Related fields that carry observable values */
-const OBSERVABLE_FIELDS = ['hash', 'hosts', 'ip', 'user', 'ids', 'id', 'uri', 'signature'];
-/** Extract (type, value, seenInId) triples from a record's related field */
-const extractObservables = (related, recordId) => {
-    if (!related) {
-        return [];
-    }
-    const results = [];
-    for (const field of OBSERVABLE_FIELDS) {
-        const raw = related[field];
-        if (!raw) {
-            continue;
-        }
-        const values = Array.isArray(raw) ? raw : [raw];
-        for (const value of values) {
-            if (value) {
-                results.push({ type: field, value: String(value), id: recordId });
-            }
-        }
-    }
-    return results;
-};
-/** Deduplicate and merge seenIn lists into a map keyed by `type:value` */
-export const buildObservableEntries = (records) => {
-    const map = new Map();
-    for (const record of records) {
-        const related = record.related ?? record.related;
-        const recordId = record.howler?.id ?? record.howler?.id;
-        if (!recordId) {
-            continue;
-        }
-        for (const { type, value, id } of extractObservables(related, recordId)) {
-            const key = `${type}:${value}`;
-            if (!map.has(key)) {
-                map.set(key, { type, value, seenIn: [] });
-            }
-            const entry = map.get(key);
-            if (!entry.seenIn.includes(id)) {
-                entry.seenIn.push(id);
-            }
-        }
-    }
-    return Array.from(map.values());
-};
+import ObservableTable from './observables/ObservableTable';
+import { OBSERVABLE_FIELDS, buildObservableEntries, classifyRole, resolveSources } from './utils';
 const RELATED_FIELDS = OBSERVABLE_FIELDS.map(f => `related.${f}`).join(',');
+const EXTRA_FIELDS = 'howler.escalation,howler.outline.threat,howler.outline.target,howler.outline.indicators,threat.indicator.ip,threat.indicator.description';
 const CaseObservables = ({ case: providedCase, caseId }) => {
     const { t } = useTranslation();
     const { dispatchApi } = useMyApi();
     const routeCase = useOutletContext();
     const { case: _case } = useCase({ case: providedCase ?? routeCase, caseId });
     const [records, setRecords] = useState(null);
-    const [activeFilters, setActiveFilters] = useState(new Set());
+    const [activeFilters, setActiveFilters] = useState([]);
+    const [searchQuery, setSearchQuery] = useState('');
+    const [originFilters, setOriginFilters] = useState([]);
+    const [roleFilters, setRoleFilters] = useState([]);
+    const [escalationOptions, setEscalationOptions] = useState([]);
+    const [activeEscalations, setActiveEscalations] = useState([]);
+    const [escalationMap, setEscalationMap] = useState(new Map());
     const ids = useMemo(() => (_case?.items ?? [])
         .filter(item => ['hit', 'event'].includes(item.type))
         .map(item => item.value)
@@ -70,35 +37,106 @@ const CaseObservables = ({ case: providedCase, caseId }) => {
         }
         dispatchApi(api.v2.search.post(['hit', 'event'], {
             query: `howler.id:(${ids.join(' OR ')})`,
-            fl: `howler.id,${RELATED_FIELDS}`
-        })).then(response => setRecords(response.items));
+            fl: `howler.id,${RELATED_FIELDS},${EXTRA_FIELDS}`
+        })).then(response => {
+            setRecords(response.items);
+            // Build escalation map from fetched records
+            const escMap = new Map();
+            for (const record of response.items) {
+                const id = record.howler?.id ?? record.howler?.id;
+                const escalation = record.howler?.escalation;
+                if (id && escalation) {
+                    escMap.set(id, escalation);
+                }
+            }
+            setEscalationMap(escMap);
+        });
     }, [dispatchApi, ids]);
-    const allObservables = useMemo(() => (records ? buildObservableEntries(records) : []), [records]);
-    const observableTypes = useMemo(() => (allObservables ? [...new Set(allObservables.map(a => a.type))].sort() : []), [allObservables]);
+    useEffect(() => {
+        if (ids.length < 1) {
+            setEscalationOptions([]);
+            setActiveEscalations([]);
+            return;
+        }
+        dispatchApi(api.v2.search.facet.post(['hit', 'event'], {
+            fields: ['howler.escalation'],
+            filters: [`howler.id:(${ids.join(' OR ')})`]
+        }), { throwError: false }).then(result => {
+            if (result) {
+                setEscalationOptions(Object.keys(result['howler.escalation'] ?? {}));
+            }
+        });
+    }, [dispatchApi, ids]);
+    const allObservables = useMemo(() => {
+        if (!records || !_case) {
+            return [];
+        }
+        const entries = buildObservableEntries(records);
+        return entries.map(entry => ({
+            ...entry,
+            role: classifyRole(entry.value, _case, records),
+            sources: resolveSources(entry.seenIn, _case.items, escalationMap)
+        }));
+    }, [records, _case, escalationMap]);
+    const observableTypes = useMemo(() => (allObservables ? uniq(allObservables.map(a => a.type)).sort() : []), [allObservables]);
     const filteredObservables = useMemo(() => {
         if (allObservables.length < 1) {
             return [];
         }
-        if (activeFilters.size === 0) {
-            return allObservables;
+        let result = allObservables;
+        if (activeFilters.length > 0) {
+            result = result.filter(a => activeFilters.includes(a.type));
+        }
+        if (searchQuery.trim()) {
+            const query = searchQuery.trim().toLowerCase();
+            result = result.filter(a => a.value.toLowerCase().includes(query) || a.type.toLowerCase().includes(query));
+        }
+        if (originFilters.length > 0) {
+            result = result.filter(a => a.sources?.some(s => originFilters.includes(s.type)));
+        }
+        if (activeEscalations.length > 0) {
+            result = result.filter(a => a.sources?.some(s => s.escalation && activeEscalations.includes(s.escalation)));
+        }
+        if (roleFilters.length > 0) {
+            result = result.filter(a => a.role && roleFilters.includes(a.role));
         }
-        return allObservables.filter(a => activeFilters.has(a.type));
-    }, [allObservables, activeFilters]);
-    const toggleFilter = (type) => {
-        setActiveFilters(prev => {
-            const next = new Set(prev);
-            if (next.has(type)) {
-                next.delete(type);
+        return result;
+    }, [allObservables, activeFilters, searchQuery, originFilters, activeEscalations, roleFilters]);
+    const toggleSetItem = (setter, item) => {
+        setter(prev => {
+            if (prev.includes(item)) {
+                return prev.filter(_item => _item !== item);
             }
             else {
-                next.add(type);
+                return [...prev, item];
             }
-            return next;
         });
     };
     if (!_case) {
         return null;
     }
-    return (_jsxs(Grid, { container: true, spacing: 2, px: 2, children: [_jsx(Grid, { item: true, xs: 12, children: _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, flexWrap: "wrap", children: [_jsx(Typography, { variant: "subtitle2", color: "text.secondary", children: t('page.cases.observables.filter_by_type') }), records === null ? (_jsx(Skeleton, { width: 240, height: 32 })) : (observableTypes.map(type => (_jsx(Chip, { label: t(`page.cases.observables.type.${type}`), size: "small", onClick: () => toggleFilter(type), color: activeFilters.has(type) ? 'primary' : 'default', variant: activeFilters.has(type) ? 'filled' : 'outlined' }, type))))] }) }), records === null ? (Array.from({ length: 6 }, (_, i) => (_jsx(Grid, { item: true, xs: 12, sm: 6, md: 4, xl: 3, children: _jsx(Skeleton, { height: 100 }) }, `skeleton-${i}`)))) : filteredObservables.length === 0 ? (_jsx(Grid, { item: true, xs: 12, children: _jsx(Typography, { color: "text.secondary", children: t('page.cases.observables.empty') }) })) : (filteredObservables.map(observable => (_jsx(Grid, { item: true, xs: 12, md: 6, xl: 4, children: _jsx(Observable, { asset: observable, case: _case }) }, `${observable.type}:${observable.value}`))))] }));
+    return (_jsxs(Grid, { container: true, spacing: 2, px: 2, children: [_jsx(Grid, { item: true, xs: 12, children: _jsxs(Stack, { spacing: 1.5, children: [_jsx(TextField, { size: "small", placeholder: t('page.cases.observables.search'), value: searchQuery, onChange: e => setSearchQuery(e.target.value), sx: { maxWidth: 360 }, id: "observable-search" }), _jsxs(Stack, { direction: "row", spacing: 1, flexWrap: "wrap", children: [_jsx(ChipPopper, { icon: _jsx(FilterList, {}), label: activeFilters.length > 0
+                                        ? `${t('page.cases.observables.filter_by_type')} (${toArray(activeFilters)
+                                            .map(type => t(`page.cases.observables.type.${type}`))
+                                            .sort()
+                                            .join(', ')})`
+                                        : t('page.cases.observables.filter_by_type'), slotProps: {
+                                        chip: { size: 'small', color: activeFilters.length > 0 ? 'primary' : 'default' }
+                                    }, children: records === null ? (_jsx(Skeleton, { width: 200, height: 32 })) : (_jsx(Stack, { direction: "row", gap: 0.5, flexWrap: "wrap", children: observableTypes.map(type => (_jsx(Chip, { label: t(`page.cases.observables.type.${type}`), size: "small", onClick: () => toggleSetItem(setActiveFilters, type), color: activeFilters.includes(type) ? 'primary' : 'default', variant: activeFilters.includes(type) ? 'filled' : 'outlined' }, type))) })) }), _jsx(ChipPopper, { icon: _jsx(FilterList, {}), label: originFilters.length > 0
+                                        ? `${t('page.cases.observables.filter_by_origin')} (${toArray(originFilters).join(', ')})`
+                                        : t('page.cases.observables.filter_by_origin'), slotProps: {
+                                        chip: { size: 'small', color: originFilters.length > 0 ? 'primary' : 'default' }
+                                    }, children: _jsx(Stack, { direction: "row", gap: 0.5, flexWrap: "wrap", children: ['hit', 'event'].map(origin => (_jsx(Chip, { label: t(`page.cases.observables.origin.${origin}`), size: "small", onClick: () => toggleSetItem(setOriginFilters, origin), color: originFilters.includes(origin) ? 'primary' : 'default', variant: originFilters.includes(origin) ? 'filled' : 'outlined' }, origin))) }) }), _jsx(ChipPopper, { icon: _jsx(FilterList, {}), label: roleFilters.length > 0
+                                        ? `${t('page.cases.observables.filter_by_role')} (${toArray(roleFilters).join(', ')})`
+                                        : t('page.cases.observables.filter_by_role'), slotProps: {
+                                        chip: { size: 'small', color: roleFilters.length > 0 ? 'primary' : 'default' }
+                                    }, children: _jsx(Stack, { direction: "row", gap: 0.5, flexWrap: "wrap", children: ['threat', 'target', 'indicator'].map(role => (_jsx(Chip, { label: t(`page.cases.observables.role.${role}`), size: "small", onClick: () => toggleSetItem(setRoleFilters, role), color: roleFilters.includes(role) ? 'primary' : 'default', variant: roleFilters.includes(role) ? 'filled' : 'outlined' }, role))) }) }), escalationOptions.length > 0 && (_jsx(ChipPopper, { icon: _jsx(FilterList, {}), label: activeEscalations.length > 0
+                                        ? `${t('page.cases.observables.filter_by_escalation')} (${toArray(activeEscalations).join(', ')})`
+                                        : t('page.cases.observables.filter_by_escalation'), slotProps: {
+                                        chip: {
+                                            size: 'small',
+                                            color: activeEscalations.length > 0 ? 'primary' : 'default'
+                                        }
+                                    }, children: _jsx(Stack, { direction: "row", gap: 0.5, flexWrap: "wrap", children: escalationOptions.map(esc => (_jsx(Chip, { label: esc, size: "small", onClick: () => toggleSetItem(setActiveEscalations, esc), color: activeEscalations.includes(esc) ? 'primary' : 'default', variant: activeEscalations.includes(esc) ? 'filled' : 'outlined' }, esc))) }) }))] })] }) }), records === null ? (Array.from({ length: 6 }, (_, i) => (_jsx(Grid, { item: true, xs: 12, children: _jsx(Skeleton, { height: 40 }) }, `skeleton-${i}`)))) : filteredObservables.length === 0 ? (_jsx(Grid, { item: true, xs: 12, children: _jsx(Typography, { color: "text.secondary", children: t('page.cases.observables.empty') }) })) : (_jsx(Grid, { item: true, xs: 12, children: _jsx(ObservableTable, { observables: filteredObservables, case: _case }) }))] }));
 };
 export default memo(CaseObservables);

package/components/routes/cases/detail/CaseObservables.test.js CHANGED Viewed

@@ -1,76 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 /// <reference types="vitest" />
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { createElement } from 'react';
 import { MemoryRouter } from 'react-router-dom';
-import { createMockEvent, createMockHit } from '@cccsaurora/howler-ui/tests/utils';
 import { describe, expect, it, vi } from 'vitest';
-import { buildObservableEntries } from './CaseObservables';
-// ---------------------------------------------------------------------------
-// Pure logic tests — no React needed
-// ---------------------------------------------------------------------------
-describe('buildObservableEntries', () => {
-    it('returns an empty array for records with no related field', () => {
-        expect(buildObservableEntries([createMockHit({ howler: { id: 'h1' } })])).toEqual([]);
-    });
-    it('extracts a single IP from a hit', () => {
-        const result = buildObservableEntries([createMockHit({ howler: { id: 'h1' }, related: { ip: ['1.2.3.4'] } })]);
-        expect(result).toHaveLength(1);
-        expect(result[0]).toEqual({ type: 'ip', value: '1.2.3.4', seenIn: ['h1'] });
-    });
-    it('extracts multiple fields from a single record', () => {
-        const result = buildObservableEntries([
-            createMockHit({ howler: { id: 'h1' }, related: { ip: ['1.2.3.4'], user: ['alice'] } })
-        ]);
-        const types = result.map(a => a.type).sort();
-        expect(types).toEqual(['ip', 'user']);
-    });
-    it('deduplicates the same asset value across multiple records', () => {
-        const result = buildObservableEntries([
-            createMockHit({ howler: { id: 'h1' }, 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']);
-    });
-    it('keeps distinct asset values as separate entries', () => {
-        const result = buildObservableEntries([
-            createMockHit({ howler: { id: 'h1' }, related: { ip: ['1.2.3.4'] } }),
-            createMockHit({ howler: { id: 'h2' }, related: { ip: ['5.6.7.8'] } })
-        ]);
-        expect(result).toHaveLength(2);
-    });
-    it('does not duplicate seenIn ids when the same record appears twice for the same asset', () => {
-        const result = buildObservableEntries([
-            createMockHit({ howler: { id: 'h1' }, related: { ip: ['1.2.3.4'] } }),
-            createMockHit({ howler: { id: 'h1' }, related: { ip: ['1.2.3.4'] } })
-        ]);
-        expect(result[0].seenIn).toEqual(['h1']);
-    });
-    it('skips records with no howler.id', () => {
-        const noId = { related: { ip: ['1.2.3.4'] } };
-        expect(buildObservableEntries([noId])).toEqual([]);
-    });
-    it('handles the scalar `id` field on Related', () => {
-        const result = buildObservableEntries([createMockHit({ howler: { id: 'h1' }, related: { id: 'some-id' } })]);
-        expect(result).toHaveLength(1);
-        expect(result[0]).toEqual({ type: 'id', value: 'some-id', seenIn: ['h1'] });
-    });
-    it('handles array fields like hash, hosts, user, ids, uri, signature', () => {
-        const related = {
-            hash: ['abc123'],
-            hosts: ['host.example.com'],
-            user: ['bob'],
-            ids: ['guid-1'],
-            uri: ['https://example.com'],
-            signature: ['rule-X']
-        };
-        const result = buildObservableEntries([createMockHit({ howler: { id: 'h1' }, related })]);
-        const types = result.map(a => a.type).sort();
-        expect(types).toEqual(['hash', 'hosts', 'ids', 'signature', 'uri', 'user']);
-    });
-});
 // ---------------------------------------------------------------------------
 // Component rendering tests
 // ---------------------------------------------------------------------------
@@ -81,14 +15,29 @@ vi.mock('react-i18next', () => ({
 vi.mock('components/hooks/useMyApi', () => ({
     default: () => ({ dispatchApi: mockDispatchApi })
 }));
+vi.mock('api', () => ({
+    default: {
+        v2: {
+            search: {
+                post: vi.fn(() => Promise.resolve({ items: [] })),
+                facet: {
+                    post: vi.fn(() => Promise.resolve({}))
+                }
+            }
+        }
+    }
+}));
 vi.mock('../hooks/useCase', () => ({
     default: ({ case: c }) => ({ case: c, updateCase: vi.fn(), loading: false, missing: false })
 }));
+vi.mock('components/elements/PluginTypography', () => ({
+    default: ({ value }) => createElement('span', null, value)
+}));
 const mockCase = {
     case_id: 'case-001',
     items: [
-        { type: 'hit', value: 'hit-1' },
-        { type: 'event', value: 'obs-1' }
+        { type: 'hit', value: 'hit-1', path: 'alerts/analytic-1 (hit-1)' },
+        { type: 'observable', value: 'obs-1', path: 'observables/obs-1' }
     ]
 };
 const Wrapper = ({ children }) => createElement(MemoryRouter, { initialEntries: ['/cases/case-001/observables'] }, children);
@@ -101,7 +50,6 @@ describe('CaseObservables component', () => {
     it('renders skeletons while records are loading', () => {
         mockDispatchApi.mockReturnValue(new Promise(() => { })); // never resolves
         render(_jsx(CaseObservables, { case: mockCase }), { wrapper: Wrapper });
-        // 6 skeleton cards
         const skeletons = document.querySelectorAll('.MuiSkeleton-root');
         expect(skeletons.length).toBeGreaterThan(0);
     });
@@ -112,34 +60,39 @@ describe('CaseObservables component', () => {
         render(_jsx(CaseObservables, { case: mockCase }), { wrapper: Wrapper });
         await screen.findByText('page.cases.observables.empty');
     });
-    it('renders observable cards for extracted observables', async () => {
+    it('renders observables in a table for extracted observables', async () => {
         mockDispatchApi.mockResolvedValue({
             items: [{ howler: { id: 'hit-1' }, related: { ip: ['1.2.3.4'], user: ['alice'] } }]
         });
         render(_jsx(CaseObservables, { case: mockCase }), { wrapper: Wrapper });
         await screen.findByText('1.2.3.4');
         expect(screen.getByText('alice')).toBeTruthy();
+        // Table headers should be present
+        expect(screen.getByText('page.cases.observables.columns.type')).toBeTruthy();
+        expect(screen.getByText('page.cases.observables.columns.value')).toBeTruthy();
     });
-    it('renders a filter chip for each observable type present', async () => {
+    it('renders a filter chip for each observable type present when popper is opened', async () => {
         mockDispatchApi.mockResolvedValue({
             items: [{ howler: { id: 'hit-1' }, related: { ip: ['1.2.3.4'], user: ['alice'] } }]
         });
         render(_jsx(CaseObservables, { case: mockCase }), { wrapper: Wrapper });
-        await screen.findAllByText('page.cases.observables.type.ip');
-        expect(screen.getAllByText('page.cases.observables.type.ip')).toHaveLength(2);
-        expect(screen.getAllByText('page.cases.observables.type.user')).toHaveLength(2);
+        await screen.findByText('1.2.3.4');
+        // Open the type filter popper
+        await userEvent.click(screen.getByText('page.cases.observables.filter_by_type'));
+        // Filter chips visible in popper + table = at least 2 of each type
+        expect(screen.getAllByText('page.cases.observables.type.ip').length).toBeGreaterThanOrEqual(2);
+        expect(screen.getAllByText('page.cases.observables.type.user').length).toBeGreaterThanOrEqual(2);
     });
     it('filters observables when a type chip is clicked', async () => {
         mockDispatchApi.mockResolvedValue({
             items: [{ howler: { id: 'hit-1' }, related: { ip: ['1.2.3.4'], user: ['alice'] } }]
         });
         render(_jsx(CaseObservables, { case: mockCase }), { wrapper: Wrapper });
-        // Wait for both observables to appear
         await screen.findByText('1.2.3.4');
         expect(screen.getByText('alice')).toBeTruthy();
-        // Click the 'ip' filter chip
-        await userEvent.click(screen.getByRole('button', { name: 'page.cases.observables.type.ip' }));
-        // Alice (user) should be filtered out
+        // Open the type filter popper and click the first 'ip' chip (in the popper)
+        await userEvent.click(screen.getByText('page.cases.observables.filter_by_type'));
+        await userEvent.click(screen.getAllByText('page.cases.observables.type.ip')[0]);
         expect(screen.queryByText('alice')).toBeNull();
         expect(screen.getByText('1.2.3.4')).toBeTruthy();
     });
@@ -149,16 +102,68 @@ describe('CaseObservables component', () => {
         });
         render(_jsx(CaseObservables, { case: mockCase }), { wrapper: Wrapper });
         await screen.findByText('1.2.3.4');
-        const ipChip = screen.getByRole('button', { name: 'page.cases.observables.type.ip' });
+        // Open the type filter popper
+        await userEvent.click(screen.getByText('page.cases.observables.filter_by_type'));
+        const ipChip = screen.getAllByText('page.cases.observables.type.ip')[0];
         await userEvent.click(ipChip);
         await userEvent.click(ipChip);
         expect(screen.getByText('1.2.3.4')).toBeTruthy();
         expect(screen.getByText('alice')).toBeTruthy();
     });
-    it('renders nothing when the case has no hit/event items', async () => {
+    it('renders nothing when the case has no hit/observable items', async () => {
         const emptyCase = { case_id: 'case-002', items: [] };
         render(_jsx(CaseObservables, { case: emptyCase }), { wrapper: Wrapper });
         await screen.findByText('page.cases.observables.empty');
         expect(mockDispatchApi).not.toHaveBeenCalled();
     });
+    it('filters observables by search query', async () => {
+        mockDispatchApi.mockResolvedValue({
+            items: [{ howler: { id: 'hit-1' }, related: { ip: ['1.2.3.4'], user: ['alice'] } }]
+        });
+        render(_jsx(CaseObservables, { case: mockCase }), { wrapper: Wrapper });
+        await screen.findByText('1.2.3.4');
+        const searchInput = screen.getByPlaceholderText('page.cases.observables.search');
+        await userEvent.type(searchInput, 'alice');
+        expect(screen.queryByText('1.2.3.4')).toBeNull();
+        expect(screen.getByText('alice')).toBeTruthy();
+    });
+    it('renders origin filter chips inside popper', async () => {
+        mockDispatchApi.mockResolvedValue({
+            items: [{ howler: { id: 'hit-1' }, related: { ip: ['1.2.3.4'] } }]
+        });
+        render(_jsx(CaseObservables, { case: mockCase }), { wrapper: Wrapper });
+        await screen.findByText('1.2.3.4');
+        // Open the origin filter popper
+        await userEvent.click(screen.getByText('page.cases.observables.filter_by_origin'));
+        expect(screen.getByText('page.cases.observables.origin.hit')).toBeTruthy();
+        expect(screen.getByText('page.cases.observables.origin.event')).toBeTruthy();
+    });
+    it('renders escalation filter chips from facet response', async () => {
+        mockDispatchApi
+            .mockResolvedValueOnce({
+            items: [{ howler: { id: 'hit-1', escalation: 'evidence' }, related: { ip: ['1.2.3.4'] } }]
+        })
+            .mockResolvedValueOnce({
+            'howler.escalation': { evidence: 1 }
+        });
+        render(_jsx(CaseObservables, { case: mockCase }), { wrapper: Wrapper });
+        await screen.findByText('1.2.3.4');
+        await waitFor(() => {
+            // 'evidence' appears in the table escalation column
+            expect(screen.getByText('evidence')).toBeTruthy();
+        });
+    });
+    it('classifies roles and renders role chips in the table', async () => {
+        mockDispatchApi.mockResolvedValue({
+            items: [
+                {
+                    howler: { id: 'hit-1', outline: { threat: 'malware.exe' } },
+                    related: { hosts: ['malware.exe'] }
+                }
+            ]
+        });
+        render(_jsx(CaseObservables, { case: mockCase }), { wrapper: Wrapper });
+        await screen.findByText('malware.exe');
+        expect(screen.getByText('page.cases.observables.role.threat')).toBeTruthy();
+    });
 });

package/components/routes/cases/detail/observables/Observable.d.ts CHANGED Viewed

@@ -1,14 +1,8 @@
 import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
 import type { FC } from 'react';
-export type ObservableType = 'hash' | 'hosts' | 'ip' | 'user' | 'ids' | 'id' | 'uri' | 'signature';
-export interface ObservableEntry {
-    type: ObservableType;
-    value: string;
-    /** IDs of the hits/events this observable was seen in */
-    seenIn: string[];
-}
+import type { ObservableEntry } from '../types';
 declare const Observable: FC<{
-    asset: ObservableEntry;
+    observable: ObservableEntry;
     case: Case;
 }>;
 export default Observable;

package/components/routes/cases/detail/observables/Observable.js CHANGED Viewed

@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Card, CardContent, Chip, Stack, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
-const Observable = ({ asset, case: _case }) => {
+const Observable = ({ observable, case: _case }) => {
     const { t } = useTranslation();
-    return (_jsx(Card, { sx: { height: '100%' }, children: _jsx(CardContent, { children: _jsxs(Stack, { spacing: 1, children: [_jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [_jsx(Chip, { size: "small", label: t(`page.cases.observables.type.${asset.type}`), color: "primary", variant: "outlined" }), _jsx(Typography, { variant: "body2", sx: { wordBreak: 'break-all', fontFamily: 'monospace' }, children: asset.value })] }), asset.seenIn.length > 0 && (_jsxs(Stack, { spacing: 0.5, children: [_jsx(Typography, { variant: "caption", color: "text.secondary", children: t('page.cases.observables.seen_in') }), _jsx(Stack, { direction: "row", flexWrap: "wrap", gap: 0.5, children: asset.seenIn.map(id => {
+    return (_jsx(Card, { sx: { height: '100%' }, children: _jsx(CardContent, { children: _jsxs(Stack, { spacing: 1, children: [_jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [_jsx(Chip, { size: "small", label: t(`page.cases.observables.type.${observable.type}`), color: "primary", variant: "outlined" }), _jsx(Typography, { variant: "body2", sx: { wordBreak: 'break-all', fontFamily: 'monospace' }, children: observable.value })] }), observable.seenIn.length > 0 && (_jsxs(Stack, { spacing: 0.5, children: [_jsx(Typography, { variant: "caption", color: "text.secondary", children: t('page.cases.observables.seen_in') }), _jsx(Stack, { direction: "row", flexWrap: "wrap", gap: 0.5, children: observable.seenIn.map(id => {
                                     const entry = _case.items.find(item => item.value === id);
                                     return (_jsx(Chip, { clickable: true, size: "small", label: entry.path, variant: "outlined", component: Link, to: `/cases/${_case.case_id}/${entry.path}` }, id));
                                 }) })] }))] }) }) }));

package/components/routes/cases/detail/observables/Observable.test.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { render, screen } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 import { createMockCase } from '@cccsaurora/howler-ui/tests/utils';
 import { describe, expect, it } from 'vitest';
-import Observable, {} from './Observable';
+import Observable from './Observable';
 const makeObservable = (overrides = {}) => ({
     type: 'ip',
     value: '192.168.1.1',
@@ -16,7 +16,7 @@ describe('Observable', () => {
         it('renders the correct label for each type', () => {
             const cases = ['hash', 'hosts', 'ip', 'user', 'ids', 'id', 'uri', 'signature'];
             for (const type of cases) {
-                const { unmount } = render(_jsx(MemoryRouter, { children: _jsx(Observable, { asset: makeObservable({ type, value: 'x' }), case: createMockCase() }) }));
+                const { unmount } = render(_jsx(MemoryRouter, { children: _jsx(Observable, { observable: makeObservable({ type, value: 'x' }), case: createMockCase() }) }));
                 expect(screen.getByText(`page.cases.observables.type.${type}`)).toBeTruthy();
                 unmount();
             }
@@ -24,25 +24,25 @@ describe('Observable', () => {
     });
     describe('value display', () => {
         it('renders the asset value', () => {
-            render(_jsx(MemoryRouter, { children: _jsx(Observable, { asset: makeObservable({ value: '10.0.0.1' }), case: createMockCase() }) }));
+            render(_jsx(MemoryRouter, { children: _jsx(Observable, { observable: makeObservable({ value: '10.0.0.1' }), case: createMockCase() }) }));
             expect(screen.getByText('10.0.0.1')).toBeTruthy();
         });
         it('renders long hash values without truncation', () => {
             const hash = 'a'.repeat(64);
-            render(_jsx(MemoryRouter, { children: _jsx(Observable, { asset: makeObservable({ type: 'hash', value: hash }), case: createMockCase() }) }));
+            render(_jsx(MemoryRouter, { children: _jsx(Observable, { observable: makeObservable({ type: 'hash', value: hash }), case: createMockCase() }) }));
             expect(screen.getByText(hash)).toBeTruthy();
         });
     });
     describe('seen-in chips', () => {
         it('renders nothing when seenIn is empty', () => {
-            render(_jsx(MemoryRouter, { children: _jsx(Observable, { asset: makeObservable({ seenIn: [] }), case: createMockCase() }) }));
+            render(_jsx(MemoryRouter, { children: _jsx(Observable, { observable: makeObservable({ seenIn: [] }), case: createMockCase() }) }));
             expect(screen.queryByText('page.cases.observables.seen_in')).toBeNull();
         });
         it('renders "Seen in" label when seenIn has entries', () => {
             const _case = createMockCase({
                 items: [{ path: 'alerts/test-analytic (hit-001)', type: 'hit', value: 'hit-001' }]
             });
-            render(_jsx(MemoryRouter, { children: _jsx(Observable, { asset: makeObservable({ seenIn: ['hit-001'] }), case: _case }) }));
+            render(_jsx(MemoryRouter, { children: _jsx(Observable, { observable: makeObservable({ seenIn: ['hit-001'] }), case: _case }) }));
             expect(screen.getByText('page.cases.observables.seen_in')).toBeTruthy();
         });
         it('renders a chip labelled with entry.path for each seenIn id', () => {
@@ -53,7 +53,7 @@ describe('Observable', () => {
                     { path: 'alerts/other-analytic (hit-003)', type: 'hit', value: 'hit-003' }
                 ]
             });
-            render(_jsx(MemoryRouter, { children: _jsx(Observable, { asset: makeObservable({ seenIn: ['hit-001', 'obs-002', 'hit-003'] }), case: _case }) }));
+            render(_jsx(MemoryRouter, { children: _jsx(Observable, { observable: makeObservable({ seenIn: ['hit-001', 'obs-002', 'hit-003'] }), case: _case }) }));
             expect(screen.getByText('alerts/my-analytic (hit-001)')).toBeTruthy();
             expect(screen.getByText('events/obs-002')).toBeTruthy();
             expect(screen.getByText('alerts/other-analytic (hit-003)')).toBeTruthy();
@@ -63,7 +63,7 @@ describe('Observable', () => {
                 case_id: 'case-abc',
                 items: [{ path: 'alerts/my-analytic (hit-001)', type: 'hit', value: 'hit-001' }]
             });
-            render(_jsx(MemoryRouter, { children: _jsx(Observable, { asset: makeObservable({ seenIn: ['hit-001'] }), case: _case }) }));
+            render(_jsx(MemoryRouter, { children: _jsx(Observable, { observable: makeObservable({ seenIn: ['hit-001'] }), case: _case }) }));
             const link = screen.getByText('alerts/my-analytic (hit-001)').closest('a');
             expect(link).not.toBeNull();
             expect(link?.getAttribute('href')).toBe('/cases/case-abc/alerts/my-analytic (hit-001)');

package/components/routes/cases/detail/observables/ObservableTable.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
+import type { ObservableEntry } from '../types';
+declare const _default: import("react").NamedExoticComponent<{
+    observables: ObservableEntry[];
+    case: Case;
+}>;
+export default _default;

package/components/routes/cases/detail/observables/ObservableTable.js ADDED Viewed

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Chip, Stack, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TableSortLabel, Typography } from '@mui/material';
+import ChipPopper from '@cccsaurora/howler-ui/components/elements/display/ChipPopper';
+import PluginTypography from '@cccsaurora/howler-ui/components/elements/PluginTypography';
+import { memo, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import { ESCALATION_COLORS } from '@cccsaurora/howler-ui/utils/constants';
+const ROLE_COLORS = {
+    threat: 'error',
+    target: 'warning',
+    indicator: 'info'
+};
+const getSortValue = (observable, column) => {
+    switch (column) {
+        case 'type':
+            return observable.type;
+        case 'value':
+            return observable.value.toLowerCase();
+        case 'role':
+            return observable.role ?? '';
+        case 'seen_in':
+            return observable.seenIn.length;
+        case 'escalation':
+            return (observable.sources ?? [])
+                .map(s => s.escalation)
+                .filter(Boolean)
+                .join(',');
+        default:
+            return '';
+    }
+};
+const ObservableTable = ({ observables, case: _case }) => {
+    const { t } = useTranslation();
+    const [sortColumn, setSortColumn] = useState('type');
+    const [sortDirection, setSortDirection] = useState('asc');
+    const handleSort = (column) => {
+        if (sortColumn === column) {
+            setSortDirection(prev => (prev === 'asc' ? 'desc' : 'asc'));
+        }
+        else {
+            setSortColumn(column);
+            setSortDirection('asc');
+        }
+    };
+    const sortedObservables = useMemo(() => {
+        return [...observables].sort((a, b) => {
+            const aVal = getSortValue(a, sortColumn);
+            const bVal = getSortValue(b, sortColumn);
+            const cmp = typeof aVal === 'number' && typeof bVal === 'number' ? aVal - bVal : String(aVal).localeCompare(String(bVal));
+            return sortDirection === 'asc' ? cmp : -cmp;
+        });
+    }, [observables, sortColumn, sortDirection]);
+    return (_jsx(TableContainer, { children: _jsxs(Table, { size: "small", children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { sortDirection: sortColumn === 'type' ? sortDirection : false, children: _jsx(TableSortLabel, { active: sortColumn === 'type', direction: sortColumn === 'type' ? sortDirection : 'asc', onClick: () => handleSort('type'), children: t('page.cases.observables.columns.type') }) }), _jsx(TableCell, { sortDirection: sortColumn === 'value' ? sortDirection : false, children: _jsx(TableSortLabel, { active: sortColumn === 'value', direction: sortColumn === 'value' ? sortDirection : 'asc', onClick: () => handleSort('value'), children: t('page.cases.observables.columns.value') }) }), _jsx(TableCell, { sortDirection: sortColumn === 'role' ? sortDirection : false, children: _jsx(TableSortLabel, { active: sortColumn === 'role', direction: sortColumn === 'role' ? sortDirection : 'asc', onClick: () => handleSort('role'), children: t('page.cases.observables.columns.role') }) }), _jsx(TableCell, { align: "right", sortDirection: sortColumn === 'seen_in' ? sortDirection : false, children: _jsx(TableSortLabel, { active: sortColumn === 'seen_in', direction: sortColumn === 'seen_in' ? sortDirection : 'asc', onClick: () => handleSort('seen_in'), children: t('page.cases.observables.columns.seen_in') }) }), _jsx(TableCell, { children: t('page.cases.observables.columns.sources') }), _jsx(TableCell, { sortDirection: sortColumn === 'escalation' ? sortDirection : false, children: _jsx(TableSortLabel, { active: sortColumn === 'escalation', direction: sortColumn === 'escalation' ? sortDirection : 'asc', onClick: () => handleSort('escalation'), children: t('page.cases.observables.columns.escalation') }) })] }) }), _jsx(TableBody, { children: sortedObservables.map(observable => {
+                        const sources = observable.sources ?? [];
+                        const escalations = [...new Set(sources.map(s => s.escalation).filter(Boolean))];
+                        const linkedSources = sources.filter(source => source.path);
+                        return (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(Chip, { size: "small", label: t(`page.cases.observables.type.${observable.type}`), color: "primary", variant: "outlined" }) }), _jsx(TableCell, { sx: { maxWidth: 300 }, children: _jsx(PluginTypography, { value: observable.value, context: "table", variant: "body2", sx: { fontFamily: 'monospace', wordBreak: 'break-all' } }) }), _jsx(TableCell, { children: observable.role && (_jsx(Chip, { size: "small", label: t(`page.cases.observables.role.${observable.role}`), color: ROLE_COLORS[observable.role], variant: "outlined" })) }), _jsx(TableCell, { align: "right", children: _jsx(Typography, { variant: "body2", children: observable.seenIn.length }) }), _jsx(TableCell, { children: linkedSources.length === 0 ? null : linkedSources.length === 1 ? (_jsx(Chip, { clickable: true, size: "small", label: linkedSources[0].path, variant: "outlined", component: Link, to: `/cases/${_case.case_id}/${linkedSources[0].path}` })) : (_jsx(ChipPopper, { label: `${linkedSources[0].path} (+${linkedSources.length - 1})`, slotProps: { chip: { size: 'small', variant: 'outlined' } }, children: _jsx(Stack, { gap: 0.5, children: linkedSources.map(source => (_jsx(Chip, { clickable: true, size: "small", label: source.path, variant: "outlined", component: Link, to: `/cases/${_case.case_id}/${source.path}` }, source.id))) }) })) }), _jsx(TableCell, { children: _jsx(Stack, { direction: "row", flexWrap: "wrap", gap: 0.5, children: escalations.map(esc => (_jsx(Chip, { size: "small", label: esc, color: ESCALATION_COLORS[esc] ?? 'default' }, esc))) }) })] }, `${observable.type}:${observable.value}`));
+                    }) })] }) }));
+};
+export default memo(ObservableTable);

package/components/routes/cases/detail/types.d.ts ADDED Viewed

@@ -0,0 +1,23 @@
+export type ObservableType = 'hash' | 'hosts' | 'ip' | 'user' | 'ids' | 'id' | 'uri' | 'signature';
+export type ObservableRole = 'threat' | 'target' | 'indicator';
+export interface ObservableSource {
+  id: string;
+  type: 'hit' | 'observable' | 'case';
+  path?: string;
+  escalation?: string;
+}
+export interface ObservableEntry {
+  type: ObservableType;
+  value: string;
+  /** IDs of the hits/observables this observable was seen in */
+  seenIn: string[];
+  /** Resolved source metadata for each seenIn item */
+  sources?: ObservableSource[];
+  /** Classified role of this observable */
+  role?: ObservableRole;
+}
+export type OriginType = 'hit' | 'observable';

package/components/routes/cases/detail/utils.d.ts ADDED Viewed

@@ -0,0 +1,29 @@
+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 { Related } from '@cccsaurora/howler-ui/models/entities/generated/Related';
+import { type ObservableEntry, type ObservableRole, type ObservableSource, type ObservableType } from './types';
+/** All Related fields that carry asset values */
+export declare const OBSERVABLE_FIELDS: ObservableType[];
+/** Extract (type, value, seenInId) triples from a record's related field */
+export declare const extractObservables: (related: Related | undefined, recordId: string) => {
+    type: ObservableType;
+    value: string;
+    id: string;
+}[];
+/** Deduplicate and merge seenIn lists into a map keyed by `type:value` */
+export declare const buildObservableEntries: (records: Partial<Hit | Event>[]) => ObservableEntry[];
+/**
+ * Classify an asset's role based on case-level lists and per-record outline fields.
+ *
+ * Resolution order:
+ * 1. Case-level `threats[]`, `targets[]`, `indicators[]` (authoritative).
+ * 2. Per-record `outline.threat` / `outline.target` (exact match).
+ * 3. Per-record `outline.indicators[]`, `threat.indicator.ip/.description`.
+ * 4. Default: "indicator" — all assets come from `related.*` fields which are IOCs by nature.
+ *
+ * Comparison is case-insensitive and trimmed.
+ */
+export declare const classifyRole: (value: string, _case: Case, records: Partial<Hit | Event>[]) => ObservableRole;
+/** Resolve source metadata for an asset's seenIn IDs */
+export declare const resolveSources: (seenIn: string[], caseItems: Case["items"], escalationMap: Map<string, string>) => ObservableSource[];

package/components/routes/cases/detail/utils.js ADDED Viewed

@@ -0,0 +1,114 @@
+import {} from './types';
+/** All Related fields that carry asset values */
+export const OBSERVABLE_FIELDS = ['hash', 'hosts', 'ip', 'user', 'ids', 'id', 'uri', 'signature'];
+/** Extract (type, value, seenInId) triples from a record's related field */
+export const extractObservables = (related, recordId) => {
+    if (!related) {
+        return [];
+    }
+    const results = [];
+    for (const field of OBSERVABLE_FIELDS) {
+        const raw = related[field];
+        if (!raw) {
+            continue;
+        }
+        const values = Array.isArray(raw) ? raw : [raw];
+        for (const value of values) {
+            if (value) {
+                results.push({ type: field, value: String(value), id: recordId });
+            }
+        }
+    }
+    return results;
+};
+/** Deduplicate and merge seenIn lists into a map keyed by `type:value` */
+export const buildObservableEntries = (records) => {
+    const map = new Map();
+    for (const record of records) {
+        const related = record.related ?? record.related;
+        const recordId = record.howler?.id ?? record.howler?.id;
+        if (!recordId) {
+            continue;
+        }
+        for (const { type, value, id } of extractObservables(related, recordId)) {
+            const key = `${type}:${value}`;
+            if (!map.has(key)) {
+                map.set(key, { type, value, seenIn: [] });
+            }
+            const entry = map.get(key);
+            if (!entry.seenIn.includes(id)) {
+                entry.seenIn.push(id);
+            }
+        }
+    }
+    return Array.from(map.values());
+};
+/**
+ * Classify an asset's role based on case-level lists and per-record outline fields.
+ *
+ * Resolution order:
+ * 1. Case-level `threats[]`, `targets[]`, `indicators[]` (authoritative).
+ * 2. Per-record `outline.threat` / `outline.target` (exact match).
+ * 3. Per-record `outline.indicators[]`, `threat.indicator.ip/.description`.
+ * 4. Default: "indicator" — all assets come from `related.*` fields which are IOCs by nature.
+ *
+ * Comparison is case-insensitive and trimmed.
+ */
+export const classifyRole = (value, _case, records) => {
+    const normalized = value.trim().toLowerCase();
+    // Case-level classification (most authoritative)
+    if (_case.threats?.some(t => String(t).trim().toLowerCase() === normalized)) {
+        return 'threat';
+    }
+    if (_case.targets?.some(t => String(t).trim().toLowerCase() === normalized)) {
+        return 'target';
+    }
+    if (_case.indicators?.some(i => String(i).trim().toLowerCase() === normalized)) {
+        return 'indicator';
+    }
+    // Per-record outline checks
+    for (const record of records) {
+        const howlerOutline = record.howler?.outline;
+        if (howlerOutline) {
+            if (howlerOutline.threat && howlerOutline.threat.trim().toLowerCase() === normalized) {
+                return 'threat';
+            }
+            if (howlerOutline.target && howlerOutline.target.trim().toLowerCase() === normalized) {
+                return 'target';
+            }
+            if (howlerOutline.indicators?.some(ind => ind.trim().toLowerCase() === normalized)) {
+                return 'indicator';
+            }
+        }
+        const indicator = record.threat?.indicator;
+        if (indicator) {
+            const indicatorIp = indicator.ip?.trim().toLowerCase();
+            const indicatorDesc = indicator.description?.trim().toLowerCase();
+            if ((indicatorIp && indicatorIp === normalized) || (indicatorDesc && indicatorDesc === normalized)) {
+                return 'indicator';
+            }
+        }
+    }
+    // Default: assets from related.* are IOCs
+    return 'indicator';
+};
+/** Resolve source metadata for an asset's seenIn IDs */
+export const resolveSources = (seenIn, caseItems, escalationMap) => {
+    if (!caseItems?.length) {
+        return [];
+    }
+    return seenIn
+        .map(id => {
+        const item = caseItems.find(i => i.value === id);
+        if (!item) {
+            return null;
+        }
+        return {
+            id,
+            type: item.type,
+            path: item.path,
+            escalation: escalationMap.get(id)
+        };
+    })
+        .filter(Boolean);
+};

package/components/routes/cases/detail/utils.test.d.ts ADDED Viewed

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

package/components/routes/cases/detail/utils.test.js ADDED Viewed

@@ -0,0 +1,144 @@
+import { createMockCase, createMockEvent, createMockHit } from '@cccsaurora/howler-ui/tests/utils';
+import { describe, expect, it } from 'vitest';
+import { buildObservableEntries, classifyRole } from './utils';
+// ---------------------------------------------------------------------------
+// Pure logic tests — no React needed
+// ---------------------------------------------------------------------------
+describe('buildObservableEntries', () => {
+    it('returns an empty array for records with no related field', () => {
+        expect(buildObservableEntries([createMockHit({ howler: { id: 'h1' } })])).toEqual([]);
+    });
+    it('extracts a single IP from a hit', () => {
+        const result = buildObservableEntries([createMockHit({ howler: { id: 'h1' }, related: { ip: ['1.2.3.4'] } })]);
+        expect(result).toHaveLength(1);
+        expect(result[0]).toEqual({ type: 'ip', value: '1.2.3.4', seenIn: ['h1'] });
+    });
+    it('extracts multiple fields from a single record', () => {
+        const result = buildObservableEntries([
+            createMockHit({ howler: { id: 'h1' }, related: { ip: ['1.2.3.4'], user: ['alice'] } })
+        ]);
+        const types = result.map(a => a.type).sort();
+        expect(types).toEqual(['ip', 'user']);
+    });
+    it('deduplicates the same observable value across multiple records', () => {
+        const result = buildObservableEntries([
+            createMockHit({ howler: { id: 'h1' }, 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']);
+    });
+    it('keeps distinct observable values as separate entries', () => {
+        const result = buildObservableEntries([
+            createMockHit({ howler: { id: 'h1' }, related: { ip: ['1.2.3.4'] } }),
+            createMockHit({ howler: { id: 'h2' }, related: { ip: ['5.6.7.8'] } })
+        ]);
+        expect(result).toHaveLength(2);
+    });
+    it('does not duplicate seenIn ids when the same record appears twice for the same observable', () => {
+        const result = buildObservableEntries([
+            createMockHit({ howler: { id: 'h1' }, related: { ip: ['1.2.3.4'] } }),
+            createMockHit({ howler: { id: 'h1' }, related: { ip: ['1.2.3.4'] } })
+        ]);
+        expect(result[0].seenIn).toEqual(['h1']);
+    });
+    it('skips records with no howler.id', () => {
+        const noId = { related: { ip: ['1.2.3.4'] } };
+        expect(buildObservableEntries([noId])).toEqual([]);
+    });
+    it('handles the scalar `id` field on Related', () => {
+        const result = buildObservableEntries([createMockHit({ howler: { id: 'h1' }, related: { id: 'some-id' } })]);
+        expect(result).toHaveLength(1);
+        expect(result[0]).toEqual({ type: 'id', value: 'some-id', seenIn: ['h1'] });
+    });
+    it('handles array fields like hash, hosts, user, ids, uri, signature', () => {
+        const related = {
+            hash: ['abc123'],
+            hosts: ['host.example.com'],
+            user: ['bob'],
+            ids: ['guid-1'],
+            uri: ['https://example.com'],
+            signature: ['rule-X']
+        };
+        const result = buildObservableEntries([createMockHit({ howler: { id: 'h1' }, related })]);
+        const types = result.map(a => a.type).sort();
+        expect(types).toEqual(['hash', 'hosts', 'ids', 'signature', 'uri', 'user']);
+    });
+});
+// ---------------------------------------------------------------------------
+// classifyRole tests
+// ---------------------------------------------------------------------------
+describe('classifyRole', () => {
+    const emptyCase = createMockCase();
+    it('returns "threat" when value is in case.threats', () => {
+        const _case = createMockCase({ threats: ['malicious.exe'] });
+        const records = [createMockHit({ howler: { id: 'h1' } })];
+        expect(classifyRole('malicious.exe', _case, records)).toBe('threat');
+    });
+    it('returns "target" when value is in case.targets', () => {
+        const _case = createMockCase({ targets: ['server-01'] });
+        const records = [createMockHit({ howler: { id: 'h1' } })];
+        expect(classifyRole('server-01', _case, records)).toBe('target');
+    });
+    it('returns "indicator" when value is in case.indicators', () => {
+        const _case = createMockCase({ indicators: ['1.2.3.4'] });
+        const records = [createMockHit({ howler: { id: 'h1' } })];
+        expect(classifyRole('1.2.3.4', _case, records)).toBe('indicator');
+    });
+    it('returns "threat" when value matches howler.outline.threat', () => {
+        const records = [createMockHit({ howler: { id: 'h1', outline: { threat: 'malicious.exe' } } })];
+        expect(classifyRole('malicious.exe', emptyCase, records)).toBe('threat');
+    });
+    it('returns "threat" with case-insensitive matching', () => {
+        const records = [createMockHit({ howler: { id: 'h1', outline: { threat: 'Malicious.EXE' } } })];
+        expect(classifyRole('malicious.exe', emptyCase, records)).toBe('threat');
+    });
+    it('does not match threat by substring — only exact match', () => {
+        const records = [createMockHit({ howler: { id: 'h1', outline: { threat: 'evil.com dropped payload' } } })];
+        // No substring match, defaults to indicator
+        expect(classifyRole('evil.com', emptyCase, records)).toBe('indicator');
+    });
+    it('classifies as indicator when value is in outline.indicators but not in threat/target', () => {
+        const records = [
+            createMockHit({
+                howler: { id: 'h1', outline: { threat: 'actor-x', target: 'server-01', indicators: ['1.2.3.4'] } }
+            })
+        ];
+        expect(classifyRole('1.2.3.4', emptyCase, records)).toBe('indicator');
+    });
+    it('returns "target" when value matches howler.outline.target', () => {
+        const records = [createMockHit({ howler: { id: 'h1', outline: { target: 'server-01' } } })];
+        expect(classifyRole('server-01', emptyCase, records)).toBe('target');
+    });
+    it('returns "indicator" when value matches threat.indicator.ip', () => {
+        const records = [
+            createMockHit({
+                howler: { id: 'h1' },
+                threat: { indicator: { ip: '10.0.0.1' } }
+            })
+        ];
+        expect(classifyRole('10.0.0.1', emptyCase, records)).toBe('indicator');
+    });
+    it('returns "indicator" when value matches threat.indicator.description', () => {
+        const records = [
+            createMockHit({
+                howler: { id: 'h1' },
+                threat: { indicator: { description: 'suspicious-hash-abc123' } }
+            })
+        ];
+        expect(classifyRole('suspicious-hash-abc123', emptyCase, records)).toBe('indicator');
+    });
+    it('defaults to "indicator" when value has no specific classification', () => {
+        const records = [createMockHit({ howler: { id: 'h1' }, related: { ip: ['5.6.7.8'] } })];
+        expect(classifyRole('5.6.7.8', emptyCase, records)).toBe('indicator');
+    });
+    it('case-level threats take priority over per-record outline.target', () => {
+        const _case = createMockCase({ threats: ['dual-use.exe'] });
+        const records = [createMockHit({ howler: { id: 'h1', outline: { target: 'dual-use.exe' } } })];
+        expect(classifyRole('dual-use.exe', _case, records)).toBe('threat');
+    });
+    it('trims whitespace before comparing', () => {
+        const records = [createMockHit({ howler: { id: 'h1', outline: { threat: '  evil.com  ' } } })];
+        expect(classifyRole('evil.com', emptyCase, records)).toBe('threat');
+    });
+});

package/locales/en/translation.json CHANGED Viewed

@@ -414,8 +414,23 @@
     "page.cases.escalation": "Escalation",
     "page.cases.folder.drop.root": "Place here to move to root",
     "page.cases.observables": "Observables",
+    "page.cases.observables.columns.escalation": "Escalation",
+    "page.cases.observables.columns.role": "Role",
+    "page.cases.observables.columns.seen_in": "Seen In",
+    "page.cases.observables.columns.sources": "Sources",
+    "page.cases.observables.columns.type": "Type",
+    "page.cases.observables.columns.value": "Value",
     "page.cases.observables.empty": "No observables found.",
+    "page.cases.observables.filter_by_escalation": "Escalation",
+    "page.cases.observables.filter_by_origin": "Origin",
+    "page.cases.observables.filter_by_role": "Role",
     "page.cases.observables.filter_by_type": "Filter by type:",
+    "page.cases.observables.origin.event": "Event",
+    "page.cases.observables.origin.hit": "Hit",
+    "page.cases.observables.role.indicator": "Indicator",
+    "page.cases.observables.role.target": "Target",
+    "page.cases.observables.role.threat": "Threat",
+    "page.cases.observables.search": "Search observables...",
     "page.cases.observables.seen_in": "Seen in",
     "page.cases.observables.type.hash": "Hash",
     "page.cases.observables.type.hosts": "Host",

package/locales/fr/translation.json CHANGED Viewed

@@ -414,8 +414,23 @@
     "page.cases.escalation": "Escalade",
     "page.cases.folder.drop.root": "Déposer ici pour déplacer à la racine",
     "page.cases.observables": "Observables",
+    "page.cases.observables.columns.escalation": "Escalade",
+    "page.cases.observables.columns.role": "Rôle",
+    "page.cases.observables.columns.seen_in": "Vu dans",
+    "page.cases.observables.columns.sources": "Sources",
+    "page.cases.observables.columns.type": "Type",
+    "page.cases.observables.columns.value": "Valeur",
     "page.cases.observables.empty": "Aucun observable trouvé.",
+    "page.cases.observables.filter_by_escalation": "Escalade",
+    "page.cases.observables.filter_by_origin": "Origine",
+    "page.cases.observables.filter_by_role": "Rôle",
     "page.cases.observables.filter_by_type": "Filtrer par type :",
+    "page.cases.observables.origin.event": "Événement",
+    "page.cases.observables.origin.hit": "Alerte",
+    "page.cases.observables.role.indicator": "Indicateur",
+    "page.cases.observables.role.target": "Cible",
+    "page.cases.observables.role.threat": "Menace",
+    "page.cases.observables.search": "Rechercher des observables...",
     "page.cases.observables.seen_in": "Vu dans",
     "page.cases.observables.type.hash": "Hachage",
     "page.cases.observables.type.hosts": "Hôte",

package/package.json CHANGED Viewed

@@ -96,7 +96,7 @@
     "internal-slot": "1.0.7"
   },
   "type": "module",
-  "version": "2.19.0-cases.1129",
+  "version": "2.19.0-cases.1131",
   "exports": {
     "./i18n": "./i18n.js",
     "./index.css": "./index.css",