@cccsaurora/howler-ui 2.18.0-dev.704 → 2.18.0-dev.710

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

@@ -0,0 +1,227 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable react/no-children-prop */
+/// <reference types="vitest" />
+import { act, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
+import { createElement } from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { createMockHit, createMockObservable } from '@cccsaurora/howler-ui/tests/utils';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { buildFilters } from './CaseTimeline';
+// ---------------------------------------------------------------------------
+// Pure logic tests
+// ---------------------------------------------------------------------------
+describe('buildFilters', () => {
+    it('returns an empty array when both lists are empty', () => {
+        expect(buildFilters([], [])).toEqual([]);
+    });
+    it('builds a tactic filter', () => {
+        const result = buildFilters([{ id: 'TA0001', name: 'Initial Access', kind: 'tactic' }], []);
+        expect(result).toEqual(['threat.tactic.id:(TA0001)']);
+    });
+    it('builds a technique filter', () => {
+        const result = buildFilters([{ id: 'T1059', name: 'Command Scripting', kind: 'technique' }], []);
+        expect(result).toEqual(['threat.technique.id:(T1059)']);
+    });
+    it('OR-combines multiple tactics in one clause', () => {
+        const result = buildFilters([
+            { id: 'TA0001', name: 'Initial Access', kind: 'tactic' },
+            { id: 'TA0002', name: 'Execution', kind: 'tactic' }
+        ], []);
+        expect(result).toEqual(['threat.tactic.id:(TA0001 OR TA0002)']);
+    });
+    it('emits separate clauses for tactics and techniques', () => {
+        const result = buildFilters([
+            { id: 'TA0001', name: 'Initial Access', kind: 'tactic' },
+            { id: 'T1059', name: 'Command Scripting', kind: 'technique' }
+        ], []);
+        expect(result).toContain('threat.tactic.id:(TA0001)');
+        expect(result).toContain('threat.technique.id:(T1059)');
+        expect(result).toHaveLength(2);
+    });
+    it('builds an escalation filter', () => {
+        const result = buildFilters([], ['evidence', 'hit']);
+        expect(result).toEqual(['howler.escalation:(evidence OR hit)']);
+    });
+    it('combines mitre and escalation filters', () => {
+        const result = buildFilters([{ id: 'TA0001', name: 'Initial Access', kind: 'tactic' }], ['evidence']);
+        expect(result).toHaveLength(2);
+        expect(result).toContain('threat.tactic.id:(TA0001)');
+        expect(result).toContain('howler.escalation:(evidence)');
+    });
+});
+// ---------------------------------------------------------------------------
+// Component rendering tests
+// ---------------------------------------------------------------------------
+const mockDispatchApi = vi.fn();
+vi.mock('components/hooks/useMyApi', () => ({
+    default: () => ({ dispatchApi: mockDispatchApi })
+}));
+vi.mock('../hooks/useCase', () => ({
+    default: ({ case: c }) => ({ case: c, update: vi.fn(), loading: false, missing: false })
+}));
+vi.mock('react-router-dom', async () => {
+    const actual = await vi.importActual('react-router-dom');
+    return { ...actual, useOutletContext: () => undefined };
+});
+// Stub card components — their internals are irrelevant to timeline tests
+vi.mock('components/elements/hit/HitCard', () => ({
+    default: ({ id }) => _jsx("div", { children: `HitCard:${id}` })
+}));
+vi.mock('components/elements/observable/ObservableCard', () => ({
+    default: ({ id }) => _jsx("div", { children: `ObservableCard:${id}` })
+}));
+// Return the request object rather than a Promise so dispatchApi's first
+// argument is JSON-serialisable (JSON.stringify(Promise) === '{}').
+vi.mock('api', () => ({
+    default: {
+        v2: {
+            search: {
+                post: (_indexes, request) => request ?? {},
+                facet: {
+                    post: (_indexes, request) => request ?? {}
+                }
+            }
+        }
+    }
+}));
+const mockLoadRecords = vi.fn();
+const mockConfig = {
+    lookups: {
+        tactics: { TA0001: { key: 'TA0001', name: 'Initial Access', url: '' } },
+        techniques: { T1059: { key: 'T1059', name: 'Command Scripting', url: '' } }
+    }
+};
+const mockCase = {
+    case_id: 'case-001',
+    items: [
+        { type: 'hit', value: 'hit-1', path: 'hits/hit-1' },
+        { type: 'observable', value: 'obs-1', path: 'observables/obs-1' }
+    ]
+};
+const Wrapper = ({ children }) => (_jsx(ApiConfigContext.Provider, { value: { config: mockConfig, setConfig: vi.fn() }, children: _jsxs(RecordContext.Provider, { value: { records: {}, loadRecords: mockLoadRecords }, children: [_jsx(MemoryRouter, { initialEntries: ['/cases/case-001/timeline'], children: children }), ' '] }) }));
+const CaseTimeline = (await import('./CaseTimeline')).default;
+// Reusable mock response factories
+const mockFacetResponse = {
+    'threat.tactic.id': { TA0001: 1 },
+    'threat.technique.id': { T1059: 1 },
+    'howler.escalation': { evidence: 2, hit: 1 }
+};
+const mockSearchResponse = (items = [
+    createMockHit({ howler: { id: 'hit-1' }, event: { created: '2024-01-01T00:00:00Z' } }),
+    createMockObservable({ howler: { id: 'obs-1' } })
+]) => ({ items, total: items.length, rows: items.length, offset: 0 });
+describe('CaseTimeline component', () => {
+    beforeEach(() => {
+        mockDispatchApi.mockClear();
+        mockLoadRecords.mockClear();
+    });
+    it('renders loading skeletons while the search is pending', () => {
+        mockDispatchApi.mockReturnValue(new Promise(() => { })); // never resolves
+        render(_jsx(CaseTimeline, { case: mockCase }), { wrapper: Wrapper });
+        expect(document.querySelectorAll('.MuiSkeleton-root').length).toBeGreaterThan(0);
+    });
+    it('shows the empty state when no entries are returned', async () => {
+        mockDispatchApi.mockResolvedValueOnce(mockFacetResponse).mockResolvedValueOnce(mockSearchResponse([]));
+        render(_jsx(CaseTimeline, { case: mockCase }), { wrapper: Wrapper });
+        await screen.findByText('page.cases.timeline.empty');
+    });
+    it('renders HitCard for hit entries and ObservableCard for observable entries', async () => {
+        mockDispatchApi.mockResolvedValueOnce(mockFacetResponse).mockResolvedValueOnce(mockSearchResponse());
+        render(_jsx(CaseTimeline, { case: mockCase }), { wrapper: Wrapper });
+        expect(await screen.findByText('HitCard:hit-1')).toBeTruthy();
+        expect(screen.getByText('ObservableCard:obs-1')).toBeTruthy();
+    });
+    it('renders the formatted event.created timestamp for hits', async () => {
+        mockDispatchApi
+            .mockResolvedValueOnce(mockFacetResponse)
+            .mockResolvedValueOnce(mockSearchResponse([createMockHit({ howler: { id: 'hit-1' }, event: { created: '2024-06-15T12:34:56Z' } })]));
+        render(_jsx(CaseTimeline, { case: mockCase }), { wrapper: Wrapper });
+        await screen.findByText(/2024-06-15/);
+    });
+    it('falls back to entry.timestamp when event.created is absent', async () => {
+        const entry = createMockHit({ howler: { id: 'hit-1' } });
+        entry.timestamp = '2024-03-10T08:00:00Z';
+        delete entry.event;
+        mockDispatchApi.mockResolvedValueOnce(mockFacetResponse).mockResolvedValueOnce(mockSearchResponse([entry]));
+        render(_jsx(CaseTimeline, { case: mockCase }), { wrapper: Wrapper });
+        await screen.findByText(/2024-03-10/);
+    });
+    it('calls loadRecords with the search results', async () => {
+        const items = [createMockHit({ howler: { id: 'hit-1' } })];
+        mockDispatchApi.mockResolvedValueOnce(mockFacetResponse).mockResolvedValueOnce(mockSearchResponse(items));
+        render(_jsx(CaseTimeline, { case: mockCase }), { wrapper: Wrapper });
+        await screen.findByText('HitCard:hit-1');
+        expect(mockLoadRecords).toHaveBeenCalledWith(items);
+    });
+    it('renders MITRE autocomplete with options derived from the facet response', async () => {
+        mockDispatchApi.mockResolvedValueOnce(mockFacetResponse).mockResolvedValueOnce(mockSearchResponse());
+        render(_jsx(CaseTimeline, { case: mockCase }), { wrapper: Wrapper });
+        await screen.findByText('HitCard:hit-1');
+        expect(screen.getByRole('combobox', { name: /page.cases.timeline.filter.mitre/i })).toBeTruthy();
+    });
+    it('renders escalation autocomplete pre-populated with "evidence"', async () => {
+        mockDispatchApi.mockResolvedValueOnce(mockFacetResponse).mockResolvedValueOnce(mockSearchResponse());
+        render(_jsx(CaseTimeline, { case: mockCase }), { wrapper: Wrapper });
+        await screen.findByText('HitCard:hit-1');
+        // "evidence" chip should be pre-selected as a tag
+        expect(screen.getByText('evidence')).toBeTruthy();
+    });
+    it('re-fetches with an escalation filter when a new escalation is selected', async () => {
+        mockDispatchApi
+            .mockResolvedValueOnce(mockFacetResponse)
+            .mockResolvedValueOnce(mockSearchResponse())
+            .mockResolvedValueOnce(mockSearchResponse());
+        render(_jsx(CaseTimeline, { case: mockCase }), { wrapper: Wrapper });
+        await screen.findByText('HitCard:hit-1');
+        const escalationInput = screen.getByRole('combobox', { name: /page.cases.timeline.filter.escalation/i });
+        await act(async () => {
+            await userEvent.click(escalationInput);
+        });
+        const option = await screen.findByRole('option', { name: /\bhit\b/i });
+        await act(async () => {
+            await userEvent.click(option);
+        });
+        // The third dispatchApi call should carry a filter containing "hit"
+        const thirdCallArgs = mockDispatchApi.mock.calls[2];
+        expect(JSON.stringify(thirdCallArgs[0])).toContain('hit');
+    });
+    it('re-fetches when a MITRE tactic is selected', async () => {
+        mockDispatchApi
+            .mockResolvedValueOnce(mockFacetResponse)
+            .mockResolvedValueOnce(mockSearchResponse())
+            .mockResolvedValueOnce(mockSearchResponse());
+        render(_jsx(CaseTimeline, { case: mockCase }), { wrapper: Wrapper });
+        await screen.findByText('HitCard:hit-1');
+        const mitreInput = screen.getByRole('combobox', { name: /page.cases.timeline.filter.mitre/i });
+        await act(async () => {
+            await userEvent.click(mitreInput);
+        });
+        const tacticOption = await screen.findByRole('option', { name: /TA0001/i });
+        await act(async () => {
+            await userEvent.click(tacticOption);
+        });
+        const thirdCallArgs = mockDispatchApi.mock.calls[2];
+        expect(JSON.stringify(thirdCallArgs[0])).toContain('TA0001');
+    });
+    it('passes the case item ids in the base query on every search call', async () => {
+        mockDispatchApi.mockResolvedValueOnce(mockFacetResponse).mockResolvedValueOnce(mockSearchResponse());
+        render(_jsx(CaseTimeline, { case: mockCase }), { wrapper: Wrapper });
+        await screen.findByText('HitCard:hit-1');
+        const searchCallArg = mockDispatchApi.mock.calls[1][0];
+        expect(JSON.stringify(searchCallArg)).toContain('hit-1');
+        expect(JSON.stringify(searchCallArg)).toContain('obs-1');
+    });
+    it('renders nothing when _case is not yet available', () => {
+        const emptyCaseWrapper = ({ children }) => createElement(ApiConfigContext.Provider, { value: { config: mockConfig, setConfig: vi.fn() }, children: null }, createElement(RecordContext.Provider, { value: { records: {}, loadRecords: mockLoadRecords }, children: null }, createElement(MemoryRouter, null, children)));
+        const { container } = render(_jsx(CaseTimeline, {}), { wrapper: emptyCaseWrapper });
+        expect(container.firstChild).toBeNull();
+    });
+    it('renders nothing and skips fetching when the case has no items', () => {
+        mockDispatchApi.mockResolvedValue({});
+        render(_jsx(CaseTimeline, { case: { case_id: 'empty', items: [] } }), { wrapper: Wrapper });
+        expect(mockDispatchApi).not.toHaveBeenCalled();
+    });
+});

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

@@ -0,0 +1,6 @@
+import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
+import { type FC } from 'react';
+declare const ItemPage: FC<{
+    case?: Case;
+}>;
+export default ItemPage;

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

@@ -0,0 +1,99 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import api from '@cccsaurora/howler-ui/api';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import NotFoundPage from '@cccsaurora/howler-ui/components/routes/404';
+import InformationPane from '@cccsaurora/howler-ui/components/routes/hits/search/InformationPane';
+import ObservableViewer from '@cccsaurora/howler-ui/components/routes/observables/ObservableViewer';
+import { useEffect, useMemo, useState } from 'react';
+import { useOutletContext, useParams } from 'react-router-dom';
+import useCase from '../hooks/useCase';
+import CaseDashboard from './CaseDashboard';
+const ItemPage = ({ case: providedCase }) => {
+    const params = useParams();
+    const routeCase = useOutletContext();
+    const { case: fetchedCase } = useCase({ caseId: !providedCase && !routeCase ? params.id : undefined });
+    const _case = providedCase ?? routeCase ?? fetchedCase;
+    const { dispatchApi } = useMyApi();
+    const [item, setItem] = useState(null);
+    const [loading, setLoading] = useState(true);
+    // When rendered as a child route, the wildcard segment is in params['*'].
+    // When rendered directly with a case prop, fall back to parsing the pathname.
+    const subPath = params['*'] ?? '';
+    const normalizedSubPath = useMemo(() => subPath.replace(/^\/+|\/+$/g, ''), [subPath]);
+    useEffect(() => {
+        let cancelled = false;
+        const resolveItem = async () => {
+            setLoading(true);
+            if (!normalizedSubPath) {
+                if (!cancelled) {
+                    setItem(null);
+                    setLoading(false);
+                }
+                return;
+            }
+            let currentCase = _case;
+            let remainingPath = normalizedSubPath;
+            while (currentCase && remainingPath) {
+                const currentRemainingPath = remainingPath;
+                const matchedNestedCase = currentCase.items
+                    .filter(_item => _item?.path &&
+                    _item?.type?.toLowerCase() === 'case' &&
+                    (currentRemainingPath === _item.path || currentRemainingPath.startsWith(`${_item.path}/`)))
+                    .sort((a, b) => (b.path?.length || 0) - (a.path?.length || 0))[0];
+                if (!matchedNestedCase) {
+                    break;
+                }
+                if (currentRemainingPath === matchedNestedCase.path) {
+                    if (!cancelled) {
+                        setItem(matchedNestedCase);
+                        setLoading(false);
+                    }
+                    return;
+                }
+                if (!matchedNestedCase.value) {
+                    if (!cancelled) {
+                        setItem(null);
+                        setLoading(false);
+                    }
+                    return;
+                }
+                const nextCase = await dispatchApi(api.v2.case.get(matchedNestedCase.value), { throwError: false });
+                if (!nextCase) {
+                    if (!cancelled) {
+                        setItem(null);
+                        setLoading(false);
+                    }
+                    return;
+                }
+                remainingPath = currentRemainingPath.slice((matchedNestedCase.path?.length || 0) + 1);
+                currentCase = nextCase;
+            }
+            const resolvedItem = currentCase?.items?.find(_item => _item.path === remainingPath);
+            if (!cancelled) {
+                setItem(resolvedItem || null);
+                setLoading(false);
+            }
+        };
+        resolveItem();
+        return () => {
+            cancelled = true;
+        };
+    }, [_case, dispatchApi, normalizedSubPath]);
+    if (loading) {
+        return null;
+    }
+    if (!item) {
+        return _jsx(NotFoundPage, {});
+    }
+    if (item.type === 'hit') {
+        return _jsx(InformationPane, { selected: item.value });
+    }
+    if (item.type === 'observable') {
+        return _jsx(ObservableViewer, { observableId: item.value });
+    }
+    if (item.type === 'case') {
+        return _jsx(CaseDashboard, { caseId: item.value });
+    }
+    return _jsx("h1", { children: JSON.stringify(item) });
+};
+export default ItemPage;

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

@@ -0,0 +1,6 @@
+import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
+import { type FC } from 'react';
+declare const RelatedCasePanel: FC<{
+    case: Case;
+}>;
+export default RelatedCasePanel;

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

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Divider, Pagination, Skeleton, Stack, Typography, useTheme } from '@mui/material';
+import { chunk, uniq } from 'lodash-es';
+import { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import CaseCard from '../../../elements/case/CaseCard';
+const RelatedCasePanel = ({ case: _case }) => {
+    const { t } = useTranslation();
+    const theme = useTheme();
+    const [casePage, setCasePage] = useState(1);
+    const casePages = useMemo(() => chunk(uniq((_case?.items ?? []).filter(item => item.type === 'case')), 5), [_case?.items]);
+    if (!_case) {
+        return _jsx(Skeleton, { height: 240 });
+    }
+    return (_jsxs(Stack, { spacing: 1, children: [_jsxs(Stack, { direction: "row", children: [_jsx(Typography, { flex: 1, variant: "h4", children: t('page.cases.dashboard.cases') }), _jsx(Pagination, { count: casePages.length, page: casePage, onChange: (_, page) => setCasePage(page) })] }), _jsx(Divider, {}), casePages[casePage - 1]?.map(item => (_jsxs(Box, { position: "relative", children: [_jsx(CaseCard, { caseId: item.value }), _jsx(Box, { component: Link, to: item.path, sx: {
+                            position: 'absolute',
+                            top: 0,
+                            left: 0,
+                            width: '100%',
+                            height: '100%',
+                            cursor: 'pointer',
+                            zIndex: 100,
+                            borderRadius: '4px',
+                            '&:hover': {
+                                background: theme.palette.divider,
+                                border: `thin solid ${theme.palette.primary.light}`
+                            }
+                        } })] }, item.path)))] }));
+};
+export default RelatedCasePanel;

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

@@ -0,0 +1,7 @@
+import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
+import { type FC } from 'react';
+declare const TaskPanel: FC<{
+    case: Case;
+    updateCase: (_case: Partial<Case>) => Promise<void>;
+}>;
+export default TaskPanel;

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

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Add } from '@mui/icons-material';
+import { Divider, Skeleton, Stack, Typography } from '@mui/material';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import CaseTask from './CaseTask';
+const TaskPanel = ({ case: _case, updateCase }) => {
+    const { t } = useTranslation();
+    const [addingTask, setAddingTask] = useState(false);
+    const onEdit = (task) => async (newTask) => {
+        if (task) {
+            await updateCase({
+                tasks: _case.tasks.map(_task => {
+                    if (_task.id !== task.id) {
+                        return _task;
+                    }
+                    return {
+                        ..._task,
+                        ...newTask
+                    };
+                })
+            });
+        }
+        else {
+            await updateCase({
+                tasks: [..._case.tasks, newTask]
+            });
+        }
+    };
+    if (!_case) {
+        return _jsx(Skeleton, { height: 240 });
+    }
+    return (_jsxs(Stack, { spacing: 1, children: [_jsx(Typography, { flex: 1, variant: "h4", children: t('page.cases.dashboard.tasks') }), _jsx(Divider, {}), _case.tasks.map(task => (_jsx(CaseTask, { task: task, paths: _case.items.map(item => item.path), onEdit: onEdit(task), onDelete: () => updateCase({ tasks: _case.tasks.filter(_task => _task.id !== task.id) }) }, task.id))), addingTask && (_jsx(CaseTask, { newTask: true, paths: _case.items.map(item => item.path), onEdit: async (task) => {
+                    await onEdit()(task);
+                    setAddingTask(false);
+                }, onDelete: async () => setAddingTask(false) })), _jsxs(Stack, { onClick: () => setAddingTask(true), direction: "row", spacing: 2, sx: theme => ({
+                    borderStyle: 'dashed',
+                    borderColor: theme.palette.text.secondary,
+                    borderWidth: '0.15rem',
+                    borderRadius: '0.15rem',
+                    opacity: 0.3,
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    padding: 1,
+                    transition: theme.transitions.create('opacity'),
+                    '&:hover': {
+                        opacity: 1,
+                        cursor: 'pointer'
+                    }
+                }), children: [_jsx(Add, {}), _jsx(Typography, { children: t('page.cases.dashboard.tasks.add') })] })] }));
+};
+export default TaskPanel;

