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

package/components/elements/display/QueryResultText.d.ts

@@ -2,5 +2,6 @@ import type { FC } from 'react';
 declare const QueryResultText: FC<{
     count: number;
     query: string;
+    mb?: number;
 }>;
 export default QueryResultText;

package/components/elements/display/QueryResultText.js

@@ -2,13 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
-const QueryResultText = ({ count, query }) => {
+const QueryResultText = ({ count, query, mb = 0.5 }) => {
     const { t } = useTranslation();
     return (_jsxs(Typography, { sx: theme => ({
             color: theme.palette.text.secondary,
             fontSize: '0.9em',
             fontStyle: 'italic',
-            mb: 0.5,
+            mb,
             '& a': { color: theme.palette.text.secondary }
         }), variant: "body2", children: [t('search.total', { count }), " ", _jsx(Link, { to: `/hits?query=${encodeURIComponent(query)}`, children: t('search.open') })] }));
 };

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

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

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

@@ -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/CaseRules.js

@@ -5,7 +5,6 @@ import api from '@cccsaurora/howler-ui/api';
 import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
 import ConfirmDeleteModal from '@cccsaurora/howler-ui/components/elements/display/modals/ConfirmDeleteModal';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
-import dayjs from 'dayjs';
 import { useCallback, useContext, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useOutletContext } from 'react-router-dom';
@@ -47,11 +46,10 @@ const CaseRules = ({ case: providedCase, caseId }) => {
         return null;
     }
     const rules = _case.rules ?? [];
-    return (_jsxs(Stack, { spacing: 2, sx: { p: 2, height: '100%', overflow: 'auto' }, children: [_jsx(Button, { id: "create-rule-button", variant: "outlined", startIcon: _jsx(Add, {}), onClick: () => setDialogOpen(true), sx: { alignSelf: 'end' }, children: t('page.cases.rules.create') }), _jsx(Card, { children: rules.length === 0 ? (_jsx(Typography, { m: 2, color: "textSecondary", textAlign: "center", children: t('page.cases.rules.empty') })) : (_jsx(TableContainer, { children: _jsxs(Table, { id: "rules-table", size: "small", children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { children: t('page.cases.rules.destination') }), _jsx(TableCell, { children: t('page.cases.rules.query') }), _jsx(TableCell, { children: t('hit.search.index') }), _jsx(TableCell, { children: t('page.cases.rules.timeframe') }), _jsx(TableCell, { children: t('page.cases.rules.author') }), _jsx(TableCell, { align: "center", children: t('enabled') }), _jsx(TableCell, { align: "right" })] }) }), _jsx(TableBody, { children: rules.map(rule => {
-                                    const _timeframe = rule.timeframe ? dayjs(rule.timeframe) : null;
-                                    return (_jsxs(TableRow, { id: `rule-row-${rule.rule_id}`, children: [_jsx(TableCell, { children: _jsx(Typography, { variant: "body2", sx: { fontFamily: 'monospace' }, children: rule.destination }) }), _jsx(TableCell, { children: _jsx(Typography, { variant: "body2", sx: {
-                                                        fontFamily: 'monospace'
-                                                    }, children: rule.query }) }), _jsx(TableCell, { children: _jsx(Stack, { direction: "row", spacing: 0.5, children: (rule.indexes ?? ['hit']).map(idx => (_jsx(Chip, { size: "small", label: idx, variant: "outlined" }, idx))) }) }), _jsx(TableCell, { children: _timeframe ? (_jsx(Chip, { size: "small", label: _timeframe.format('YYYY-MM-DD HH:mm'), color: _timeframe.isBefore(dayjs()) ? 'error' : 'default' })) : (_jsx(Chip, { size: "small", label: t('page.cases.rules.no_expiry'), color: "success" })) }), _jsx(TableCell, { children: _jsx(Typography, { variant: "body2", children: rule.author }) }), _jsx(TableCell, { align: "center", children: _jsx(Switch, { id: `rule-toggle-${rule.rule_id}`, checked: rule.enabled ?? true, onChange: (_e, checked) => handleToggleEnabled(rule.rule_id, checked), size: "small" }) }), _jsx(TableCell, { align: "right", children: _jsx(Tooltip, { title: t('delete'), children: _jsx(IconButton, { id: `rule-delete-${rule.rule_id}`, size: "small", onClick: () => handleDeleteRule(rule.rule_id), children: _jsx(Delete, { fontSize: "small" }) }) }) })] }, rule.rule_id));
-                                }) })] }) })) }), _jsx(CreateRuleDialog, { open: dialogOpen, onClose: () => setDialogOpen(false), onSubmit: handleCreateRule })] }));
+    return (_jsxs(Stack, { spacing: 2, sx: { p: 2, height: '100%', overflow: 'auto' }, children: [_jsx(Button, { id: "create-rule-button", variant: "outlined", startIcon: _jsx(Add, {}), onClick: () => setDialogOpen(true), sx: { alignSelf: 'end' }, children: t('page.cases.rules.create') }), _jsx(Card, { children: rules.length === 0 ? (_jsx(Typography, { m: 2, color: "textSecondary", textAlign: "center", children: t('page.cases.rules.empty') })) : (_jsx(TableContainer, { children: _jsxs(Table, { id: "rules-table", size: "small", children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { children: t('page.cases.rules.destination') }), _jsx(TableCell, { children: t('page.cases.rules.query') }), _jsx(TableCell, { children: t('hit.search.index') }), _jsx(TableCell, { children: t('page.cases.rules.timeframe') }), _jsx(TableCell, { children: t('page.cases.rules.author') }), _jsx(TableCell, { align: "center", children: t('enabled') }), _jsx(TableCell, { align: "right" })] }) }), _jsx(TableBody, { children: rules.map(rule => (_jsxs(TableRow, { id: `rule-row-${rule.rule_id}`, children: [_jsx(TableCell, { children: _jsx(Typography, { variant: "body2", sx: { fontFamily: 'monospace' }, children: rule.destination }) }), _jsx(TableCell, { children: _jsx(Typography, { variant: "body2", sx: {
+                                                    fontFamily: 'monospace'
+                                                }, children: rule.query }) }), _jsx(TableCell, { children: _jsx(Stack, { direction: "row", spacing: 0.5, children: (rule.indexes ?? ['hit']).map(idx => (_jsx(Chip, { size: "small", label: idx, variant: "outlined" }, idx))) }) }), _jsx(TableCell, { children: rule.timeframe != null ? (_jsx(Chip, { size: "small", label: rule.expire_after_resolved
+                                                    ? t('page.cases.rules.timeframe.after_resolved', { days: rule.timeframe })
+                                                    : t('page.cases.rules.timeframe.days', { days: rule.timeframe }), color: rule.expire_after_resolved ? 'info' : 'default' })) : (_jsx(Chip, { size: "small", label: t('page.cases.rules.no_expiry'), color: "success" })) }), _jsx(TableCell, { children: _jsx(Typography, { variant: "body2", children: rule.author }) }), _jsx(TableCell, { align: "center", children: _jsx(Switch, { id: `rule-toggle-${rule.rule_id}`, checked: rule.enabled ?? true, onChange: (_e, checked) => handleToggleEnabled(rule.rule_id, checked), size: "small" }) }), _jsx(TableCell, { align: "right", children: _jsx(Tooltip, { title: t('delete'), children: _jsx(IconButton, { id: `rule-delete-${rule.rule_id}`, size: "small", onClick: () => handleDeleteRule(rule.rule_id), children: _jsx(Delete, { fontSize: "small" }) }) }) })] }, rule.rule_id))) })] }) })) }), _jsx(CreateRuleDialog, { open: dialogOpen, onClose: () => setDialogOpen(false), onSubmit: handleCreateRule })] }));
 };
 export default CaseRules;

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

