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

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

@@ -1,17 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMonaco } from '@monaco-editor/react';
-import { Search } from '@mui/icons-material';
-import { Box, Button, Card, Checkbox, Dialog, DialogActions, DialogContent, DialogTitle, FormControlLabel, FormGroup, IconButton, Stack, TextField, Tooltip, Typography } from '@mui/material';
+import { CheckCircleOutline, FilterList, RadioButtonUnchecked, Search } from '@mui/icons-material';
+import { Autocomplete, Box, Button, Card, Chip, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, Stack, TextField, Tooltip, Typography } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
+import ChipPopper from '@cccsaurora/howler-ui/components/elements/display/ChipPopper';
 import QueryResultText from '@cccsaurora/howler-ui/components/elements/display/QueryResultText';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import QueryEditor from '@cccsaurora/howler-ui/components/routes/advanced/QueryEditor';
-import dayjs, {} from 'dayjs';
 import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { LocalizationProvider } from '@mui/x-date-pickers';
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
 const DEFAULT_TIMEFRAME_DAYS = 14;
 const PROMPT_CONTEXT = 'isRecordQuery && !suggestWidgetVisible && !renameInputVisible && !inSnippetMode && !quickFixWidgetVisible';
 const OPTIONS = {
@@ -26,6 +23,15 @@ const OPTIONS = {
     renderLineHighlight: 'none',
     overviewRulerLanes: 0
 };
+const INDEX_OPTIONS = ['hit', 'event'];
+const Subtitle = ({ i18nKey }) => {
+    const { t } = useTranslation();
+    return (_jsx(Typography, { sx: theme => ({
+            color: theme.palette.text.secondary,
+            fontSize: '0.9em',
+            fontStyle: 'italic'
+        }), variant: "body2", children: t(i18nKey) }));
+};
 const CreateRuleDialog = ({ open, onClose, onSubmit }) => {
     const { t } = useTranslation();
     const { dispatchApi } = useMyApi();
@@ -33,8 +39,9 @@ const CreateRuleDialog = ({ open, onClose, onSubmit }) => {
     const [query, setQuery] = useState('');
     const [destination, setDestination] = useState('');
     const [indexes, setIndexes] = useState(['hit']);
-    const [timeframe, setTimeframe] = useState(dayjs().add(DEFAULT_TIMEFRAME_DAYS, 'day'));
-    const [noExpiry, setNoExpiry] = useState(false);
+    const [timeframeDays, setTimeframeDays] = useState(DEFAULT_TIMEFRAME_DAYS);
+    const [hasExpiry, setHasExpiry] = useState(true);
+    const [expireAfterResolved, setExpireAfterResolved] = useState(false);
     const [loading, setLoading] = useState(false);
     const [searching, setSearching] = useState(false);
     const [response, setResponse] = useState(null);
@@ -42,8 +49,9 @@ const CreateRuleDialog = ({ open, onClose, onSubmit }) => {
         setQuery('');
         setDestination('');
         setIndexes(['hit']);
-        setTimeframe(dayjs().add(DEFAULT_TIMEFRAME_DAYS, 'day'));
-        setNoExpiry(false);
+        setTimeframeDays(DEFAULT_TIMEFRAME_DAYS);
+        setHasExpiry(true);
+        setExpireAfterResolved(false);
         setResponse(null);
     }, []);
     const handleSearch = useCallback(async () => {
@@ -73,7 +81,8 @@ const CreateRuleDialog = ({ open, onClose, onSubmit }) => {
             await onSubmit({
                 query: query.trim(),
                 destination: destination.trim(),
-                timeframe: noExpiry ? undefined : timeframe.toISOString(),
+                timeframe: hasExpiry ? timeframeDays : null,
+                expire_after_resolved: hasExpiry ? expireAfterResolved : false,
                 indexes
             });
             onClose();
@@ -81,7 +90,7 @@ const CreateRuleDialog = ({ open, onClose, onSubmit }) => {
         finally {
             setLoading(false);
         }
-    }, [query, destination, noExpiry, timeframe, indexes, onSubmit, onClose]);
+    }, [query, destination, hasExpiry, timeframeDays, expireAfterResolved, indexes, onSubmit, onClose]);
     const onMount = useCallback((ed) => {
         ed.createContextKey('isRecordQuery', true);
     }, []);
@@ -116,48 +125,21 @@ const CreateRuleDialog = ({ open, onClose, onSubmit }) => {
     }, [monaco, handleSearch]);
     return (_jsxs(Dialog, { open: open, onClose: onClose, maxWidth: "md", fullWidth: true, id: "create-rule-dialog", TransitionProps: { onEnter: handleOpen }, PaperProps: {
             elevation: 0
-        }, children: [_jsx(DialogTitle, { children: t('page.cases.rules.create') }), _jsx(DialogContent, { children: _jsxs(Stack, { spacing: 2, sx: { mt: 1 }, children: [_jsxs(Box, { children: [_jsx(Typography, { variant: "subtitle2", gutterBottom: true, children: t('page.cases.rules.query') }), _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [_jsx(Box, { sx: { border: 1, borderColor: 'divider', borderRadius: 1, flex: 1 }, children: _jsx(Card, { variant: "outlined", sx: theme => ({
-                                                    width: '100%',
-                                                    height: theme.spacing(5),
-                                                    p: 1,
-                                                    position: 'relative',
-                                                    overflow: 'visible',
-                                                    display: 'flex',
-                                                    alignItems: 'center',
-                                                    justifyContent: 'space-between',
-                                                    '& .monaco-editor': {
-                                                        position: 'absolute !important'
-                                                    },
-                                                    transition: theme.transitions.create('border-color')
-                                                }), onKeyDown: e => e.stopPropagation(), children: _jsx(QueryEditor, { query: query, setQuery: handleQueryChange, language: "lucene", id: "rule-query-editor", height: "20px", editorOptions: OPTIONS, onMount: onMount }) }) }), _jsx(Tooltip, { title: t('route.search'), children: _jsx("span", { children: _jsx(IconButton, { id: "rule-search-button", onClick: handleSearch, disabled: searching || !query.trim(), children: _jsx(Search, {}) }) }) })] }), response ? (_jsx(QueryResultText, { count: response.total, query: query })) : (_jsx(Typography, { sx: theme => ({
-                                        color: theme.palette.text.secondary,
-                                        fontSize: '0.9em',
-                                        fontStyle: 'italic',
-                                        mt: 0.5
-                                    }), variant: "body2", children: t('hit.search.prompt') }))] }), _jsx(TextField, { id: "rule-destination-input", label: t('page.cases.rules.destination'), value: destination, onChange: e => setDestination(e.target.value), fullWidth: true, placeholder: "alerts/{{howler.analytic}}", helperText: t('page.cases.rules.destination.help'), size: "small" }), _jsxs(Box, { children: [_jsx(Typography, { variant: "subtitle2", gutterBottom: true, children: t('page.cases.rules.indexes') }), _jsxs(FormGroup, { row: true, children: [_jsx(FormControlLabel, { control: _jsx(Checkbox, { id: "rule-index-hit", checked: indexes.includes('hit'), onChange: (_e, checked) => {
-                                                    setIndexes(prev => {
-                                                        if (checked) {
-                                                            return prev.includes('hit') ? prev : [...prev, 'hit'];
-                                                        }
-                                                        return prev.filter(i => i !== 'hit');
-                                                    });
-                                                } }), label: t('hit.search.index.hit') }), _jsx(FormControlLabel, { control: _jsx(Checkbox, { id: "rule-index-event", checked: indexes.includes('event'), onChange: (_e, checked) => {
-                                                    setIndexes(prev => {
-                                                        if (checked) {
-                                                            return prev.includes('event') ? prev : [...prev, 'event'];
-                                                        }
-                                                        return prev.filter(i => i !== 'event');
-                                                    });
-                                                } }), label: t('hit.search.index.event') })] })] }), _jsxs(Stack, { direction: "row", spacing: 2, alignItems: "center", children: [_jsx(LocalizationProvider, { dateAdapter: AdapterDayjs, children: _jsx(DateTimePicker, { slotProps: {
-                                            textField: {
-                                                id: 'rule-timeframe-input',
-                                                fullWidth: true,
-                                                size: 'small'
-                                            }
-                                        }, label: t('page.cases.rules.timeframe'), value: timeframe, onChange: nv => {
-                                            if (nv) {
-                                                setTimeframe(nv);
-                                            }
-                                        }, disabled: noExpiry, ampm: false, disablePast: true, sx: { flex: 1 } }) }), _jsx(FormControlLabel, { control: _jsx(Checkbox, { id: "rule-no-expiry-checkbox", checked: noExpiry, onChange: (_e, checked) => setNoExpiry(checked) }), label: t('page.cases.rules.no_expiry') })] })] }) }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: onClose, children: t('cancel') }), _jsx(Button, { id: "rule-submit-button", variant: "contained", onClick: handleSubmit, disabled: !response || loading || !query.trim() || !destination.trim() || indexes.length === 0, children: t('page.cases.rules.create') })] })] }));
+        }, children: [_jsx(DialogTitle, { children: t('page.cases.rules.create') }), _jsx(DialogContent, { children: _jsxs(Stack, { spacing: 3, sx: { mt: 1 }, children: [_jsxs(Box, { children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [_jsx(Typography, { variant: "subtitle2", gutterBottom: true, children: t('page.cases.rules.query') }), _jsx(ChipPopper, { icon: _jsx(FilterList, { fontSize: "small" }), label: indexes.map(opt => t(`hit.search.index.${opt}`)).join(', '), minWidth: "225px", slotProps: { chip: { size: 'small' } }, children: _jsx(Autocomplete, { size: "small", multiple: true, options: INDEX_OPTIONS, value: indexes, onChange: (_ev, values) => values.length > 0 && setIndexes(values), getOptionLabel: opt => t(`hit.search.index.${opt}`), renderInput: params => _jsx(TextField, { ...params }) }) })] }), _jsx(Stack, { direction: "row", alignItems: "center", spacing: 1, children: _jsx(Box, { sx: { border: 1, borderColor: 'divider', borderRadius: 1, flex: 1 }, children: _jsxs(Card, { variant: "outlined", sx: theme => ({
+                                                width: '100%',
+                                                height: theme.spacing(5),
+                                                py: 1,
+                                                pl: 1,
+                                                pr: 0.5,
+                                                position: 'relative',
+                                                overflow: 'visible',
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                                justifyContent: 'space-between',
+                                                '& .monaco-editor': {
+                                                    position: 'absolute !important'
+                                                },
+                                                transition: theme.transitions.create('border-color')
+                                            }), onKeyDown: e => e.stopPropagation(), children: [_jsx(QueryEditor, { query: query, setQuery: handleQueryChange, language: "lucene", id: "rule-query-editor", height: "20px", editorOptions: OPTIONS, onMount: onMount }), _jsx(Tooltip, { title: t('route.search'), children: _jsx("span", { children: _jsx(IconButton, { size: "small", id: "rule-search-button", onClick: handleSearch, disabled: searching || !query.trim(), children: _jsx(Search, {}) }) }) })] }) }) }), response ? (_jsx(QueryResultText, { count: response.total, query: query, mb: 0 })) : (_jsx(Subtitle, { i18nKey: "hit.search.prompt" }))] }), _jsxs(Box, { children: [_jsx(TextField, { id: "rule-destination-input", label: t('page.cases.rules.destination'), value: destination, onChange: e => setDestination(e.target.value), fullWidth: true, placeholder: "alerts/{{howler.analytic}}", size: "small" }), _jsx(Subtitle, { i18nKey: "page.cases.rules.destination.help" })] }), _jsxs(Stack, { children: [_jsx(TextField, { id: "rule-timeframe-input", type: "number", label: t('page.cases.rules.timeframe'), value: timeframeDays, onChange: e => setTimeframeDays(Math.max(1, parseInt(e.target.value, 10) || 1)), size: "small", disabled: !hasExpiry, sx: { flex: 1 }, InputProps: { inputProps: { min: 1 } } }), _jsx(Subtitle, { i18nKey: "page.cases.rules.timeframe.help" })] }), _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", flexWrap: "wrap", children: [_jsx(Chip, { id: "rule-no-expiry-checkbox", label: t('page.cases.rules.no_expiry'), icon: !hasExpiry ? _jsx(CheckCircleOutline, {}) : _jsx(RadioButtonUnchecked, {}), variant: "filled", color: !hasExpiry ? 'primary' : 'default', clickable: true, disabled: expireAfterResolved, onClick: () => setHasExpiry(prev => !prev) }), _jsx(Chip, { id: "rule-expire-after-resolved", label: t('page.cases.rules.expire_after_resolved'), icon: expireAfterResolved ? _jsx(CheckCircleOutline, {}) : _jsx(RadioButtonUnchecked, {}), variant: "filled", color: expireAfterResolved ? 'primary' : 'default', clickable: hasExpiry, onClick: () => setExpireAfterResolved(prev => !prev), disabled: !hasExpiry })] })] }) }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: onClose, children: t('cancel') }), _jsx(Button, { id: "rule-submit-button", variant: "contained", onClick: handleSubmit, disabled: !response || loading || !query.trim() || !destination.trim() || indexes.length === 0, children: t('page.cases.rules.create') })] })] }));
 };
 export default CreateRuleDialog;

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

@@ -35,8 +35,8 @@ vi.mock('@mui/x-date-pickers/AdapterDayjs', () => ({
     AdapterDayjs: class {
     }
 }));
-vi.mock('@mui/x-date-pickers/DateTimePicker', () => ({
-    DateTimePicker: ({ label, disabled }) => (_jsx("input", { id: "rule-timeframe-input", "aria-label": label, disabled: disabled, readOnly: true }))
+vi.mock('components/elements/display/ChipPopper', () => ({
+    default: ({ children }) => _jsx(_Fragment, { children: children })
 }));
 import api from '@cccsaurora/howler-ui/api';
 import CreateRuleDialog from './CreateRuleDialog';
@@ -60,8 +60,8 @@ describe('CreateRuleDialog', () => {
         expect(screen.getByTestId('rule-destination-input')).toBeInTheDocument();
         expect(screen.getByTestId('rule-timeframe-input')).toBeInTheDocument();
         expect(screen.getByTestId('rule-no-expiry-checkbox')).toBeInTheDocument();
-        expect(screen.getByTestId('rule-index-hit')).toBeInTheDocument();
-        expect(screen.getByTestId('rule-index-event')).toBeInTheDocument();
+        expect(screen.getByTestId('rule-expire-after-resolved')).toBeInTheDocument();
+        expect(screen.getByRole('combobox')).toBeInTheDocument();
     });
     it('disables submit when query is empty', () => {
         render(_jsx(CreateRuleDialog, { ...defaultProps }));
@@ -149,7 +149,7 @@ describe('CreateRuleDialog', () => {
         expect(screen.getByText('hit.search.prompt')).toBeInTheDocument();
         expect(screen.queryByTestId('query-result-text')).not.toBeInTheDocument();
     });
-    it('includes timeframe as ISO string when no expiry is unchecked', async () => {
+    it('includes timeframe as number when expiry is enabled', async () => {
         const user = userEvent.setup();
         const onSubmit = vi.fn().mockResolvedValue(undefined);
         mockDispatchApi.mockResolvedValueOnce({ items: [], total: 1, offset: 0, rows: 0 });
@@ -169,7 +169,7 @@ describe('CreateRuleDialog', () => {
         });
         await waitFor(() => {
             expect(onSubmit).toHaveBeenCalledWith(expect.objectContaining({
-                timeframe: expect.any(String)
+                timeframe: 14
             }));
         });
     });
@@ -198,25 +198,18 @@ describe('CreateRuleDialog', () => {
             expect(onSubmit).toHaveBeenCalledWith(expect.objectContaining({
                 query: 'event.kind:alert',
                 destination: 'alerts/incoming',
-                timeframe: undefined
+                timeframe: null
             }));
         });
     });
-    it('defaults to hit index checked', () => {
-        render(_jsx(CreateRuleDialog, { ...defaultProps }));
-        const hitCheckbox = screen.getByTestId('rule-index-hit');
-        const eventCheckbox = screen.getByTestId('rule-index-event');
-        expect(hitCheckbox).toBeChecked();
-        expect(eventCheckbox).not.toBeChecked();
-    });
-    it('includes both indexes when both are selected', async () => {
+    it('includes expire_after_resolved when checkbox is checked', async () => {
         const user = userEvent.setup();
         const onSubmit = vi.fn().mockResolvedValue(undefined);
         mockDispatchApi.mockResolvedValueOnce({ items: [], total: 1, offset: 0, rows: 0 });
         api.search.hit.post.mockReturnValue('search-request');
         render(_jsx(CreateRuleDialog, { ...defaultProps, onSubmit: onSubmit }));
         await act(async () => {
-            await user.click(screen.getByTestId('rule-index-event'));
+            await user.click(screen.getByTestId('rule-expire-after-resolved'));
         });
         await act(async () => {
             await user.type(screen.getByTestId('rule-query-editor'), 'event.kind:alert');
@@ -232,15 +225,31 @@ describe('CreateRuleDialog', () => {
         });
         await waitFor(() => {
             expect(onSubmit).toHaveBeenCalledWith(expect.objectContaining({
-                indexes: expect.arrayContaining(['hit', 'event'])
+                timeframe: 14,
+                expire_after_resolved: true
             }));
         });
     });
-    it('disables submit when no indexes are selected', async () => {
+    it('defaults to hit index checked', () => {
+        render(_jsx(CreateRuleDialog, { ...defaultProps }));
+        // With 'hit' selected by default, its chip appears in the Autocomplete input area
+        expect(screen.getAllByText('hit.search.index.hit').length).toBeGreaterThan(0);
+        // 'event' is not selected, so its chip should not appear
+        expect(screen.queryByText('hit.search.index.event')).not.toBeInTheDocument();
+    });
+    it('includes both indexes when both are selected', async () => {
         const user = userEvent.setup();
+        const onSubmit = vi.fn().mockResolvedValue(undefined);
         mockDispatchApi.mockResolvedValueOnce({ items: [], total: 1, offset: 0, rows: 0 });
         api.search.hit.post.mockReturnValue('search-request');
-        render(_jsx(CreateRuleDialog, { ...defaultProps }));
+        render(_jsx(CreateRuleDialog, { ...defaultProps, onSubmit: onSubmit }));
+        // Open the index Autocomplete and select 'event'
+        await act(async () => {
+            await user.click(screen.getByRole('combobox'));
+        });
+        await act(async () => {
+            await user.click(screen.getByRole('option', { name: 'hit.search.index.event' }));
+        });
         await act(async () => {
             await user.type(screen.getByTestId('rule-query-editor'), 'event.kind:alert');
         });
@@ -250,10 +259,26 @@ describe('CreateRuleDialog', () => {
         await act(async () => {
             await user.type(screen.getByTestId('rule-destination-input'), 'alerts/incoming');
         });
-        // Uncheck the default hit index
         await act(async () => {
-            await user.click(screen.getByTestId('rule-index-hit'));
+            await user.click(screen.getByTestId('rule-submit-button'));
         });
-        expect(screen.getByTestId('rule-submit-button')).toBeDisabled();
+        await waitFor(() => {
+            expect(onSubmit).toHaveBeenCalledWith(expect.objectContaining({
+                indexes: expect.arrayContaining(['hit', 'event'])
+            }));
+        });
+    });
+    it('prevents deselecting the last index', async () => {
+        const user = userEvent.setup();
+        render(_jsx(CreateRuleDialog, { ...defaultProps }));
+        // 'hit' is selected by default; open the dropdown and try to deselect it
+        await act(async () => {
+            await user.click(screen.getByRole('combobox'));
+        });
+        await act(async () => {
+            await user.click(screen.getByRole('option', { name: 'hit.search.index.hit' }));
+        });
+        // 'hit' should still be selected because deselecting the last index is prevented
+        expect(screen.getAllByText('hit.search.index.hit').length).toBeGreaterThan(0);
     });
 });

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

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

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

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

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

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

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

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

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

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