package/components/routes/cases/detail/aggregates/CaseAggregate.d.ts

@@ -0,0 +1,12 @@
+import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+import type { Observable } from '@cccsaurora/howler-ui/models/entities/generated/Observable';
+import { type FC } from 'react';
+declare const CaseAggregate: FC<{
+    icon?: string;
+    iconColor?: string;
+    field?: string;
+    records?: Partial<Hit | Observable>[];
+    title?: string;
+    subtitle?: string;
+}>;
+export default CaseAggregate;

package/components/routes/cases/detail/aggregates/CaseAggregate.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from '@iconify/react';
+import { Card, CardContent, Skeleton, Stack, styled, Tooltip, tooltipClasses, Typography, useTheme } from '@mui/material';
+import { get, isEmpty, uniq } from 'lodash-es';
+import {} from 'react';
+const NoMaxWidthTooltip = styled(({ className, ...props }) => (_jsx(Tooltip, { ...props, classes: { popper: className } })))({
+    [`& .${tooltipClasses.tooltip}`]: {
+        maxWidth: 'none'
+    }
+});
+const CaseAggregate = ({ icon, iconColor, field, records, title, subtitle }) => {
+    const theme = useTheme();
+    if (!title && (!records || !field)) {
+        return _jsx(Skeleton, { height: 120 });
+    }
+    const values = uniq(records?.map(_record => get(_record, field)).flat());
+    return (_jsx(Card, { sx: { height: '100%' }, children: _jsx(CardContent, { children: _jsxs(Stack, { alignItems: "center", spacing: 1, children: [_jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [icon && _jsx(Icon, { fontSize: "96px", icon: icon, color: iconColor || theme.palette.grey[700] }), _jsx(NoMaxWidthTooltip, { title: !isEmpty(values) && (_jsx(Stack, { spacing: 0.5, children: values.map(value => (_jsx("span", { children: value }, value))) })), children: _jsxs(Typography, { variant: "h3", children: [values.length, !isEmpty(values) && !!title && ' - ', title] }) })] }), _jsx(Typography, { color: "textSecondary", children: subtitle })] }) }) }));
+};
+export default CaseAggregate;

