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

package/api/v2/fuzzy.d.ts

@@ -0,0 +1,17 @@
+import type { HowlerSearchResponse } from '@cccsaurora/howler-ui/api/search';
+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';
+export type FuzzySearchRequest = {
+    query: string;
+    indexes?: string[];
+    filters?: string[];
+    offset?: number;
+    rows?: number;
+    track_total_hits?: boolean;
+};
+export type FuzzySearchItem<T = Hit | Event | Case> = T & {
+    _score: number;
+};
+export declare const uri: () => string;
+export declare const post: (request: FuzzySearchRequest) => Promise<HowlerSearchResponse<FuzzySearchItem>>;

package/api/v2/fuzzy.js

@@ -0,0 +1,11 @@
+import { hpost, joinAllUri } from '@cccsaurora/howler-ui/api';
+import { uri as parentUri } from '@cccsaurora/howler-ui/api/v2';
+export const uri = () => {
+    return joinAllUri(parentUri(), 'fuzzy');
+};
+export const post = (request) => {
+    if (!request.query || !request.query.trim()) {
+        throw new Error('Search query is required.');
+    }
+    return hpost(joinAllUri(uri(), 'search'), request);
+};

package/api/v2/index.d.ts

@@ -1,4 +1,5 @@
 import * as case_ from '@cccsaurora/howler-ui/api/v2/case';
+import * as fuzzy from '@cccsaurora/howler-ui/api/v2/fuzzy';
 import * as search from '@cccsaurora/howler-ui/api/v2/search';
 export declare const uri: () => string;
-export { case_ as case, search };
+export { case_ as case, fuzzy, search };

package/api/v2/index.js

@@ -1,6 +1,7 @@
 import * as case_ from '@cccsaurora/howler-ui/api/v2/case';
+import * as fuzzy from '@cccsaurora/howler-ui/api/v2/fuzzy';
 import * as search from '@cccsaurora/howler-ui/api/v2/search';
 export const uri = () => {
     return '/api/v2';
 };
-export { case_ as case, search };
+export { case_ as case, fuzzy, search };

package/components/app/App.js

@@ -28,9 +28,10 @@ import AnalyticDetails from '@cccsaurora/howler-ui/components/routes/analytics/A
 import AnalyticSearch from '@cccsaurora/howler-ui/components/routes/analytics/AnalyticSearch';
 import CaseViewer from '@cccsaurora/howler-ui/components/routes/cases/CaseViewer';
 import Cases from '@cccsaurora/howler-ui/components/routes/cases/Cases';
-import CaseAssets from '@cccsaurora/howler-ui/components/routes/cases/detail/CaseAssets';
 import CaseDashboard from '@cccsaurora/howler-ui/components/routes/cases/detail/CaseDashboard';
+import CaseObservables from '@cccsaurora/howler-ui/components/routes/cases/detail/CaseObservables';
 import CaseRules from '@cccsaurora/howler-ui/components/routes/cases/detail/CaseRules';
+import CaseSearch from '@cccsaurora/howler-ui/components/routes/cases/detail/CaseSearch';
 import CaseTimeline from '@cccsaurora/howler-ui/components/routes/cases/detail/CaseTimeline';
 import ItemPage from '@cccsaurora/howler-ui/components/routes/cases/detail/ItemPage';
 import DossierEditor from '@cccsaurora/howler-ui/components/routes/dossiers/DossierEditor';