@@ -68,7 +68,8 @@ const makeRule = (overrides) => ({
     destination: 'alerts/{{howler.analytic}}',
     author: 'analyst1',
     enabled: true,
-    timeframe: '2026-06-01T00:00:00.000Z',
+    timeframe: 14,
+    expire_after_resolved: false,
     indexes: ['hit'],
     ...overrides
 });
@@ -104,6 +105,22 @@ describe('CaseRules', () => {
         render(_jsx(CaseRules, {}));
         expect(screen.getByText('page.cases.rules.no_expiry')).toBeInTheDocument();
     });
+    it('shows after-resolved chip when expire_after_resolved is true', () => {
+        mockCase.current = createMockCase({
+            case_id: 'case-001',
+            rules: [makeRule({ timeframe: 7, expire_after_resolved: true })]
+        });
+        render(_jsx(CaseRules, {}));
+        expect(screen.getByText('page.cases.rules.timeframe.after_resolved')).toBeInTheDocument();
+    });
+    it('shows days chip when expire_after_resolved is false', () => {
+        mockCase.current = createMockCase({
+            case_id: 'case-001',
+            rules: [makeRule({ timeframe: 14, expire_after_resolved: false })]
+        });
+        render(_jsx(CaseRules, {}));
+        expect(screen.getByText('page.cases.rules.timeframe.days')).toBeInTheDocument();
+    });
     it('renders enabled toggle for each rule', () => {
         mockCase.current = createMockCase({
             case_id: 'case-001',