package/components/routes/cases/detail/aggregates/SourceAggregate.d.ts

@@ -0,0 +1,6 @@
+import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
+import { type FC } from 'react';
+declare const SourceAggregate: FC<{
+    case: Case;
+}>;
+export default SourceAggregate;

package/components/routes/cases/detail/aggregates/SourceAggregate.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Chip, Grid, Skeleton } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import { uniq } from 'lodash-es';
+import { useEffect, useMemo, useState } from 'react';
+import useCase from '../../hooks/useCase';
+const SourceAggregate = ({ case: providedCase }) => {
+    const { dispatchApi } = useMyApi();
+    const { case: _case } = useCase({ case: providedCase });
+    const [analytics, setAnalytics] = useState([]);
+    const hitIds = useMemo(() => _case?.items
+        .filter(item => item.type === 'hit')
+        .map(item => item.value)
+        .filter(value => !!value), [_case?.items]);
+    useEffect(() => {
+        dispatchApi(api.v2.search.post('hit', { query: `howler.id:(${hitIds.join(' OR ')})`, fl: 'howler.analytic' }))
+            .then(response => response?.items.map(hit => hit.howler.analytic) ?? [])
+            .then(_analytics => setAnalytics(uniq(_analytics)));
+        api.v2.search.facet.post(['hit', 'observable'], {
+            query: `howler.id:(${hitIds.join(' OR ')})`,
+            fields: ['howler.analytic']
+        });
+    }, [dispatchApi, hitIds]);
+    if (!_case) {
+        return _jsx(Skeleton, { height: 12, variant: "rounded" });
+    }
+    return (_jsx(Grid, { container: true, spacing: 1, children: analytics.map(_analytic => (_jsx(Grid, { item: true, children: _jsx(Chip, { size: "small", label: _analytic }) }, _analytic))) }));
+};
+export default SourceAggregate;

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

