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

package/components/app/App.js

@@ -28,8 +28,8 @@ 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 CaseTimeline from '@cccsaurora/howler-ui/components/routes/cases/detail/CaseTimeline';
 import ItemPage from '@cccsaurora/howler-ui/components/routes/cases/detail/ItemPage';
@@ -214,8 +214,8 @@ const createRouter = () => createBrowserRouter([
                         element: _jsx(CaseDashboard, {})
                     },
                     {
-                        path: 'assets',
-                        element: _jsx(CaseAssets, {})
+                        path: 'observables',
+                        element: _jsx(CaseObservables, {})
                     },
                     {
                         path: 'timeline',

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);

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

@@ -6,28 +6,28 @@ 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 { buildAssetEntries } from './CaseAssets';
+import { buildObservableEntries } from './CaseObservables';
 // ---------------------------------------------------------------------------
 // Pure logic tests — no React needed
 // ---------------------------------------------------------------------------
-describe('buildAssetEntries', () => {
+describe('buildObservableEntries', () => {
     it('returns an empty array for records with no related field', () => {
-        expect(buildAssetEntries([createMockHit({ howler: { id: 'h1' } })])).toEqual([]);
+        expect(buildObservableEntries([createMockHit({ howler: { id: 'h1' } })])).toEqual([]);
     });
     it('extracts a single IP from a hit', () => {
-        const result = buildAssetEntries([createMockHit({ howler: { id: 'h1' }, related: { ip: ['1.2.3.4'] } })]);
+        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 = buildAssetEntries([
+        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 = buildAssetEntries([
+        const result = buildObservableEntries([
             createMockHit({ howler: { id: 'h1' }, related: { ip: ['1.2.3.4'] } }),
             createMockEvent({ howler: { id: 'obs1' }, related: { ip: ['1.2.3.4'] } })
         ]);
@@ -35,14 +35,14 @@ describe('buildAssetEntries', () => {
         expect(result[0].seenIn).toEqual(['h1', 'obs1']);
     });
     it('keeps distinct asset values as separate entries', () => {
-        const result = buildAssetEntries([
+        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 = buildAssetEntries([
+        const result = buildObservableEntries([
             createMockHit({ howler: { id: 'h1' }, related: { ip: ['1.2.3.4'] } }),
             createMockHit({ howler: { id: 'h1' }, related: { ip: ['1.2.3.4'] } })
         ]);
@@ -50,10 +50,10 @@ describe('buildAssetEntries', () => {
     });
     it('skips records with no howler.id', () => {
         const noId = { related: { ip: ['1.2.3.4'] } };
-        expect(buildAssetEntries([noId])).toEqual([]);
+        expect(buildObservableEntries([noId])).toEqual([]);
     });
     it('handles the scalar `id` field on Related', () => {
-        const result = buildAssetEntries([createMockHit({ howler: { id: 'h1' }, related: { id: 'some-id' } })]);
+        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'] });
     });
@@ -66,7 +66,7 @@ describe('buildAssetEntries', () => {
             uri: ['https://example.com'],
             signature: ['rule-X']
         };
-        const result = buildAssetEntries([createMockHit({ howler: { id: 'h1' }, related })]);
+        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']);
     });
@@ -91,65 +91,65 @@ const mockCase = {
         { type: 'event', value: 'obs-1' }
     ]
 };
-const Wrapper = ({ children }) => createElement(MemoryRouter, { initialEntries: ['/cases/case-001/assets'] }, children);
+const Wrapper = ({ children }) => createElement(MemoryRouter, { initialEntries: ['/cases/case-001/observables'] }, children);
 // lazy import the component after mocks are set up
-const CaseAssets = (await import('./CaseAssets')).default;
-describe('CaseAssets component', () => {
+const CaseObservables = (await import('./CaseObservables')).default;
+describe('CaseObservables component', () => {
     beforeEach(() => {
         mockDispatchApi.mockClear();
     });
     it('renders skeletons while records are loading', () => {
         mockDispatchApi.mockReturnValue(new Promise(() => { })); // never resolves
-        render(_jsx(CaseAssets, { case: mockCase }), { wrapper: Wrapper });
+        render(_jsx(CaseObservables, { case: mockCase }), { wrapper: Wrapper });
         // 6 skeleton cards
         const skeletons = document.querySelectorAll('.MuiSkeleton-root');
         expect(skeletons.length).toBeGreaterThan(0);
     });
-    it('shows "No assets found" when records have no related data', async () => {
+    it('shows "No observables found" when records have no related data', async () => {
         mockDispatchApi.mockResolvedValue({
             items: [{ howler: { id: 'hit-1' } }, { howler: { id: 'obs-1' } }]
         });
-        render(_jsx(CaseAssets, { case: mockCase }), { wrapper: Wrapper });
-        await screen.findByText('page.cases.assets.empty');
+        render(_jsx(CaseObservables, { case: mockCase }), { wrapper: Wrapper });
+        await screen.findByText('page.cases.observables.empty');
     });
-    it('renders asset cards for extracted assets', async () => {
+    it('renders observable cards for extracted observables', async () => {
         mockDispatchApi.mockResolvedValue({
             items: [{ howler: { id: 'hit-1' }, related: { ip: ['1.2.3.4'], user: ['alice'] } }]
         });
-        render(_jsx(CaseAssets, { case: mockCase }), { wrapper: Wrapper });
+        render(_jsx(CaseObservables, { case: mockCase }), { wrapper: Wrapper });
         await screen.findByText('1.2.3.4');
         expect(screen.getByText('alice')).toBeTruthy();
     });
-    it('renders a filter chip for each asset type present', async () => {
+    it('renders a filter chip for each observable type present', async () => {
         mockDispatchApi.mockResolvedValue({
             items: [{ howler: { id: 'hit-1' }, related: { ip: ['1.2.3.4'], user: ['alice'] } }]
         });
-        render(_jsx(CaseAssets, { case: mockCase }), { wrapper: Wrapper });
-        await screen.findAllByText('page.cases.assets.type.ip');
-        expect(screen.getAllByText('page.cases.assets.type.ip')).toHaveLength(2);
-        expect(screen.getAllByText('page.cases.assets.type.user')).toHaveLength(2);
+        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);
     });
-    it('filters assets when a type chip is clicked', async () => {
+    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(CaseAssets, { case: mockCase }), { wrapper: Wrapper });
-        // Wait for both assets to appear
+        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.assets.type.ip' }));
+        await userEvent.click(screen.getByRole('button', { name: 'page.cases.observables.type.ip' }));
         // Alice (user) should be filtered out
         expect(screen.queryByText('alice')).toBeNull();
         expect(screen.getByText('1.2.3.4')).toBeTruthy();
     });
-    it('restores all assets when an active filter chip is clicked again', async () => {
+    it('restores all observables when an active filter chip is clicked again', async () => {
         mockDispatchApi.mockResolvedValue({
             items: [{ howler: { id: 'hit-1' }, related: { ip: ['1.2.3.4'], user: ['alice'] } }]
         });
-        render(_jsx(CaseAssets, { case: mockCase }), { wrapper: Wrapper });
+        render(_jsx(CaseObservables, { case: mockCase }), { wrapper: Wrapper });
         await screen.findByText('1.2.3.4');
-        const ipChip = screen.getByRole('button', { name: 'page.cases.assets.type.ip' });
+        const ipChip = screen.getByRole('button', { name: 'page.cases.observables.type.ip' });
         await userEvent.click(ipChip);
         await userEvent.click(ipChip);
         expect(screen.getByText('1.2.3.4')).toBeTruthy();
@@ -157,8 +157,8 @@ describe('CaseAssets component', () => {
     });
     it('renders nothing when the case has no hit/event items', async () => {
         const emptyCase = { case_id: 'case-002', items: [] };
-        render(_jsx(CaseAssets, { case: emptyCase }), { wrapper: Wrapper });
-        await screen.findByText('page.cases.assets.empty');
+        render(_jsx(CaseObservables, { case: emptyCase }), { wrapper: Wrapper });
+        await screen.findByText('page.cases.observables.empty');
         expect(mockDispatchApi).not.toHaveBeenCalled();
     });
 });

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

@@ -99,7 +99,7 @@ const CaseSidebar = ({ case: _case, update }) => {
             maxHeight: 'calc(100vh - 64px)',
             display: 'flex',
             flexDirection: 'column'
-        }, children: [_jsxs(Card, { sx: { borderRadius: 0, px: 2, py: 1 }, children: [_case?.title ? _jsx(Typography, { variant: "body1", children: _case.title }) : _jsx(Skeleton, { height: 24 }), _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", divider: _jsx(Circle, { color: "disabled", sx: { fontSize: '8px' } }), children: [_jsxs(Typography, { variant: "caption", color: "textSecondary", children: [t('started'), ": ", _case?.created ? dayjs(_case.created).toString() : _jsx(Skeleton, { height: 14 })] }), _case?.escalation ? (_jsx(Chip, { color: ESCALATION_COLOR_MAP[_case.escalation], label: t(_case.escalation) })) : (_jsx(Skeleton, { height: 24 }))] })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: navItemSx(location.pathname.endsWith(_case?.case_id)), component: Link, to: `/cases/${_case?.case_id}`, children: [_jsx(Dashboard, { fontSize: "small" }), _jsx(Typography, { variant: "body2", sx: { pl: 1, textWrap: 'nowrap' }, children: t('page.cases.dashboard') })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: navItemSx(location.pathname.endsWith('assets')), component: Link, to: `/cases/${_case?.case_id}/assets`, children: [_jsx(Dataset, { fontSize: "small" }), _jsx(Typography, { variant: "body2", sx: { userSelect: 'none', pl: 1, textWrap: 'nowrap' }, children: t('page.cases.assets') })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: navItemSx(location.pathname.endsWith('timeline')), component: Link, to: `/cases/${_case?.case_id}/timeline`, children: [_jsx(CalendarMonth, { fontSize: "small" }), _jsx(Typography, { variant: "body2", sx: { userSelect: 'none', pl: 1, textWrap: 'nowrap' }, children: t('page.cases.timeline') })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: navItemSx(location.pathname.endsWith('rules')), component: Link, to: `/cases/${_case?.case_id}/rules`, children: [_jsx(Rule, {}), _jsx(Typography, { variant: "body2", sx: { userSelect: 'none', pl: 1, textWrap: 'nowrap' }, children: t('page.cases.rules') })] }), _jsx(Divider, {}), _case && (_jsx(Box, { flex: 1, overflow: "auto", width: "100%", sx: {
+        }, children: [_jsxs(Card, { sx: { borderRadius: 0, px: 2, py: 1 }, children: [_case?.title ? _jsx(Typography, { variant: "body1", children: _case.title }) : _jsx(Skeleton, { height: 24 }), _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", divider: _jsx(Circle, { color: "disabled", sx: { fontSize: '8px' } }), children: [_jsxs(Typography, { variant: "caption", color: "textSecondary", children: [t('started'), ": ", _case?.created ? dayjs(_case.created).toString() : _jsx(Skeleton, { height: 14 })] }), _case?.escalation ? (_jsx(Chip, { color: ESCALATION_COLOR_MAP[_case.escalation], label: t(_case.escalation) })) : (_jsx(Skeleton, { height: 24 }))] })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: navItemSx(location.pathname.endsWith(_case?.case_id)), component: Link, to: `/cases/${_case?.case_id}`, children: [_jsx(Dashboard, { fontSize: "small" }), _jsx(Typography, { variant: "body2", sx: { pl: 1, textWrap: 'nowrap' }, children: t('page.cases.dashboard') })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: navItemSx(location.pathname.endsWith('observables')), component: Link, to: `/cases/${_case?.case_id}/observables`, children: [_jsx(Dataset, { fontSize: "small" }), _jsx(Typography, { variant: "body2", sx: { userSelect: 'none', pl: 1, textWrap: 'nowrap' }, children: t('page.cases.observables') })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: navItemSx(location.pathname.endsWith('timeline')), component: Link, to: `/cases/${_case?.case_id}/timeline`, children: [_jsx(CalendarMonth, { fontSize: "small" }), _jsx(Typography, { variant: "body2", sx: { userSelect: 'none', pl: 1, textWrap: 'nowrap' }, children: t('page.cases.timeline') })] }), _jsxs(Stack, { direction: "row", alignItems: "center", sx: navItemSx(location.pathname.endsWith('rules')), component: Link, to: `/cases/${_case?.case_id}/rules`, children: [_jsx(Rule, {}), _jsx(Typography, { variant: "body2", sx: { userSelect: 'none', pl: 1, textWrap: 'nowrap' }, children: t('page.cases.rules') })] }), _jsx(Divider, {}), _case && (_jsx(Box, { flex: 1, overflow: "auto", width: "100%", sx: {
                     position: 'relative',
                     borderRight: `thin solid ${theme.palette.divider}`
                 }, children: _jsxs(Box, { position: "absolute", sx: { left: 0, right: 0 }, children: [_jsx(LinearProgress, { sx: { mb: 0.5, opacity: +loading } }), _jsxs(DndContext, { sensors: sensors, collisionDetection: pointerWithin, onDragStart: handleDragStart, onDragEnd: handleDragEnd, children: [_jsx(CaseFolder, { case: _case, onItemUpdated: update }), _jsx(RootDropZone, { caseId: _case.case_id }), _jsx(DragOverlay, { dropAnimation: null, children: activeDragData && (_jsx(FolderEntry, { caseId: null, path: "", indent: 0, label: activeDragData.label, itemType: activeDragData.type })) })] })] }) }))] }));

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

@@ -146,10 +146,10 @@ describe('CaseSidebar', () => {
             const link = screen.getByText('page.cases.dashboard').closest('a');
             expect(link).toHaveAttribute('href', '/cases/case-1');
         });
-        it('renders an Assets nav link pointing to the case assets route', () => {
+        it('renders an Observables nav link pointing to the case observables route', () => {
             renderSidebar();
-            const link = screen.getByText('page.cases.assets').closest('a');
-            expect(link).toHaveAttribute('href', '/cases/case-1/assets');
+            const link = screen.getByText('page.cases.observables').closest('a');
+            expect(link).toHaveAttribute('href', '/cases/case-1/observables');
         });
         it('renders a Timeline nav link pointing to the case timeline route', () => {
             renderSidebar();

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

@@ -0,0 +1,14 @@
+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[];
+}
+declare const Observable: FC<{
+    asset: ObservableEntry;
+    case: Case;
+}>;
+export default Observable;

package/components/routes/cases/detail/{assets/Asset.js → observables/Observable.js}

@@ -2,11 +2,11 @@ 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 Asset = ({ asset, case: _case }) => {
+const Observable = ({ asset, 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.assets.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.assets.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.${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 => {
                                     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));
                                 }) })] }))] }) }) }));
 };
-export default Asset;
+export default Observable;

package/components/routes/cases/detail/{assets/Asset.test.js → observables/Observable.test.js}

@@ -4,46 +4,46 @@ 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 Asset, {} from './Asset';
-const makeAsset = (overrides = {}) => ({
+import Observable, {} from './Observable';
+const makeObservable = (overrides = {}) => ({
     type: 'ip',
     value: '192.168.1.1',
     seenIn: [],
     ...overrides
 });
-describe('Asset', () => {
+describe('Observable', () => {
     describe('type chip', () => {
         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(Asset, { asset: makeAsset({ type, value: 'x' }), case: createMockCase() }) }));
-                expect(screen.getByText(`page.cases.assets.type.${type}`)).toBeTruthy();
+                const { unmount } = render(_jsx(MemoryRouter, { children: _jsx(Observable, { asset: makeObservable({ type, value: 'x' }), case: createMockCase() }) }));
+                expect(screen.getByText(`page.cases.observables.type.${type}`)).toBeTruthy();
                 unmount();
             }
         });
     });
     describe('value display', () => {
         it('renders the asset value', () => {
-            render(_jsx(MemoryRouter, { children: _jsx(Asset, { asset: makeAsset({ value: '10.0.0.1' }), case: createMockCase() }) }));
+            render(_jsx(MemoryRouter, { children: _jsx(Observable, { asset: 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(Asset, { asset: makeAsset({ type: 'hash', value: hash }), case: createMockCase() }) }));
+            render(_jsx(MemoryRouter, { children: _jsx(Observable, { asset: 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(Asset, { asset: makeAsset({ seenIn: [] }), case: createMockCase() }) }));
-            expect(screen.queryByText('page.cases.assets.seen_in')).toBeNull();
+            render(_jsx(MemoryRouter, { children: _jsx(Observable, { asset: 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(Asset, { asset: makeAsset({ seenIn: ['hit-001'] }), case: _case }) }));
-            expect(screen.getByText('page.cases.assets.seen_in')).toBeTruthy();
+            render(_jsx(MemoryRouter, { children: _jsx(Observable, { asset: 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', () => {
             const _case = createMockCase({
@@ -53,7 +53,7 @@ describe('Asset', () => {
                     { path: 'alerts/other-analytic (hit-003)', type: 'hit', value: 'hit-003' }
                 ]
             });
-            render(_jsx(MemoryRouter, { children: _jsx(Asset, { asset: makeAsset({ seenIn: ['hit-001', 'obs-002', 'hit-003'] }), case: _case }) }));
+            render(_jsx(MemoryRouter, { children: _jsx(Observable, { asset: 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('Asset', () => {
                 case_id: 'case-abc',
                 items: [{ path: 'alerts/my-analytic (hit-001)', type: 'hit', value: 'hit-001' }]
             });
-            render(_jsx(MemoryRouter, { children: _jsx(Asset, { asset: makeAsset({ seenIn: ['hit-001'] }), case: _case }) }));
+            render(_jsx(MemoryRouter, { children: _jsx(Observable, { asset: 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/locales/en/translation.json

@@ -390,18 +390,18 @@
     "page.403.title": "403: Access Forbidden",
     "page.404.description": "The page you are looking for cannot be found...",
     "page.404.title": "404: Not found",
-    "page.cases.assets": "Assets",
-    "page.cases.assets.empty": "No assets found.",
-    "page.cases.assets.filter_by_type": "Filter by type:",
-    "page.cases.assets.seen_in": "Seen in",
-    "page.cases.assets.type.hash": "Hash",
-    "page.cases.assets.type.hosts": "Host",
-    "page.cases.assets.type.id": "ID",
-    "page.cases.assets.type.ids": "ID",
-    "page.cases.assets.type.ip": "IP",
-    "page.cases.assets.type.signature": "Signature",
-    "page.cases.assets.type.uri": "URI",
-    "page.cases.assets.type.user": "User",
+    "page.cases.observables": "Observables",
+    "page.cases.observables.empty": "No observables found.",
+    "page.cases.observables.filter_by_type": "Filter by type:",
+    "page.cases.observables.seen_in": "Seen in",
+    "page.cases.observables.type.hash": "Hash",
+    "page.cases.observables.type.hosts": "Host",
+    "page.cases.observables.type.id": "ID",
+    "page.cases.observables.type.ids": "ID",
+    "page.cases.observables.type.ip": "IP",
+    "page.cases.observables.type.signature": "Signature",
+    "page.cases.observables.type.uri": "URI",
+    "page.cases.observables.type.user": "User",
     "page.cases.created": "Created",
     "page.cases.dashboard": "Dashboard",
     "page.cases.dashboard.alerts": "Alerts",

package/locales/fr/translation.json

@@ -390,18 +390,18 @@
     "page.403.title": "403: Accès interdit",
     "page.404.description": "La page que vous recherchez est introuvable ...",
     "page.404.title": "404: Introuvable",
-    "page.cases.assets": "Actifs",
-    "page.cases.assets.empty": "Aucun actif trouvé.",
-    "page.cases.assets.filter_by_type": "Filtrer par type :",
-    "page.cases.assets.seen_in": "Vu dans",
-    "page.cases.assets.type.hash": "Hachage",
-    "page.cases.assets.type.hosts": "Hôte",
-    "page.cases.assets.type.id": "Identifiant",
-    "page.cases.assets.type.ids": "Identifiant",
-    "page.cases.assets.type.ip": "IP",
-    "page.cases.assets.type.signature": "Signature",
-    "page.cases.assets.type.uri": "URI",
-    "page.cases.assets.type.user": "Utilisateur",
+    "page.cases.observables": "Observables",
+    "page.cases.observables.empty": "Aucun observable trouvé.",
+    "page.cases.observables.filter_by_type": "Filtrer par type :",
+    "page.cases.observables.seen_in": "Vu dans",
+    "page.cases.observables.type.hash": "Hachage",
+    "page.cases.observables.type.hosts": "Hôte",
+    "page.cases.observables.type.id": "Identifiant",
+    "page.cases.observables.type.ids": "Identifiant",
+    "page.cases.observables.type.ip": "IP",
+    "page.cases.observables.type.signature": "Signature",
+    "page.cases.observables.type.uri": "URI",
+    "page.cases.observables.type.user": "Utilisateur",
     "page.cases.created": "Créé",
     "page.cases.dashboard": "Tableau de bord",
     "page.cases.dashboard.alerts": "Alertes",

package/package.json

@@ -96,7 +96,7 @@
     "internal-slot": "1.0.7"
   },
   "type": "module",
-  "version": "2.19.0-cases.1110",
+  "version": "2.19.0-cases.1111",
   "exports": {
     "./i18n": "./i18n.js",
     "./index.css": "./index.css",
@@ -212,7 +212,7 @@
     "./components/routes/cases/detail/*": "./components/routes/cases/detail/*.js",
     "./components/routes/cases/detail/aggregates/*": "./components/routes/cases/detail/aggregates/*.js",
     "./components/routes/cases/detail/sidebar/*": "./components/routes/cases/detail/sidebar/*.js",
-    "./components/routes/cases/detail/assets/*": "./components/routes/cases/detail/assets/*.js",
+    "./components/routes/cases/detail/observables/*": "./components/routes/cases/detail/observables/*.js",
     "./components/app/providers/*": "./components/app/providers/*.js",
     "./components/app/drawers/*": "./components/app/drawers/*.js",
     "./components/app/hooks/*": "./components/app/hooks/*.js",

package/components/routes/cases/detail/assets/Asset.d.ts

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