@@ -207,15 +208,15 @@ const createRouter = () => createBrowserRouter([
             },
             {
                 path: 'cases/:id',
-                element: (_jsx(ParameterProvider, { children: _jsx(CaseViewer, {}) })),
+                element: (_jsx(ParameterProvider, { defaults: { query: '', indexes: ['hit', 'event', 'case'] }, children: _jsx(CaseViewer, {}) })),
                 children: [
                     {
                         index: true,
                         element: _jsx(CaseDashboard, {})
                     },
                     {
-                        path: 'assets',
-                        element: _jsx(CaseAssets, {})
+                        path: 'observables',
+                        element: _jsx(CaseObservables, {})
                     },
                     {
                         path: 'timeline',
@@ -225,6 +226,10 @@ const createRouter = () => createBrowserRouter([
                         path: 'rules',
                         element: _jsx(CaseRules, {})
                     },
+                    {
+                        path: 'search',
+                        element: _jsx(CaseSearch, {})
+                    },
                     {
                         path: '*',
                         element: _jsx(ItemPage, {})

package/components/app/providers/ParameterProvider.d.ts

@@ -32,10 +32,25 @@ export interface ParameterContextType {
     setView: (index: number, view: string) => void;
     resetViews: () => void;
 }
+interface SearchValues {
+    selected: string;
+    query: string;
+    sort: string;
+    span: string;
+    indexes: SearchIndex[];
+    filters: string[];
+    views: string[];
+    startDate: string;
+    endDate: string;
+    offset: number;
+    trackTotalHits: boolean;
+}
 export declare const ParameterContext: import("use-context-selector").Context<ParameterContextType>;
 /**
  * Context responsible for tracking updates to query operations in hit and view search.
  */
-declare const ParameterProvider: FC<PropsWithChildren>;
+declare const ParameterProvider: FC<PropsWithChildren<{
+    defaults?: Partial<SearchValues>;
+}>>;
 export declare const useParameterContextSelector: <Selected>(selector: (value: ParameterContextType) => Selected) => Selected;
 export default ParameterProvider;

package/components/app/providers/ParameterProvider.js

@@ -24,7 +24,7 @@ const PARAM_MAPPINGS = [
 const ARRAY_PARAMS = [
     { urlKey: 'filter', stateKey: 'filters' },
     { urlKey: 'view', stateKey: 'views' },
-    { urlKey: 'index', stateKey: 'indexes', default: DEFAULT_VALUES.indexes }
+    { urlKey: 'index', stateKey: 'indexes' }
 ];
 const ARRAY_URL_KEYS = new Set(ARRAY_PARAMS.map(p => p.urlKey));
 const WRITE_THROTTLER = new Throttler(100);
@@ -85,7 +85,7 @@ const useListHandlers = (key, _setValues) => {
 /**
  * Synchronizes SearchValues state with the URL search string, and vice-versa.
  */
-const useUrlSync = (values, _setValues, params, setParams, pathname, search, routeId) => {
+const useUrlSync = (values, defaults, _setValues, params, setParams, pathname, search, routeId) => {
     const getUrlFromState = useCallback(() => {
         const changes = {};
         // Scalar params: write if changed from URL, remove if back to default
@@ -94,20 +94,21 @@ const useUrlSync = (values, _setValues, params, setParams, pathname, search, rou
             const urlValue = params.get(urlKey);
             if (stateValue === urlValue)
                 return;
-            if (params.has(urlKey) && stateValue === DEFAULT_VALUES[stateKey]) {
+            if (params.has(urlKey) && stateValue === defaults[stateKey]) {
                 changes[urlKey] = null; // remove
             }
-            else if (stateValue !== DEFAULT_VALUES[stateKey]) {
+            else if (stateValue !== defaults[stateKey]) {
                 changes[urlKey] = stateValue; // write
             }
         });
         // Array params: skip when state equals default and URL is already empty
-        ARRAY_PARAMS.forEach(({ urlKey, stateKey, default: def }) => {
+        ARRAY_PARAMS.forEach(({ urlKey, stateKey }) => {
             const stateArr = values[stateKey];
             const urlArr = params.getAll(urlKey);
+            const defaultValue = stateKey === 'indexes' ? defaults.indexes : undefined;
             if (isEqual(stateArr, urlArr))
                 return;
-            const isDefault = def ? isEqual(stateArr, def) : stateArr.length === 0;
+            const isDefault = defaultValue ? isEqual(stateArr, defaultValue) : stateArr.length === 0;
             if (!isDefault) {
                 changes[urlKey] = stateArr.length === 0 ? null : stateArr;
             }
@@ -128,20 +129,21 @@ const useUrlSync = (values, _setValues, params, setParams, pathname, search, rou
         }
         // Drop scalar entries that already match the URL
         return omitBy(changes, (val, key) => !ARRAY_URL_KEYS.has(key) && val == params.get(key));
-    }, [values, params, pathname]);
+    }, [values, defaults, params, pathname]);
     const getStateFromUrl = useCallback(() => {
         const changes = {};
         // Scalar params: fall back to default when absent from URL
         PARAM_MAPPINGS.forEach(([urlKey, stateKey]) => {
-            const urlValue = params.has(urlKey) ? params.get(urlKey) : (DEFAULT_VALUES[stateKey] ?? undefined);
+            const urlValue = params.has(urlKey) ? params.get(urlKey) : (defaults[stateKey] ?? undefined);
             if (urlValue !== values[stateKey]) {
                 changes[stateKey] = urlValue;
             }
         });
         // Array params: fall back to their declared default when absent from URL
-        ARRAY_PARAMS.forEach(({ urlKey, stateKey, default: def }) => {
+        ARRAY_PARAMS.forEach(({ urlKey, stateKey }) => {
             const raw = params.getAll(urlKey);
-            const resolved = (isEmpty(raw) && def ? def : uniq(raw));
+            const defaultValue = stateKey === 'indexes' ? defaults.indexes : undefined;
+            const resolved = (isEmpty(raw) && defaultValue ? defaultValue : uniq(raw));
             if (!isEqual(resolved, values[stateKey])) {
                 changes[stateKey] = resolved;
             }
@@ -155,7 +157,7 @@ const useUrlSync = (values, _setValues, params, setParams, pathname, search, rou
         if (urlOffset !== values.offset)
             changes.offset = urlOffset;
         return omitBy(omitBy(changes, isUndefined), (val, key) => val == values[key]);
-    }, [values, params, pathname, routeId]);
+    }, [values, defaults, params, pathname, routeId]);
     // State → URL
     useEffect(() => {
         const changes = getUrlFromState();
@@ -191,19 +193,18 @@ const useUrlSync = (values, _setValues, params, setParams, pathname, search, rou
 /**
  * Context responsible for tracking updates to query operations in hit and view search.
  */
-const ParameterProvider = ({ children }) => {
+const ParameterProvider = ({ children, defaults: _defaults = {} }) => {
     const location = useLocation();
     const routeParams = useParams();
     const [params, setParams] = useSearchParams();
+    const defaults = useMemo(() => ({ ...DEFAULT_VALUES, ..._defaults }), [_defaults]);
     const pendingChanges = useRef({});
     const [values, _setValues] = useState({
         selected: getSelectedValue(params, location.pathname, routeParams.id),
-        query: params.get('query') ?? DEFAULT_VALUES.query,
-        sort: params.get('sort') ?? DEFAULT_VALUES.sort,
-        span: params.get('span') ?? DEFAULT_VALUES.span,
-        indexes: params.has('index')
-            ? uniq(params.getAll('index')).filter(identity)
-            : DEFAULT_VALUES.indexes,
+        query: params.get('query') ?? defaults.query,
+        sort: params.get('sort') ?? defaults.sort,
+        span: params.get('span') ?? defaults.span,
+        indexes: params.has('index') ? uniq(params.getAll('index')).filter(identity) : defaults.indexes,
         filters: params.getAll('filter'),
         views: params.getAll('view'),
         startDate: params.get('start_date'),
@@ -212,7 +213,7 @@ const ParameterProvider = ({ children }) => {
         trackTotalHits: (params.get('track_total_hits') ?? 'false') !== 'false'
     });
     // TODO: SELECTING A BUNDLE STILL CAUSES A FREAKOUT
-    useUrlSync(values, _setValues, params, setParams, location.pathname, location.search, routeParams.id);
+    useUrlSync(values, defaults, _setValues, params, setParams, location.pathname, location.search, routeParams.id);
     const set = useCallback((key) => (value) => {
         if (value === values[key])
             return;
@@ -220,7 +221,7 @@ const ParameterProvider = ({ children }) => {
             pendingChanges.current.selected = value;
         }
         else {
-            pendingChanges.current[key] = value ?? DEFAULT_VALUES[key] ?? null;
+            pendingChanges.current[key] = value ?? defaults[key] ?? null;
         }
         if (key === 'span' && typeof value === 'string' && !value.endsWith('custom')) {
             pendingChanges.current.startDate = null;
@@ -230,7 +231,7 @@ const ParameterProvider = ({ children }) => {
             _setValues(c => ({ ...c, ...pendingChanges.current }));
             pendingChanges.current = {};
         });
-    }, [values]);
+    }, [values, defaults]);
     const setOffset = useCallback((_offset) => _setValues(c => ({ ...c, offset: parseOffset(_offset) })), []);
     const setCustomSpan = useCallback((startDate, endDate) => _setValues(c => ({ ...c, startDate, endDate })), []);
     const filters = useListHandlers('filters', _setValues);
@@ -252,7 +253,7 @@ const ParameterProvider = ({ children }) => {
             removeIndex: indexes.remove,
             setIndex: indexes.setAt,
             setIndexes: indexes.setAll,
-            resetIndexes: useCallback(() => indexes.reset(DEFAULT_VALUES.indexes), [indexes]),
+            resetIndexes: useCallback(() => indexes.reset(defaults.indexes), [indexes, defaults]),
             addView: views.add,
             removeView: views.remove,
             setView: views.setAt,

package/components/app/providers/ParameterProvider.test.js

@@ -579,6 +579,18 @@ describe('ParameterContext', () => {
             const hook = renderHook(() => useContextSelector(ParameterContext, ctx => ctx.selected), { wrapper: Wrapper });
             expect(hook.result.current).toBe('different_hit_id');
         });
+        it('should not sync query when default query differs from global default', async () => {
+            const CustomDefaultWrapper = ({ children }) => {
+                return _jsx(ParameterProvider, { defaults: { query: '' }, children: children });
+            };
+            const hook = renderHook(() => useContextSelector(ParameterContext, ctx => ctx.query), {
+                wrapper: CustomDefaultWrapper
+            });
+            expect(hook.result.current).toBe('');
+            await waitFor(() => {
+                expect(mockSetParams).not.toHaveBeenCalled();
+            });
+        });
     });
     describe('useParameterContextSelector', () => {
         it('should allow selecting specific values from context', async () => {

package/components/elements/addons/search/SearchTotal.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Typography } from '@mui/material';
 import { Trans } from 'react-i18next';
 const SearchTotal = ({ total, offset, pageLength, ...typographyProps }) => {
-    return (_jsx(Typography, { ...typographyProps, children: total <= 1 ? (_jsx(Trans, { i18nKey: "search.result.showing.single", values: {
+    return (_jsx(Typography, { ...typographyProps, children: total < 1 ? (_jsx(Trans, { i18nKey: "search.result.showing.single", values: {
                 total: total
             } })) : (_jsx(Trans, { i18nKey: "search.result.showing", values: {
                 total: total,

package/components/elements/addons/search/SearchTotal.test.js

@@ -15,9 +15,9 @@ describe('SearchTotal', () => {
             render(_jsx(SearchTotal, { total: 0, offset: 0, pageLength: 0 }), { wrapper: Wrapper });
             expect(screen.getByText('No results')).toBeInTheDocument();
         });
-        it('renders "No results" text when total is 1', () => {
+        it('renders "Showing 1 to 1 of 1 results" text when total is 1', () => {
             render(_jsx(SearchTotal, { total: 1, offset: 0, pageLength: 1 }), { wrapper: Wrapper });
-            expect(screen.getByText('No results')).toBeInTheDocument();
+            expect(screen.getByText('Showing 1 to 1 of 1 results')).toBeInTheDocument();
         });
         it('renders range text when total is greater than 1', () => {
             render(_jsx(SearchTotal, { total: 50, offset: 0, pageLength: 25 }), { wrapper: Wrapper });

package/components/elements/search/FuzzySearchBar.d.ts

@@ -0,0 +1,7 @@
+import type { FC } from 'react';
+export type FuzzySearchBarProps = {
+    onSearch: (query: string, indexes: string[]) => void;
+    loading?: boolean;
+};
+declare const FuzzySearchBar: FC<FuzzySearchBarProps>;
+export default FuzzySearchBar;

package/components/elements/search/FuzzySearchBar.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Search } from '@mui/icons-material';
+import { CircularProgress, IconButton, InputAdornment, Stack, TextField } from '@mui/material';
+import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
+import IndexPicker from '@cccsaurora/howler-ui/components/routes/hits/search/shared/IndexPicker';
+import { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useContextSelector } from 'use-context-selector';
+const FuzzySearchBar = ({ onSearch, loading = false }) => {
+    const { t } = useTranslation();
+    const indexes = useContextSelector(ParameterContext, ctx => ctx.indexes);
+    const defaultQuery = useContextSelector(ParameterContext, ctx => ctx.query);
+    const [query, _setQuery] = useState(defaultQuery ?? '');
+    const setQuery = useContextSelector(ParameterContext, ctx => ctx.setQuery);
+    const handleQueryChange = useCallback((e) => {
+        _setQuery(e.target.value);
+    }, [_setQuery]);
+    const handleSearch = useCallback(() => {
+        if (query.trim()) {
+            setQuery(query.trim());
+            onSearch(query.trim(), indexes);
+        }
+    }, [query, setQuery, onSearch, indexes]);
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === 'Enter') {
+            handleSearch();
+        }
+    }, [handleSearch]);
+    return (_jsxs(Stack, { spacing: 1, children: [_jsx(TextField, { id: "fuzzy-search-input", size: "small", fullWidth: true, variant: "outlined", placeholder: t('search.fuzzy.placeholder'), value: query, onChange: handleQueryChange, onKeyDown: handleKeyDown, InputProps: {
+                    endAdornment: (_jsx(InputAdornment, { position: "end", children: loading ? (_jsx(CircularProgress, { size: 24 })) : (_jsx(IconButton, { id: "fuzzy-search-button", onClick: handleSearch, edge: "end", disabled: !query.trim(), children: _jsx(Search, {}) })) }))
+                } }), _jsx(Stack, { direction: "row", children: _jsx(IndexPicker, { additionalOptions: [{ label: 'hit.search.index.case', value: 'case' }] }) })] }));
+};
+export default FuzzySearchBar;

package/components/elements/search/FuzzySearchBar.test.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import userEvent, {} from '@testing-library/user-event';
+import { setupContextSelectorMock } from '@cccsaurora/howler-ui/tests/mocks';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+setupContextSelectorMock();
+const mockIndexPickerProps = vi.hoisted(() => ({
+    last: null
+}));
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({
+        t: (key) => key
+    })
+}));
+vi.mock('components/routes/hits/search/shared/IndexPicker', () => ({
+    default: (props) => {
+        mockIndexPickerProps.last = props;
+        return _jsx("div", { id: "index-picker" });
+    }
+}));
+import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
+import FuzzySearchBar from './FuzzySearchBar';
+const mockOnSearch = vi.fn();
+const mockSetQuery = vi.fn();
+const parameterContextValue = {
+    indexes: ['hit', 'case'],
+    query: '',
+    setQuery: mockSetQuery
+};
+const Wrapper = ({ children }) => {
+    return _jsx(ParameterContext.Provider, { value: parameterContextValue, children: children });
+};
+describe('FuzzySearchBar', () => {
+    let user;
+    beforeEach(() => {
+        user = userEvent.setup();
+        vi.clearAllMocks();
+        parameterContextValue.indexes = ['hit', 'case'];
+        parameterContextValue.query = '';
+        mockIndexPickerProps.last = null;
+    });
+    it('renders search input and index picker', () => {
+        render(_jsx(FuzzySearchBar, { onSearch: mockOnSearch }), { wrapper: Wrapper });
+        expect(screen.getByTestId('fuzzy-search-input')).toBeInTheDocument();
+        expect(screen.getByTestId('index-picker')).toBeInTheDocument();
+    });
+    it('disables search button when query is empty', () => {
+        render(_jsx(FuzzySearchBar, { onSearch: mockOnSearch }), { wrapper: Wrapper });
+        expect(screen.getByTestId('fuzzy-search-button')).toBeDisabled();
+    });
+    it('calls setQuery and onSearch with trimmed query and selected indexes on click', async () => {
+        render(_jsx(FuzzySearchBar, { onSearch: mockOnSearch }), { wrapper: Wrapper });
+        await user.type(screen.getByRole('textbox'), '  malware triage  ');
+        await user.click(screen.getByTestId('fuzzy-search-button'));
+        expect(mockSetQuery).toHaveBeenCalledWith('malware triage');
+        expect(mockOnSearch).toHaveBeenCalledWith('malware triage', ['hit', 'case']);
+    });
+    it('triggers search on Enter key', async () => {
+        render(_jsx(FuzzySearchBar, { onSearch: mockOnSearch }), { wrapper: Wrapper });
+        await user.type(screen.getByRole('textbox'), 'suspicious ip{enter}');
+        expect(mockSetQuery).toHaveBeenCalledWith('suspicious ip');
+        expect(mockOnSearch).toHaveBeenCalledWith('suspicious ip', ['hit', 'case']);
+    });
+    it('does not call search for whitespace-only input', async () => {
+        render(_jsx(FuzzySearchBar, { onSearch: mockOnSearch }), { wrapper: Wrapper });
+        await user.type(screen.getByRole('textbox'), '   ');
+        expect(screen.getByTestId('fuzzy-search-button')).toBeDisabled();
+        expect(mockSetQuery).not.toHaveBeenCalled();
+        expect(mockOnSearch).not.toHaveBeenCalled();
+    });
+    it('shows loading spinner and hides search button when loading', () => {
+        render(_jsx(FuzzySearchBar, { onSearch: mockOnSearch, loading: true }), { wrapper: Wrapper });
+        expect(screen.getByRole('progressbar')).toBeInTheDocument();
+        expect(screen.queryByTestId('fuzzy-search-button')).not.toBeInTheDocument();
+    });
+    it('passes expected options to IndexPicker', () => {
+        render(_jsx(FuzzySearchBar, { onSearch: mockOnSearch }), { wrapper: Wrapper });
+        expect(mockIndexPickerProps.last).toEqual({
+            additionalOptions: [{ label: 'hit.search.index.case', value: 'case' }]
+        });
+    });
+    it('initializes input with default query from context', () => {
+        parameterContextValue.query = 'existing search';
+        render(_jsx(FuzzySearchBar, { onSearch: mockOnSearch }), { wrapper: Wrapper });
+        expect(screen.getByRole('textbox')).toHaveValue('existing search');
+    });
+});

package/components/routes/cases/detail/{CaseAssets.d.ts → CaseObservables.d.ts}

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

package/components/routes/cases/detail/{CaseAssets.js → CaseObservables.js}

@@ -6,16 +6,16 @@ import { memo, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useOutletContext } from 'react-router-dom';
 import useCase from '../hooks/useCase';
-import Asset, {} from './assets/Asset';
-/** All Related fields that carry asset values */
-const ASSET_FIELDS = ['hash', 'hosts', 'ip', 'user', 'ids', 'id', 'uri', 'signature'];
+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 extractAssets = (related, recordId) => {
+const extractObservables = (related, recordId) => {
     if (!related) {
         return [];
     }
     const results = [];
-    for (const field of ASSET_FIELDS) {
+    for (const field of OBSERVABLE_FIELDS) {
         const raw = related[field];
         if (!raw) {
             continue;
@@ -30,7 +30,7 @@ const extractAssets = (related, recordId) => {
     return results;
 };
 /** Deduplicate and merge seenIn lists into a map keyed by `type:value` */
-export const buildAssetEntries = (records) => {
+export const buildObservableEntries = (records) => {
     const map = new Map();
     for (const record of records) {
         const related = record.related ?? record.related;
@@ -38,7 +38,7 @@ export const buildAssetEntries = (records) => {
         if (!recordId) {
             continue;
         }
-        for (const { type, value, id } of extractAssets(related, recordId)) {
+        for (const { type, value, id } of extractObservables(related, recordId)) {
             const key = `${type}:${value}`;
             if (!map.has(key)) {
                 map.set(key, { type, value, seenIn: [] });
@@ -51,8 +51,8 @@ export const buildAssetEntries = (records) => {
     }
     return Array.from(map.values());
 };
-const RELATED_FIELDS = ASSET_FIELDS.map(f => `related.${f}`).join(',');
-const CaseAssets = ({ case: providedCase, caseId }) => {
+const RELATED_FIELDS = OBSERVABLE_FIELDS.map(f => `related.${f}`).join(',');
+const CaseObservables = ({ case: providedCase, caseId }) => {
     const { t } = useTranslation();
     const { dispatchApi } = useMyApi();
     const routeCase = useOutletContext();
@@ -73,17 +73,17 @@ const CaseAssets = ({ case: providedCase, caseId }) => {
             fl: `howler.id,${RELATED_FIELDS}`
         })).then(response => setRecords(response.items));
     }, [dispatchApi, ids]);
-    const allAssets = useMemo(() => (records ? buildAssetEntries(records) : []), [records]);
-    const assetTypes = useMemo(() => (allAssets ? [...new Set(allAssets.map(a => a.type))].sort() : []), [allAssets]);
-    const filteredAssets = useMemo(() => {
-        if (allAssets.length < 1) {
+    const allObservables = useMemo(() => (records ? buildObservableEntries(records) : []), [records]);
+    const observableTypes = useMemo(() => (allObservables ? [...new Set(allObservables.map(a => a.type))].sort() : []), [allObservables]);
+    const filteredObservables = useMemo(() => {
+        if (allObservables.length < 1) {
             return [];
         }
         if (activeFilters.size === 0) {
-            return allAssets;
+            return allObservables;
         }
-        return allAssets.filter(a => activeFilters.has(a.type));
-    }, [allAssets, activeFilters]);
+        return allObservables.filter(a => activeFilters.has(a.type));
+    }, [allObservables, activeFilters]);
     const toggleFilter = (type) => {
         setActiveFilters(prev => {
             const next = new Set(prev);
@@ -99,6 +99,6 @@ const CaseAssets = ({ case: providedCase, caseId }) => {
     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.assets.filter_by_type') }), records === null ? (_jsx(Skeleton, { width: 240, height: 32 })) : (assetTypes.map(type => (_jsx(Chip, { label: t(`page.cases.assets.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}`)))) : filteredAssets.length === 0 ? (_jsx(Grid, { item: true, xs: 12, children: _jsx(Typography, { color: "text.secondary", children: t('page.cases.assets.empty') }) })) : (filteredAssets.map(asset => (_jsx(Grid, { item: true, xs: 12, md: 6, xl: 4, children: _jsx(Asset, { asset: asset, case: _case }) }, `${asset.type}:${asset.value}`))))] }));
+    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}`))))] }));
 };
-export default memo(CaseAssets);
+export default memo(CaseObservables);