@@ -0,0 +1,14 @@
+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/observables this asset was seen in */
+    seenIn: string[];
+}
+declare const Asset: FC<{
+    asset: AssetEntry;
+    case: Case;
+}>;
+export default Asset;

package/components/routes/cases/detail/assets/Asset.js

@@ -0,0 +1,12 @@
+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 { 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 => {
+                                    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;

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

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

package/components/routes/cases/detail/assets/Asset.test.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+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 = {}) => ({
+    type: 'ip',
+    value: '192.168.1.1',
+    seenIn: [],
+    ...overrides
+});
+describe('Asset', () => {
+    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();
+                unmount();
+            }
+        });
+    });
+    describe('value display', () => {
+        it('renders the asset value', () => {
+            render(_jsx(MemoryRouter, { children: _jsx(Asset, { asset: makeAsset({ 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() }) }));
+            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();
+        });
+        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();
+        });
+        it('renders a chip labelled with entry.path for each seenIn id', () => {
+            const _case = createMockCase({
+                items: [
+                    { path: 'alerts/my-analytic (hit-001)', type: 'hit', value: 'hit-001' },
+                    { path: 'observables/obs-002', type: 'observable', value: 'obs-002' },
+                    { 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 }) }));
+            expect(screen.getByText('alerts/my-analytic (hit-001)')).toBeTruthy();
+            expect(screen.getByText('observables/obs-002')).toBeTruthy();
+            expect(screen.getByText('alerts/other-analytic (hit-003)')).toBeTruthy();
+        });
+        it('links each chip to /cases/:case_id/:path', () => {
+            const _case = createMockCase({
+                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 }) }));
+            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/sidebar/CaseFolder.d.ts

@@ -0,0 +1,14 @@
+import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
+import { type FC } from 'react';
+import type { Tree } from './types';
+interface CaseFolderProps {
+    case: Case;
+    folder?: Tree;
+    name?: string;
+    step?: number;
+    rootCaseId?: string;
+    pathPrefix?: string;
+    onItemUpdated?: (newCase: Case) => void;
+}
+declare const CaseFolder: FC<CaseFolderProps>;
+export default CaseFolder;