@cccsaurora/howler-ui 2.17.0-dev.508 → 2.17.0-dev.513

package/api/v2/search/facet.d.ts

@@ -0,0 +1,3 @@
+import type { HowlerFacetSearchRequest, HowlerFacetSearchResponse } from '@cccsaurora/howler-ui/api/search/facet';
+export declare const uri: (indexes: string[]) => string;
+export declare const post: (indexes: string | string[], request?: HowlerFacetSearchRequest) => Promise<HowlerFacetSearchResponse>;

package/api/v2/search/facet.js

@@ -0,0 +1,12 @@
+// eslint-disable-next-line import/no-cycle
+import { hpost, joinAllUri } from '@cccsaurora/howler-ui/api';
+import { uri as parentUri } from '@cccsaurora/howler-ui/api/v2';
+export const uri = (indexes) => {
+    return joinAllUri(parentUri(), 'search', 'facet', indexes.join(','));
+};
+export const post = (indexes, request) => {
+    if (typeof indexes === 'string') {
+        indexes = indexes.split(',');
+    }
+    return hpost(uri(indexes), { ...(request || {}), query: request?.query || 'howler.id:*' });
+};

package/api/v2/search/index.d.ts

@@ -1,4 +1,6 @@
 import type { HowlerSearchRequest, HowlerSearchResponse } from '@cccsaurora/howler-ui/api/search';
 import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+import * as facet from './facet';
 export declare const uri: (indexes: string[]) => string;
 export declare const post: <T = Hit>(indexes: string | string[], request?: HowlerSearchRequest) => Promise<HowlerSearchResponse<T>>;
+export { facet };

package/api/v2/search/index.js

@@ -1,6 +1,7 @@
 // eslint-disable-next-line import/no-cycle
 import { hpost, joinAllUri } from '@cccsaurora/howler-ui/api';
 import { uri as parentUri } from '@cccsaurora/howler-ui/api/v2';
+import * as facet from './facet';
 export const uri = (indexes) => {
     return joinAllUri(parentUri(), 'search', indexes.join(','));
 };
@@ -14,3 +15,4 @@ export const post = (indexes, request) => {
     }
     return hpost(uri(indexes), { ...(request || {}), query: request?.query || 'howler.id:*' });
 };
+export { facet };

package/components/{routes/overviews/OverviewEditor.js → elements/MarkdownEditor.js}

@@ -4,8 +4,8 @@ import { useTheme } from '@mui/material';
 import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
 import ThemedEditor from '@cccsaurora/howler-ui/components/elements/ThemedEditor';
 import { memo, useCallback, useContext, useEffect, useMemo } from 'react';
-import { conf, language } from './markdownExtendedTokenProvider';
-const OverviewEditor = ({ content, setContent, onMount, fontSize = 16, height = '100%', width = '100%', editorOptions = {} }) => {
+import { conf, language } from '../routes/overviews/markdownExtendedTokenProvider';
+const MarkdownEditor = ({ content, setContent, onMount, fontSize = 16, height = '100%', width = '100%', editorOptions = {} }) => {
     const theme = useTheme();
     const monaco = useMonaco();
     const { config } = useContext(ApiConfigContext);
@@ -53,4 +53,4 @@ const OverviewEditor = ({ content, setContent, onMount, fontSize = 16, height =
     }), [fontSize, editorOptions]);
     return (_jsx(ThemedEditor, { height: height, width: width, theme: theme.palette.mode === 'light' ? 'howler' : 'howler-dark', value: content, onChange: value => setContent(value), beforeMount: beforeEditorMount, onMount: onMount, options: options }));
 };
-export default memo(OverviewEditor);
+export default memo(MarkdownEditor);

package/components/elements/UserList.d.ts

@@ -2,9 +2,11 @@ import type { SxProps, Theme } from '@mui/material';
 import type { FC } from 'react';
 declare const UserList: FC<{
     buttonSx?: SxProps<Theme>;
-    userId: string;
-    onChange: (userId: string) => void;
+    userIds: string[];
+    onChange: (userIds: string[]) => void;
     i18nLabel: string;
     avatarHeight?: number;
+    disabled?: boolean;
+    multiple?: boolean;
 }>;
 export default UserList;

package/components/elements/UserList.js

@@ -1,18 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Autocomplete, Box, IconButton, Popover, TextField, Typography } from '@mui/material';
+import { Add } from '@mui/icons-material';
+import { Autocomplete, AvatarGroup, Box, IconButton, Popover, Stack, TextField, Typography } from '@mui/material';
 import { UserListContext } from '@cccsaurora/howler-ui/components/app/providers/UserListProvider';
+import { uniq } from 'lodash-es';
 import { useContext, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import HowlerAvatar from './display/HowlerAvatar';
-const UserList = ({ buttonSx = {}, userId, onChange, i18nLabel, avatarHeight = 32 }) => {
+const UserList = ({ buttonSx = {}, userIds, onChange, i18nLabel, avatarHeight = 32, multiple = false, disabled = false }) => {
     const { t } = useTranslation();
     const [anchorEl, setAnchorEl] = useState(null);
     const { users, searchUsers } = useContext(UserListContext);
-    const userIds = useMemo(() => Object.keys(users), [users]);
+    const allUserIds = useMemo(() => Object.keys(users), [users]);
     useEffect(() => {
         searchUsers('uname:*');
     }, [searchUsers]);
-    return (_jsxs(_Fragment, { children: [_jsx(IconButton, { sx: buttonSx, onClick: e => setAnchorEl(e.currentTarget), children: _jsx(HowlerAvatar, { userId: userId, sx: { height: avatarHeight, width: avatarHeight } }) }), _jsx(Popover, { open: !!anchorEl, onClose: () => setAnchorEl(null), anchorEl: anchorEl, anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, children: _jsx(Box, { sx: { p: 2 }, children: _jsx(Autocomplete, { sx: { minWidth: '300px' }, options: userIds, renderInput: params => _jsx(TextField, { ...params, label: t(i18nLabel), size: "small" }), renderOption: (props, _userId) => {
+    return (_jsxs(_Fragment, { children: [multiple ? (_jsxs(Stack, { direction: "row", spacing: 0.25, alignItems: "center", children: [_jsx(AvatarGroup, { children: uniq(userIds ?? [null]).map(userId => (_jsx(HowlerAvatar, { userId: userId, sx: { height: avatarHeight, width: avatarHeight } }, userId))) }), _jsx(IconButton, { size: "small", sx: buttonSx, disabled: disabled, onClick: e => setAnchorEl(e.currentTarget), children: _jsx(Add, {}) })] })) : (_jsx(IconButton, { sx: buttonSx, disabled: disabled, onClick: e => setAnchorEl(e.currentTarget), children: _jsx(HowlerAvatar, { userId: userIds[0], sx: { height: avatarHeight, width: avatarHeight } }) })), _jsx(Popover, { open: !!anchorEl, onClose: () => setAnchorEl(null), anchorEl: anchorEl, anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, children: _jsx(Box, { sx: { p: 2 }, children: _jsx(Autocomplete, { disabled: disabled, multiple: multiple, sx: { minWidth: '300px' }, options: allUserIds, renderInput: params => _jsx(TextField, { ...params, label: t(i18nLabel), size: "small" }), renderOption: (props, _userId) => {
                             const user = users[_userId];
                             return (_jsx("li", { ...props, children: _jsxs(Box, { sx: {
                                         display: 'grid',
@@ -21,6 +23,13 @@ const UserList = ({ buttonSx = {}, userId, onChange, i18nLabel, avatarHeight = 3
                                         gridTemplateAreas: `"profile name"\n"profile email"`,
                                         columnGap: 1.5
                                     }, children: [_jsx(HowlerAvatar, { sx: { gridArea: 'profile', alignSelf: 'center', height: '32px', width: '32px' }, userId: user.username }), _jsx(Typography, { sx: { gridArea: 'name' }, variant: "body1", children: user.name }), _jsx(Typography, { sx: { gridArea: 'email' }, variant: "caption", children: user.email })] }) }));
-                        }, value: userId, onChange: (__, option) => onChange(option) }) }) })] }));
+                        }, value: userIds, onChange: (__, options) => {
+                            if (multiple) {
+                                onChange(Array.isArray(options) ? options : [options]);
+                            }
+                            else {
+                                onChange([Array.isArray(options) ? (options[0] ?? null) : options]);
+                            }
+                        } }) }) })] }));
 };
 export default UserList;

package/components/routes/analytics/AnalyticDetails.js

@@ -51,7 +51,7 @@ const AnalyticDetails = () => {
             _setFilter(detection);
         }
     }, [filter]);
-    const onOwnerChange = useCallback(async (ownerId) => {
+    const onOwnerChange = useCallback(async ([ownerId]) => {
         const result = await dispatchApi(api.analytic.owner.post(analytic.analytic_id, { username: ownerId }), {
             throwError: true,
             showError: true
@@ -108,7 +108,7 @@ const AnalyticDetails = () => {
                                                 marginTop: '0 !important',
                                                 marginLeft: `${theme.spacing(-1)} !important`,
                                                 marginRight: `${theme.spacing(-1)} !important`
-                                            }, userId: analytic?.owner, onChange: onOwnerChange, i18nLabel: "route.analytics.set.owner" })) : (_jsx(HowlerAvatar, { userId: analytic?.owner })), _jsx(Stack, { children: users[analytic?.owner] ? (_jsxs(_Fragment, { children: [_jsx(Typography, { variant: "body1", children: users[analytic?.owner].name }), _jsx(Typography, { component: "a", href: `mailto:${users[analytic?.owner].email}`, variant: "caption", color: "text.secondary", children: users[analytic?.owner].email })] })) : (_jsxs(_Fragment, { children: [_jsx(Skeleton, { variant: "text", width: "70px" }), _jsx(Skeleton, { variant: "text", width: "60px" })] })) })] })] }), filteredContributors.length > 0 && (_jsxs(Stack, { spacing: 1, children: [_jsx(Typography, { variant: "body1", color: "text.secondary", children: t('route.analytics.contributors') }), _jsx(Stack, { direction: "row", alignItems: "center", spacing: 1, children: filteredContributors.map(_user => (_jsx(HowlerAvatar, { userId: _user }, _user))) })] })), analytic?.rule_crontab && (_jsxs(Stack, { direction: "row", spacing: 1, children: [_jsxs(Stack, { spacing: 1, justifyContent: "space-between", children: [_jsx(Typography, { variant: "body1", color: "text.secondary", children: t('rule.interval') }), editingInterval ? (_jsxs(FormControl, { sx: { minWidth: '200px' }, children: [_jsx(InputLabel, { children: t('rule.interval') }), _jsx(Select, { size: "small", label: t('rule.interval'), onChange: event => setCrontab(event.target.value), value: crontab, children: RULE_INTERVALS.map(interval => (_jsx(MenuItem, { value: interval.crontab, children: t(interval.key) }, interval.key))) })] })) : (_jsx("code", { style: {
+                                            }, userIds: [analytic?.owner], onChange: onOwnerChange, i18nLabel: "route.analytics.set.owner" })) : (_jsx(HowlerAvatar, { userId: analytic?.owner })), _jsx(Stack, { children: users[analytic?.owner] ? (_jsxs(_Fragment, { children: [_jsx(Typography, { variant: "body1", children: users[analytic?.owner].name }), _jsx(Typography, { component: "a", href: `mailto:${users[analytic?.owner].email}`, variant: "caption", color: "text.secondary", children: users[analytic?.owner].email })] })) : (_jsxs(_Fragment, { children: [_jsx(Skeleton, { variant: "text", width: "70px" }), _jsx(Skeleton, { variant: "text", width: "60px" })] })) })] })] }), filteredContributors.length > 0 && (_jsxs(Stack, { spacing: 1, children: [_jsx(Typography, { variant: "body1", color: "text.secondary", children: t('route.analytics.contributors') }), _jsx(Stack, { direction: "row", alignItems: "center", spacing: 1, children: filteredContributors.map(_user => (_jsx(HowlerAvatar, { userId: _user }, _user))) })] })), analytic?.rule_crontab && (_jsxs(Stack, { direction: "row", spacing: 1, children: [_jsxs(Stack, { spacing: 1, justifyContent: "space-between", children: [_jsx(Typography, { variant: "body1", color: "text.secondary", children: t('rule.interval') }), editingInterval ? (_jsxs(FormControl, { sx: { minWidth: '200px' }, children: [_jsx(InputLabel, { children: t('rule.interval') }), _jsx(Select, { size: "small", label: t('rule.interval'), onChange: event => setCrontab(event.target.value), value: crontab, children: RULE_INTERVALS.map(interval => (_jsx(MenuItem, { value: interval.crontab, children: t(interval.key) }, interval.key))) })] })) : (_jsx("code", { style: {
                                                 backgroundColor: theme.palette.background.paper,
                                                 padding: theme.spacing(0.5),
                                                 alignSelf: 'start',

package/components/routes/cases/CaseViewer.js

@@ -1,38 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Skeleton, Stack } from '@mui/material';
-import api from '@cccsaurora/howler-ui/api';
-import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
-import { memo, useEffect, useState } from 'react';
+import { Box, Stack } from '@mui/material';
+import { memo } from 'react';
 import { useParams } from 'react-router-dom';
 import NotFoundPage from '../404';
+import ErrorBoundary from '../ErrorBoundary';
 import CaseDashboard from './detail/CaseDashboard';
+import CaseDetails from './detail/CaseDetails';
 import CaseSidebar from './detail/CaseSidebar';
 import ItemPage from './detail/ItemPage';
+import useCase from './hooks/useCase';
 const CaseViewer = () => {
     const params = useParams();
-    const { dispatchApi } = useMyApi();
-    const [_case, setCase] = useState();
-    const [loading, setLoading] = useState(false);
-    const [notFound, setNotFound] = useState(false);
-    useEffect(() => {
-        if (!params.id) {
-            return;
-        }
-        setLoading(true);
-        dispatchApi(api.v2.case.get(params.id))
-            .then(_dossier => {
-            setCase(_dossier);
-        })
-            .catch(() => setNotFound(true))
-            .finally(() => setLoading(false));
-    }, [dispatchApi, params.id]);
-    if (notFound) {
+    const { case: _case, missing } = useCase({ caseId: params.id });
+    if (missing) {
         return _jsx(NotFoundPage, {});
     }
-    return (_jsxs(Stack, { direction: "row", height: "100%", children: [_jsx(CaseSidebar, { case: _case }), _jsxs(Box, { sx: {
+    return (_jsxs(Stack, { direction: "row", height: "100%", children: [_jsx(CaseSidebar, { case: _case }), _jsx(Box, { sx: {
                     maxHeight: 'calc(100vh - 64px)',
                     flex: 1,
                     overflow: 'auto'
-                }, children: [loading && _jsx(Skeleton, { variant: "rounded", height: 240 }), !_case || location.pathname.endsWith(_case.case_id) ? (_jsx(CaseDashboard, { case: _case })) : (_jsx(ItemPage, { case: _case }))] })] }));
+                }, children: _jsx(ErrorBoundary, { children: !_case || location.pathname.endsWith(_case.case_id) ? (_jsx(CaseDashboard, { case: _case })) : (_jsx(ItemPage, { case: _case })) }) }), _jsx(CaseDetails, { case: _case })] }));
 };
 export default memo(CaseViewer);

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Divider, Pagination, Stack, Typography, useTheme } from '@mui/material';
+import { Box, Divider, Pagination, Skeleton, Stack, Typography, useTheme } from '@mui/material';
 import HitCard from '@cccsaurora/howler-ui/components/elements/hit/HitCard';
 import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
 import { chunk, uniq } from 'lodash-es';
@@ -11,6 +11,9 @@ const AlertPanel = ({ case: _case }) => {
     const { t } = useTranslation();
     const [alertPage, setAlertPage] = useState(1);
     const alertPages = useMemo(() => chunk(uniq((_case?.items ?? []).filter(item => item.type === 'hit')), 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.alerts') }), _jsx(Pagination, { count: alertPages.length, page: alertPage, onChange: (_, page) => setAlertPage(page) })] }), _jsx(Divider, {}), alertPages[alertPage - 1].map(item => (_jsxs(Box, { position: "relative", children: [_jsx(HitCard, { layout: HitLayout.DENSE, id: item.id }), _jsx(Box, { component: Link, to: item.path, sx: {
                             position: 'absolute',
                             top: 0,

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

@@ -1,15 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Card, CardContent, CardHeader, Divider, Grid, useTheme } from '@mui/material';
+import { Grid, useTheme } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
-import Markdown from '@cccsaurora/howler-ui/components/elements/display/Markdown';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import dayjs from 'dayjs';
-import { useCallback, useEffect, useState } from 'react';
+import { get } from 'lodash-es';
+import { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import useCase from '../hooks/useCase';
+import CaseAggregate from './aggregates/CaseAggregate';
 import AlertPanel from './AlertPanel';
-import CaseAggregate from './CaseAggregate';
+import CaseOverview from './CaseOverview';
 import RelatedCasePanel from './RelatedCasePanel';
 import TaskPanel from './TaskPanel';
+const AGGREGATE_FIELDS = [
+    ['howler.outline.threat', 'material-symbols:warning-rounded', 'warning.main', 'page.cases.dashboard.threat'],
+    ['howler.outline.target', 'material-symbols:group', 'primary.main', 'page.cases.dashboard.target'],
+    ['howler.outline.indicators', 'fluent:number-symbol-24-filled', null, 'page.cases.dashboard.indicators']
+];
 const getDuration = (case_) => {
     if (case_?.start) {
         return dayjs.duration(dayjs(case_?.end ?? new Date()).diff(dayjs(case_.start), 'minute'), 'minute');
@@ -19,31 +26,21 @@ const CaseDashboard = ({ case: providedCase, caseId }) => {
     const { t } = useTranslation();
     const { dispatchApi } = useMyApi();
     const theme = useTheme();
-    const [_case, setCase] = useState(providedCase);
+    const { case: _case, updateCase } = useCase({ case: providedCase, caseId });
+    const [records, setRecords] = useState(null);
+    const ids = useMemo(() => (_case?.items ?? []).filter(item => ['hit', 'observable'].includes(item.type)).map(item => item.id), [_case?.items]);
     useEffect(() => {
-        if (providedCase) {
-            setCase(providedCase);
-        }
-    }, [providedCase]);
-    useEffect(() => {
-        if (caseId) {
-            dispatchApi(api.v2.case.get(caseId), { throwError: false }).then(setCase);
-        }
-    }, [caseId, dispatchApi]);
-    const updateCase = useCallback(async (_updatedCase) => {
-        if (!_case?.case_id) {
-            return;
-        }
-        try {
-            setCase(await dispatchApi(api.v2.case.put(_case.case_id, _updatedCase)));
-        }
-        finally {
+        if (ids?.length < 1) {
             return;
         }
-    }, [_case?.case_id, dispatchApi]);
+        dispatchApi(api.v2.search.post(['hit', 'observable'], {
+            query: `howler.id:(${ids?.join(' OR ') || '*'})`,
+            fl: AGGREGATE_FIELDS.map(([field]) => field).join(',')
+        })).then(response => setRecords(response.items));
+    }, [dispatchApi, ids]);
     if (!_case) {
         return null;
     }
-    return (_jsxs(Grid, { container: true, spacing: 5, width: "100%", px: 3, children: [_jsx(Grid, { item: true, xs: 12, children: _jsxs(Card, { children: [_jsx(CardHeader, { title: _case.title, subheader: _case.summary }), _jsx(Divider, {}), _jsx(CardContent, { children: _jsx(Markdown, { md: _case.overview }) })] }) }), _jsx(Grid, { item: true, xs: 12, md: 6, xl: 3, children: _jsx(CaseAggregate, { icon: "material-symbols:warning-rounded", iconColor: theme.palette.warning.main, field: "howler.outline.threat", ids: _case.items.filter(item => ['hit', 'observable'].includes(item.type)).map(item => item.id), subtitle: t('page.cases.dashboard.threat') }) }), _jsx(Grid, { item: true, xs: 12, md: 6, xl: 3, children: _jsx(CaseAggregate, { icon: "material-symbols:group", iconColor: theme.palette.primary.main, field: "howler.outline.target", ids: _case.items.filter(item => ['hit', 'observable'].includes(item.type)).map(item => item.id), subtitle: t('page.cases.dashboard.target') }) }), _jsx(Grid, { item: true, xs: 12, md: 6, xl: 3, children: _jsx(CaseAggregate, { icon: "fluent:number-symbol-24-filled", field: "howler.outline.indicators", ids: _case.items.filter(item => ['hit', 'observable'].includes(item.type)).map(item => item.id), subtitle: t('page.cases.dashboard.indicators') }) }), _jsx(Grid, { item: true, xs: 12, md: 6, xl: 3, children: _jsx(CaseAggregate, { icon: "mingcute:heartbeat-line", iconColor: theme.palette.error.light, title: getDuration(_case).format('HH[h] mm[m]'), ids: _case.items.filter(item => ['hit', 'observable'].includes(item.type)).map(item => item.id), subtitle: t('page.cases.dashboard.duration') }) }), _jsx(Grid, { item: true, xs: 12, children: _jsx(TaskPanel, { case: _case, updateCase: updateCase }) }), _jsx(Grid, { item: true, xs: 12, children: _jsx(AlertPanel, { case: _case }) }), _jsx(Grid, { item: true, xs: 12, children: _jsx(RelatedCasePanel, { case: _case }) })] }));
+    return (_jsxs(Grid, { container: true, spacing: 5, width: "100%", px: 3, children: [_jsx(Grid, { item: true, xs: 12, children: _jsx(CaseOverview, { case: _case, updateCase: updateCase }) }), AGGREGATE_FIELDS.map(([field, icon, iconColor, subtitle]) => (_jsx(Grid, { item: true, xs: 12, md: 6, xl: 3, children: _jsx(CaseAggregate, { icon: icon, iconColor: iconColor && get(theme.palette, iconColor), field: field, records: records, subtitle: t(subtitle) }) }, field))), _jsx(Grid, { item: true, xs: 12, md: 6, xl: 3, children: _jsx(CaseAggregate, { icon: "mingcute:heartbeat-line", iconColor: theme.palette.error.light, title: getDuration(_case).format('HH[h] mm[m]'), subtitle: t('page.cases.dashboard.duration') }) }), _jsx(Grid, { item: true, xs: 12, children: _jsx(TaskPanel, { case: _case, updateCase: updateCase }) }), _jsx(Grid, { item: true, xs: 12, children: _jsx(AlertPanel, { case: _case }) }), _jsx(Grid, { item: true, xs: 12, children: _jsx(RelatedCasePanel, { case: _case }) })] }));
 };
 export default CaseDashboard;

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

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

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

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check, FormatListBulleted, HourglassBottom, Pause, People, WarningRounded } from '@mui/icons-material';
+import { Autocomplete, Card, Chip, Divider, LinearProgress, Skeleton, Stack, Table, TableBody, TableCell, TableRow, TextField, Typography } from '@mui/material';
+import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import UserList from '@cccsaurora/howler-ui/components/elements/UserList';
+import dayjs from 'dayjs';
+import { useContext, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import useCase from '../hooks/useCase';
+import SourceAggregate from './aggregates/SourceAggregate';
+const CaseDetails = ({ case: providedCase }) => {
+    const { t } = useTranslation();
+    const { case: _case, updateCase } = useCase({ case: providedCase });
+    const { config } = useContext(ApiConfigContext);
+    const [loading, setLoading] = useState(false);
+    const wrappedUpdate = async (subset) => {
+        try {
+            setLoading(true);
+            await updateCase(subset);
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    if (!_case) {
+        return (_jsx(Card, { sx: {
+                borderRadius: 0,
+                width: '300px',
+                maxHeight: 'calc(100vh - 64px)',
+                display: 'flex',
+                flexDirection: 'column',
+                p: 1
+            }, children: _jsx(Skeleton, { variant: "rounded", height: 50 }) }));
+    }
+    return (_jsxs(Card, { elevation: 1, sx: {
+            borderRadius: 0,
+            width: '300px',
+            maxHeight: 'calc(100vh - 64px)',
+            display: 'flex',
+            flexDirection: 'column',
+            p: 1,
+            position: 'relative'
+        }, children: [_jsx(LinearProgress, { sx: { opacity: +loading, position: 'absolute', top: 0, left: 0, right: 0 } }), _jsxs(Stack, { spacing: 2, children: [_jsxs(Stack, { spacing: 1, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [{
+                                        'in-progress': _jsx(HourglassBottom, { color: "warning" }),
+                                        closed: _jsx(Check, { color: "success" }),
+                                        'on-hold': _jsx(Pause, { color: "disabled" })
+                                    }[_case.status] ?? _jsx(WarningRounded, { fontSize: "small" }), _jsx(Typography, { variant: "body1", children: t('page.cases.detail.status') })] }), _jsx(Autocomplete, { size: "small", disabled: loading, value: _case.status, options: config.lookups['howler.status'], renderInput: params => _jsx(TextField, { ...params, size: "small" }), onChange: (_ev, status) => wrappedUpdate({ status }) })] }), _jsx(Divider, {}), _jsxs(Stack, { spacing: 1, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(People, {}), _jsx(Typography, { variant: "body1", children: t('page.cases.detail.participants') })] }), _jsx(UserList, { buttonSx: { alignSelf: 'start' }, multiple: true, i18nLabel: "page.cases.detail.assignment", userIds: _case.participants ?? [], onChange: participants => wrappedUpdate({ participants }), disabled: loading })] }), _jsx(Divider, {}), _jsxs(Stack, { spacing: 1, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(FormatListBulleted, {}), _jsx(Typography, { variant: "body1", children: t('page.cases.detail.properties') })] }), _jsx(Table, { sx: { '& td': { p: 1 } }, children: _jsxs(TableBody, { children: [_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(Typography, { variant: "caption", children: t('page.cases.escalation') }) }), _jsx(TableCell, { children: _jsx(Chip, { size: "small", label: _case.escalation }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(Typography, { variant: "caption", children: t('page.cases.created') }) }), _jsx(TableCell, { children: _jsx(Typography, { variant: "caption", children: dayjs(_case.created).toString() }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(Typography, { variant: "caption", children: t('page.cases.updated') }) }), _jsx(TableCell, { children: _jsx(Typography, { variant: "caption", children: dayjs(_case.updated).toString() }) })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(Typography, { variant: "caption", children: t('page.cases.sources') }) }), _jsx(TableCell, { children: _jsx(Typography, { variant: "caption", children: _jsx(SourceAggregate, { case: _case }) }) })] })] }) })] })] })] }));
+};
+export default CaseDetails;

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

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

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

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Clear, Edit, Save } from '@mui/icons-material';
+import { Box, Card, CardContent, CardHeader, Divider, IconButton, LinearProgress, Skeleton, Stack, useTheme } from '@mui/material';
+import Markdown from '@cccsaurora/howler-ui/components/elements/display/Markdown';
+import MarkdownEditor from '@cccsaurora/howler-ui/components/elements/MarkdownEditor';
+import { useEffect, useState } from 'react';
+const CaseOverview = ({ case: _case, updateCase }) => {
+    const theme = useTheme();
+    const [editing, setEditing] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const [overview, setOverview] = useState(_case?.overview);
+    useEffect(() => {
+        if (!editing && _case?.overview) {
+            setOverview(_case.overview);
+        }
+    }, [_case?.overview, editing]);
+    if (!_case) {
+        return _jsx(Skeleton, { height: 370 });
+    }
+    return (_jsxs(Card, { children: [_jsx(CardHeader, { title: _case.title, subheader: _case.summary }), _jsxs(Stack, { children: [_jsx(Divider, {}), _jsx(LinearProgress, { sx: { opacity: +loading } })] }), _jsx(CardContent, { sx: { position: 'relative' }, children: _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Box, { flex: 1, sx: {
+                                '& > :first-child': {
+                                    marginTop: '0 !important'
+                                },
+                                '& > h1,h2,h3,h4,h5': {
+                                    fontSize: theme.typography.h5.fontSize
+                                }
+                            }, children: editing ? (_jsx(MarkdownEditor, { height: "40vh", content: overview, setContent: _content => setOverview(_content) })) : (_jsx(Markdown, { md: _case.overview })) }), _jsxs(Stack, { spacing: 1, children: [_jsx(IconButton, { size: "small", disabled: loading, onClick: async () => {
+                                        if (editing) {
+                                            try {
+                                                setLoading(true);
+                                                await updateCase({ overview });
+                                            }
+                                            finally {
+                                                setEditing(false);
+                                                setLoading(false);
+                                            }
+                                        }
+                                        else {
+                                            setEditing(true);
+                                        }
+                                    }, children: editing ? _jsx(Save, { color: loading ? 'disabled' : 'success', fontSize: "small" }) : _jsx(Edit, { fontSize: "small" }) }), editing && (_jsx(IconButton, { size: "small", disabled: loading, onClick: () => setEditing(false), children: _jsx(Clear, { color: loading ? 'disabled' : 'error', fontSize: "small" }) }))] })] }) })] }));
+};
+export default CaseOverview;

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

@@ -11,7 +11,8 @@ const CaseSidebar = ({ case: _case }) => {
     const { t } = useTranslation();
     const theme = useTheme();
     return (_jsxs(Box, { sx: {
-            width: '350px',
+            flex: 1,
+            maxWidth: '350px',
             maxHeight: 'calc(100vh - 64px)',
             display: 'flex',
             flexDirection: 'column'

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

@@ -5,5 +5,6 @@ declare const CaseTask: FC<{
     paths: string[];
     onDelete: () => void;
     onEdit: (task: Partial<Task>) => Promise<void>;
+    loading?: boolean;
 }>;
 export default CaseTask;

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

@@ -12,7 +12,7 @@ const CaseTask = ({ task, onEdit, onDelete, paths }) => {
     const [summary, setSummary] = useState(task.summary);
     const [path, setPath] = useState(task.path);
     const dirty = summary !== task.summary || path !== task.path;
-    const onOwnerChange = async (assignment) => {
+    const onOwnerChange = async ([assignment]) => {
         setLoading(true);
         await onEdit({
             assignment
@@ -26,13 +26,21 @@ const CaseTask = ({ task, onEdit, onDelete, paths }) => {
             setLoading(false);
         }
     };
-    return (_jsxs(Card, { sx: { pl: 0.5, pr: 1, py: 0.5, position: 'relative' }, children: [_jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [_jsx(Checkbox, { color: "success", checked: task.complete, size: "small", onChange: (_ev, complete) => onEdit({ complete }) }), editing ? (_jsx(TextField, { value: summary, onChange: e => setSummary(e.target.value), size: "small", fullWidth: true, sx: { minWidth: '40%' } })) : (_jsx(Typography, { sx: [task.complete && { textDecoration: 'line-through' }], children: task.summary })), task.path && !editing && _jsx(Chip, { clickable: true, component: Link, to: task.path, label: task.path }), editing && (_jsx(Autocomplete, { value: path, options: paths, onChange: (_ev, value) => setPath(value), fullWidth: true, renderInput: params => _jsx(TextField, { ...params, size: "small" }) })), task.assignment && (_jsx(UserList, { userId: task.assignment, onChange: onOwnerChange, i18nLabel: "route.cases.task.set.assignment", avatarHeight: 24 })), _jsx("div", { style: { flex: 1 } }), editing && (_jsx(Tooltip, { title: t('route.cases.task.delete'), children: _jsx(IconButton, { size: "small", color: "error", onClick: onDelete, children: _jsx(Delete, { fontSize: "small" }) }) })), _jsx(Tooltip, { title: t(editing ? 'route.cases.task.edit.save' : 'route.cases.task.edit'), children: _jsx(IconButton, { size: "small", color: editing ? 'success' : 'default', onClick: () => {
+    return (_jsxs(Card, { sx: { pl: 0.5, pr: 1, py: 0.5, position: 'relative' }, children: [_jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [_jsx(Checkbox, { disabled: loading, color: "success", checked: task.complete, size: "small", onChange: async (_ev, complete) => {
+                            try {
+                                setLoading(true);
+                                await onEdit({ complete });
+                            }
+                            finally {
+                                setLoading(false);
+                            }
+                        } }), editing ? (_jsx(TextField, { disabled: loading, value: summary, onChange: e => setSummary(e.target.value), size: "small", fullWidth: true, sx: { minWidth: '40%' } })) : (_jsx(Typography, { sx: [task.complete && { textDecoration: 'line-through' }], children: task.summary })), task.path && !editing && _jsx(Chip, { clickable: true, component: Link, to: task.path, label: task.path }), editing && (_jsx(Autocomplete, { disabled: loading, value: path, options: paths, onChange: (_ev, value) => setPath(value), fullWidth: true, renderInput: params => _jsx(TextField, { ...params, size: "small" }) })), task.assignment && (_jsx(UserList, { disabled: loading, userIds: [task.assignment], onChange: onOwnerChange, i18nLabel: "route.cases.task.set.assignment", avatarHeight: 24 })), _jsx("div", { style: { flex: 1 } }), editing && (_jsx(Tooltip, { title: t('route.cases.task.delete'), children: _jsx(IconButton, { size: "small", color: "error", onClick: onDelete, children: _jsx(Delete, { fontSize: "small" }) }) })), _jsx(Tooltip, { title: t(editing ? 'route.cases.task.edit.save' : 'route.cases.task.edit'), children: _jsx(IconButton, { size: "small", color: editing ? 'success' : 'default', onClick: () => {
                                 if (!editing) {
                                     setEditing(true);
                                     return;
                                 }
                                 setEditing(false);
                                 onSubmit();
-                            }, disabled: !dirty && editing, children: editing ? _jsx(Check, { fontSize: "small" }) : _jsx(Edit, { fontSize: "small" }) }) }), editing && (_jsx(Tooltip, { title: t('route.cases.task.edit.cancel'), children: _jsx(IconButton, { size: "small", onClick: () => setEditing(false), children: _jsx(Close, { fontSize: "small" }) }) }))] }), loading && _jsx(LinearProgress, { sx: { left: 0, bottom: 0, right: 0, position: 'absolute' } })] }, task.id));
+                            }, disabled: (!dirty && editing) || loading, children: editing ? _jsx(Check, { fontSize: "small" }) : _jsx(Edit, { fontSize: "small" }) }) }), editing && (_jsx(Tooltip, { title: t('route.cases.task.edit.cancel'), children: _jsx(IconButton, { size: "small", onClick: () => setEditing(false), disabled: loading, children: _jsx(Close, { fontSize: "small" }) }) }))] }), loading && _jsx(LinearProgress, { sx: { left: 0, bottom: 0, right: 0, position: 'absolute' } })] }, task.id));
 };
 export default CaseTask;

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Divider, Pagination, Stack, Typography, useTheme } from '@mui/material';
+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';
@@ -10,6 +10,9 @@ const RelatedCasePanel = ({ case: _case }) => {
     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.alerts') }), _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.id }), _jsx(Box, { component: Link, to: item.path, sx: {
                             position: 'absolute',
                             top: 0,

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

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

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

@@ -1,10 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Divider, Stack, Typography } from '@mui/material';
+import { Divider, Skeleton, Stack, Typography } from '@mui/material';
+import {} from 'react';
 import { useTranslation } from 'react-i18next';
 import CaseTask from './CaseTask';
 const TaskPanel = ({ case: _case, updateCase }) => {
     const { t } = useTranslation();
-    // TODO: Implement adding tasks, checking tasks off, etc.
+    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: newTask => updateCase({
                     tasks: _case.tasks.map(_task => {
                         if (_task.id !== task.id) {

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/{CaseAggregate.js → aggregates/CaseAggregate.js}

@@ -1,30 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Icon } from '@iconify/react';
-import { Card, CardContent, Stack, styled, Tooltip, tooltipClasses, Typography, useTheme } from '@mui/material';
-import api from '@cccsaurora/howler-ui/api';
-import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import { Card, CardContent, Skeleton, Stack, styled, Tooltip, tooltipClasses, Typography, useTheme } from '@mui/material';
 import { get, isEmpty, uniq } from 'lodash-es';
-import { useEffect, useState } from 'react';
+import {} from 'react';
 const NoMaxWidthTooltip = styled(({ className, ...props }) => (_jsx(Tooltip, { ...props, classes: { popper: className } })))({
     [`& .${tooltipClasses.tooltip}`]: {
         maxWidth: 'none'
     }
 });
-const CaseAggregate = ({ icon, iconColor, field, ids, title, subtitle }) => {
-    const { dispatchApi } = useMyApi();
+const CaseAggregate = ({ icon, iconColor, field, records, title, subtitle }) => {
     const theme = useTheme();
-    const [values, setValues] = useState([]);
-    useEffect(() => {
-        if (ids?.length < 1 || !field) {
-            return;
-        }
-        dispatchApi(api.v2.search.post(['hit', 'observable'], {
-            query: `howler.id:(${ids?.join(' OR ') || '*'})`,
-            fl: field
-        })).then(response => {
-            setValues(uniq(response.items.map(entry => get(entry, field)).flat()));
-        });
-    }, [dispatchApi, field, ids]);
+    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,27 @@
+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.id), [_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/hooks/useCase.d.ts

@@ -0,0 +1,13 @@
+import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
+interface CaseArguments {
+    case?: Case;
+    caseId?: string;
+}
+interface CaseResult {
+    case: Case;
+    updateCase: (update: Partial<Case>) => Promise<void>;
+    loading: boolean;
+    missing: boolean;
+}
+declare const useCase: (args: CaseArguments) => CaseResult;
+export default useCase;

package/components/routes/cases/hooks/useCase.js

@@ -0,0 +1,38 @@
+import api from '@cccsaurora/howler-ui/api';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import { useCallback, useEffect, useState } from 'react';
+const useCase = ({ caseId, case: providedCase }) => {
+    const { dispatchApi } = useMyApi();
+    const [loading, setLoading] = useState(false);
+    const [missing, setMissing] = useState(false);
+    const [_case, setCase] = useState(providedCase);
+    useEffect(() => {
+        if (providedCase) {
+            setCase(providedCase);
+        }
+    }, [providedCase]);
+    useEffect(() => {
+        if (caseId) {
+            setLoading(true);
+            dispatchApi(api.v2.case.get(caseId), { throwError: false })
+                .then(setCase)
+                .finally(() => setLoading(false));
+        }
+    }, [caseId, dispatchApi]);
+    const updateCase = useCallback(async (_updatedCase) => {
+        if (!_case?.case_id) {
+            return;
+        }
+        try {
+            setCase(await dispatchApi(api.v2.case.put(_case.case_id, _updatedCase)));
+        }
+        catch (e) {
+            setMissing(true);
+        }
+        finally {
+            return;
+        }
+    }, [_case?.case_id, dispatchApi]);
+    return { case: _case, updateCase, loading, missing };
+};
+export default useCase;

package/components/routes/overviews/OverviewViewer.js

@@ -15,7 +15,7 @@ import useMyTheme from '@cccsaurora/howler-ui/components/hooks/useMyTheme';
 import { useSearchParams } from 'react-router-dom';
 import hitsData from '@cccsaurora/howler-ui/utils/hit.json';
 import { sanitizeLuceneQuery } from '@cccsaurora/howler-ui/utils/stringUtils';
-import OverviewEditor from './OverviewEditor';
+import MarkdownEditor from '../../elements/MarkdownEditor';
 import { useStartingTemplate } from './startingTemplate';
 const OverviewViewer = () => {
     const theme = useTheme();
@@ -188,7 +188,7 @@ const OverviewViewer = () => {
                                         right: `calc(50% + 7px - ${x}px)`,
                                         mr: -2.4,
                                         pr: 1.5
-                                    }, children: _jsx(OverviewEditor, { height: "100%", content: content, setContent: setContent }) }) }), _jsx(Box, { sx: {
+                                    }, children: _jsx(MarkdownEditor, { height: "100%", content: content, setContent: setContent }) }) }), _jsx(Box, { sx: {
                                     position: 'absolute',
                                     top: 0,
                                     bottom: 0,

package/locales/en/translation.json

@@ -333,6 +333,7 @@
     "owner": "Owner",
     "page.404.description": "The page you are looking for cannot be found...",
     "page.404.title": "404: Not found",
+    "page.cases.created": "Created",
     "page.cases.dashboard": "Dashboard",
     "page.cases.dashboard.alerts": "Alerts",
     "page.cases.dashboard.duration": "Duration",
@@ -340,6 +341,12 @@
     "page.cases.dashboard.target": "Targets",
     "page.cases.dashboard.tasks": "Tasks",
     "page.cases.dashboard.threat": "Threats",
+    "page.cases.detail.participants": "Participants",
+    "page.cases.detail.properties": "Properties",
+    "page.cases.detail.status": "Status",
+    "page.cases.escalation": "Escalation",
+    "page.cases.sources": "Sources",
+    "page.cases.updated": "Updated",
     "page.dashboard.title": "Dashboard",
     "page.documentation.categories": "API Categories",
     "page.documentation.categories.category": "Category",
@@ -406,6 +413,8 @@
     "page.user.search.column.groups": "Groups",
     "page.user.search.column.username": "Username",
     "page.user.search.prompt": "Search by username, fullname, email or group",
+    "pages.cases.detail.participants": "Participants",
+    "pages.cases.detail.status": "Status",
     "password": "New Password",
     "password.confirm": "Confirm Password",
     "password.match": "Password and Confirm Password must match",

package/locales/fr/translation.json

@@ -337,6 +337,7 @@
     "owner": "Propriétaire",
     "page.404.description": "La page que vous recherchez est introuvable ...",
     "page.404.title": "404: Introuvable",
+    "page.cases.created": "Créé",
     "page.cases.dashboard": "Tableau de bord",
     "page.cases.dashboard.alerts": "Alertes",
     "page.cases.dashboard.duration": "Durée",
@@ -344,6 +345,12 @@
     "page.cases.dashboard.target": "Cibles",
     "page.cases.dashboard.tasks": "Tâches",
     "page.cases.dashboard.threat": "Menaces",
+    "page.cases.detail.participants": "Participants",
+    "page.cases.detail.properties": "Propriétés",
+    "page.cases.detail.status": "Statut",
+    "page.cases.escalation": "Escalade",
+    "page.cases.sources": "Sources",
+    "page.cases.updated": "Mis à jour",
     "page.dashboard.title": "Tableau de bord",
     "page.documentation.categories": "Catégories d'API",
     "page.documentation.categories.category": "Catégorie",
@@ -411,6 +418,8 @@
     "page.user.search.column.groups": "Groupes",
     "page.user.search.column.username": "Nom d'utilisateur",
     "page.user.search.prompt": "Rechercher par nom d'utilisateur, nom complet, e-mail ou groupe",
+    "pages.cases.detail.participants": "Participants",
+    "pages.cases.detail.status": "Statut",
     "password": "Nouveau mot de passe",
     "password.confirm": "Confirmer le mot de passe",
     "password.match": "Le mot de passe et le mot de passe de confirmation doivent correspondre",

package/models/entities/generated/Case.d.ts

@@ -17,6 +17,7 @@ export interface Case {
   overview?: string;
   participants?: string[];
   rules?: Rule[];
+  status?: string;
   start?: string;
   summary?: string;
   targets?: string[];

package/package.json

@@ -101,140 +101,83 @@
     "internal-slot": "1.0.7"
   },
   "type": "module",
-  "version": "2.17.0-dev.508",
+  "version": "2.17.0-dev.513",
   "exports": {
     "./i18n": "./i18n.js",
     "./index.css": "./index.css",
-    "./api/*": "./api/*.js",
-    "./api": "./api/index.js",
-    "./models/*": "./models/*.js",
-    "./locales/*.json": "./locales/*.json",
+    "./components/*": "./components/*.js",
     "./branding/*": "./branding/*.js",
+    "./tests/*": "./tests/*.js",
+    "./commons/*": "./commons/*.js",
     "./utils/*": "./utils/*.js",
     "./utils/*.json": "./utils/*.json",
+    "./locales/*.json": "./locales/*.json",
+    "./api/*": "./api/*.js",
+    "./api": "./api/index.js",
+    "./plugins/*": "./plugins/*.js",
+    "./models/*": "./models/*.js",
     "./rest/*": "./rest/*.js",
     "./rest": "./rest/index.js",
-    "./components/*": "./components/*.js",
-    "./commons/*": "./commons/*.js",
-    "./plugins/*": "./plugins/*.js",
-    "./tests/*": "./tests/*.js",
-    "./api/analytic/*": "./api/analytic/*.js",
-    "./api/analytic": "./api/analytic/index.js",
-    "./api/template/*": "./api/template/*.js",
-    "./api/template": "./api/template/index.js",
-    "./api/hit/*": "./api/hit/*.js",
-    "./api/hit": "./api/hit/index.js",
-    "./api/notebook/*": "./api/notebook/*.js",
-    "./api/notebook": "./api/notebook/index.js",
-    "./api/auth/*": "./api/auth/*.js",
-    "./api/auth": "./api/auth/index.js",
-    "./api/search/*": "./api/search/*.js",
-    "./api/search": "./api/search/index.js",
-    "./api/dossier/*": "./api/dossier/*.js",
-    "./api/dossier": "./api/dossier/index.js",
-    "./api/view/*": "./api/view/*.js",
-    "./api/view": "./api/view/index.js",
-    "./api/overview/*": "./api/overview/*.js",
-    "./api/overview": "./api/overview/index.js",
-    "./api/v2/*": "./api/v2/*.js",
-    "./api/v2": "./api/v2/index.js",
-    "./api/user/*": "./api/user/*.js",
-    "./api/user": "./api/user/index.js",
-    "./api/action/*": "./api/action/*.js",
-    "./api/action": "./api/action/index.js",
-    "./api/configs/*": "./api/configs/*.js",
-    "./api/configs": "./api/configs/index.js",
-    "./api/analytic/comments/*": "./api/analytic/comments/*.js",
-    "./api/analytic/comments": "./api/analytic/comments/index.js",
-    "./api/analytic/notebooks/*": "./api/analytic/notebooks/*.js",
-    "./api/analytic/notebooks": "./api/analytic/notebooks/index.js",
-    "./api/hit/comments/*": "./api/hit/comments/*.js",
-    "./api/hit/comments": "./api/hit/comments/index.js",
-    "./api/search/facet/*": "./api/search/facet/*.js",
-    "./api/search/facet": "./api/search/facet/index.js",
-    "./api/search/explain/*": "./api/search/explain/*.js",
-    "./api/search/count/*": "./api/search/count/*.js",
-    "./api/search/count": "./api/search/count/index.js",
-    "./api/search/fields/*": "./api/search/fields/*.js",
-    "./api/search/fields": "./api/search/fields/index.js",
-    "./api/search/eql/*": "./api/search/eql/*.js",
-    "./api/search/sigma/*": "./api/search/sigma/*.js",
-    "./api/search/grouped/*": "./api/search/grouped/*.js",
-    "./api/search/grouped": "./api/search/grouped/index.js",
-    "./api/search/histogram/*": "./api/search/histogram/*.js",
-    "./api/search/histogram": "./api/search/histogram/index.js",
-    "./api/v2/case/*": "./api/v2/case/*.js",
-    "./api/v2/case": "./api/v2/case/index.js",
-    "./api/v2/search/*": "./api/v2/search/*.js",
-    "./api/v2/search": "./api/v2/search/index.js",
-    "./api/user/avatar/*": "./api/user/avatar/*.js",
-    "./api/user/avatar": "./api/user/avatar/index.js",
-    "./models/socket/*": "./models/socket/*.js",
-    "./models/entities/*": "./models/entities/*.js",
-    "./models/entities/generated/*": "./models/entities/generated/*.js",
-    "./locales/en/*.json": "./locales/en/*.json",
-    "./locales/fr/*.json": "./locales/fr/*.json",
-    "./locales/en/help/*.json": "./locales/en/help/*.json",
-    "./locales/fr/help/*.json": "./locales/fr/help/*.json",
-    "./components/hooks/*": "./components/hooks/*.js",
-    "./components/app/*": "./components/app/*.js",
     "./components/logins/*": "./components/logins/*.js",
+    "./components/app/*": "./components/app/*.js",
     "./components/elements/*": "./components/elements/*.js",
+    "./components/hooks/*": "./components/hooks/*.js",
     "./components/routes/*": "./components/routes/*.js",
-    "./components/app/hooks/*": "./components/app/hooks/*.js",
-    "./components/app/providers/*": "./components/app/providers/*.js",
-    "./components/app/drawers/*": "./components/app/drawers/*.js",
-    "./components/logins/hooks/*": "./components/logins/hooks/*.js",
     "./components/logins/auth/*": "./components/logins/auth/*.js",
-    "./components/elements/addons/*": "./components/elements/addons/*.js",
+    "./components/logins/hooks/*": "./components/logins/hooks/*.js",
+    "./components/app/drawers/*": "./components/app/drawers/*.js",
+    "./components/app/providers/*": "./components/app/providers/*.js",
+    "./components/app/hooks/*": "./components/app/hooks/*.js",
+    "./components/elements/display/*": "./components/elements/display/*.js",
     "./components/elements/hit/*": "./components/elements/hit/*.js",
     "./components/elements/view/*": "./components/elements/view/*.js",
-    "./components/elements/display/*": "./components/elements/display/*.js",
+    "./components/elements/addons/*": "./components/elements/addons/*.js",
+    "./components/elements/display/handlebars/*": "./components/elements/display/handlebars/*.js",
+    "./components/elements/display/modals/*": "./components/elements/display/modals/*.js",
+    "./components/elements/display/features/*": "./components/elements/display/features/*.js",
+    "./components/elements/display/icons/*": "./components/elements/display/icons/*.js",
+    "./components/elements/display/json/*": "./components/elements/display/json/*.js",
+    "./components/elements/display/markdownPlugins/*.md": "./components/elements/display/markdownPlugins/*.md.js",
+    "./components/elements/display/icons/svg/*": "./components/elements/display/icons/svg/*.js",
+    "./components/elements/hit/actions/*": "./components/elements/hit/actions/*.js",
+    "./components/elements/hit/related/*": "./components/elements/hit/related/*.js",
+    "./components/elements/hit/elements/*": "./components/elements/hit/elements/*.js",
+    "./components/elements/hit/outlines/*": "./components/elements/hit/outlines/*.js",
+    "./components/elements/hit/aggregate/*": "./components/elements/hit/aggregate/*.js",
+    "./components/elements/hit/outlines/al/*": "./components/elements/hit/outlines/al/*.js",
     "./components/elements/addons/buttons/*": "./components/elements/addons/buttons/*.js",
     "./components/elements/addons/buttons": "./components/elements/addons/buttons/index.js",
-    "./components/elements/addons/search/*": "./components/elements/addons/search/*.js",
-    "./components/elements/addons/layout/*": "./components/elements/addons/layout/*.js",
     "./components/elements/addons/lists/*": "./components/elements/addons/lists/*.js",
     "./components/elements/addons/lists": "./components/elements/addons/lists/index.js",
+    "./components/elements/addons/search/*": "./components/elements/addons/search/*.js",
+    "./components/elements/addons/layout/*": "./components/elements/addons/layout/*.js",
+    "./components/elements/addons/lists/table/*": "./components/elements/addons/lists/table/*.js",
+    "./components/elements/addons/lists/table": "./components/elements/addons/lists/table/index.js",
+    "./components/elements/addons/lists/hooks/*": "./components/elements/addons/lists/hooks/*.js",
     "./components/elements/addons/search/phrase/*": "./components/elements/addons/search/phrase/*.js",
     "./components/elements/addons/search/phrase": "./components/elements/addons/search/phrase/index.js",
     "./components/elements/addons/search/phrase/word/*": "./components/elements/addons/search/phrase/word/*.js",
     "./components/elements/addons/search/phrase/word/consumers/*": "./components/elements/addons/search/phrase/word/consumers/*.js",
     "./components/elements/addons/layout/vsbox/*": "./components/elements/addons/layout/vsbox/*.js",
-    "./components/elements/addons/lists/hooks/*": "./components/elements/addons/lists/hooks/*.js",
-    "./components/elements/addons/lists/table/*": "./components/elements/addons/lists/table/*.js",
-    "./components/elements/addons/lists/table": "./components/elements/addons/lists/table/index.js",
-    "./components/elements/hit/aggregate/*": "./components/elements/hit/aggregate/*.js",
-    "./components/elements/hit/outlines/*": "./components/elements/hit/outlines/*.js",
-    "./components/elements/hit/related/*": "./components/elements/hit/related/*.js",
-    "./components/elements/hit/elements/*": "./components/elements/hit/elements/*.js",
-    "./components/elements/hit/actions/*": "./components/elements/hit/actions/*.js",
-    "./components/elements/hit/outlines/al/*": "./components/elements/hit/outlines/al/*.js",
-    "./components/elements/display/icons/*": "./components/elements/display/icons/*.js",
-    "./components/elements/display/modals/*": "./components/elements/display/modals/*.js",
-    "./components/elements/display/markdownPlugins/*.md": "./components/elements/display/markdownPlugins/*.md.js",
-    "./components/elements/display/json/*": "./components/elements/display/json/*.js",
-    "./components/elements/display/handlebars/*": "./components/elements/display/handlebars/*.js",
-    "./components/elements/display/features/*": "./components/elements/display/features/*.js",
-    "./components/elements/display/icons/svg/*": "./components/elements/display/icons/svg/*.js",
-    "./components/routes/admin/*": "./components/routes/admin/*.js",
-    "./components/routes/dossiers/*": "./components/routes/dossiers/*.js",
-    "./components/routes/cases/*": "./components/routes/cases/*.js",
-    "./components/routes/advanced/*": "./components/routes/advanced/*.js",
-    "./components/routes/observables/*": "./components/routes/observables/*.js",
-    "./components/routes/hits/*": "./components/routes/hits/*.js",
-    "./components/routes/settings/*": "./components/routes/settings/*.js",
     "./components/routes/home/*": "./components/routes/home/*.js",
     "./components/routes/home": "./components/routes/home/index.js",
-    "./components/routes/analytics/*": "./components/routes/analytics/*.js",
-    "./components/routes/help/*": "./components/routes/help/*.js",
     "./components/routes/action/*": "./components/routes/action/*.js",
-    "./components/routes/views/*": "./components/routes/views/*.js",
-    "./components/routes/overviews/*": "./components/routes/overviews/*.js",
     "./components/routes/templates/*": "./components/routes/templates/*.js",
-    "./components/routes/admin/users/*": "./components/routes/admin/users/*.js",
-    "./components/routes/cases/detail/*": "./components/routes/cases/detail/*.js",
-    "./components/routes/cases/detail/sidebar/*": "./components/routes/cases/detail/sidebar/*.js",
+    "./components/routes/dossiers/*": "./components/routes/dossiers/*.js",
+    "./components/routes/overviews/*": "./components/routes/overviews/*.js",
+    "./components/routes/views/*": "./components/routes/views/*.js",
+    "./components/routes/hits/*": "./components/routes/hits/*.js",
+    "./components/routes/analytics/*": "./components/routes/analytics/*.js",
+    "./components/routes/advanced/*": "./components/routes/advanced/*.js",
+    "./components/routes/help/*": "./components/routes/help/*.js",
+    "./components/routes/admin/*": "./components/routes/admin/*.js",
+    "./components/routes/settings/*": "./components/routes/settings/*.js",
+    "./components/routes/observables/*": "./components/routes/observables/*.js",
+    "./components/routes/cases/*": "./components/routes/cases/*.js",
+    "./components/routes/action/edit/*": "./components/routes/action/edit/*.js",
+    "./components/routes/action/view/*": "./components/routes/action/view/*.js",
+    "./components/routes/action/shared/*": "./components/routes/action/shared/*.js",
+    "./components/routes/overviews/template/*": "./components/routes/overviews/template/*.js",
     "./components/routes/hits/search/*": "./components/routes/hits/search/*.js",
     "./components/routes/hits/view/*": "./components/routes/hits/view/*.js",
     "./components/routes/hits/search/grid/*": "./components/routes/hits/search/grid/*.js",
@@ -242,34 +185,93 @@
     "./components/routes/analytics/widgets/*": "./components/routes/analytics/widgets/*.js",
     "./components/routes/help/components/*": "./components/routes/help/components/*.js",
     "./components/routes/help/markdown/*.md": "./components/routes/help/markdown/*.md.js",
-    "./components/routes/help/markdown/en/*.md": "./components/routes/help/markdown/en/*.md.js",
     "./components/routes/help/markdown/fr/*.md": "./components/routes/help/markdown/fr/*.md.js",
-    "./components/routes/action/view/*": "./components/routes/action/view/*.js",
-    "./components/routes/action/shared/*": "./components/routes/action/shared/*.js",
-    "./components/routes/action/edit/*": "./components/routes/action/edit/*.js",
-    "./components/routes/overviews/template/*": "./components/routes/overviews/template/*.js",
+    "./components/routes/help/markdown/en/*.md": "./components/routes/help/markdown/en/*.md.js",
+    "./components/routes/admin/users/*": "./components/routes/admin/users/*.js",
+    "./components/routes/cases/hooks/*": "./components/routes/cases/hooks/*.js",
+    "./components/routes/cases/detail/*": "./components/routes/cases/detail/*.js",
+    "./components/routes/cases/detail/sidebar/*": "./components/routes/cases/detail/sidebar/*.js",
+    "./components/routes/cases/detail/aggregates/*": "./components/routes/cases/detail/aggregates/*.js",
     "./commons/components/*": "./commons/components/*.js",
+    "./commons/components/breadcrumbs/*": "./commons/components/breadcrumbs/*.js",
+    "./commons/components/app/*": "./commons/components/app/*.js",
     "./commons/components/utils/*": "./commons/components/utils/*.js",
+    "./commons/components/notification/*": "./commons/components/notification/*.js",
+    "./commons/components/notification": "./commons/components/notification/index.js",
+    "./commons/components/display/*": "./commons/components/display/*.js",
     "./commons/components/leftnav/*": "./commons/components/leftnav/*.js",
+    "./commons/components/search/*": "./commons/components/search/*.js",
     "./commons/components/pages/*": "./commons/components/pages/*.js",
     "./commons/components/topnav/*": "./commons/components/topnav/*.js",
-    "./commons/components/app/*": "./commons/components/app/*.js",
-    "./commons/components/search/*": "./commons/components/search/*.js",
-    "./commons/components/breadcrumbs/*": "./commons/components/breadcrumbs/*.js",
-    "./commons/components/display/*": "./commons/components/display/*.js",
-    "./commons/components/notification/*": "./commons/components/notification/*.js",
-    "./commons/components/notification": "./commons/components/notification/index.js",
-    "./commons/components/utils/hooks/*": "./commons/components/utils/hooks/*.js",
-    "./commons/components/pages/hooks/*": "./commons/components/pages/hooks/*.js",
+    "./commons/components/app/providers/*": "./commons/components/app/providers/*.js",
     "./commons/components/app/hooks/*": "./commons/components/app/hooks/*.js",
     "./commons/components/app/hooks": "./commons/components/app/hooks/index.js",
-    "./commons/components/app/providers/*": "./commons/components/app/providers/*.js",
-    "./commons/components/display/hooks/*": "./commons/components/display/hooks/*.js",
+    "./commons/components/utils/hooks/*": "./commons/components/utils/hooks/*.js",
     "./commons/components/notification/elements/*": "./commons/components/notification/elements/*.js",
     "./commons/components/notification/elements/item/*": "./commons/components/notification/elements/item/*.js",
+    "./commons/components/display/hooks/*": "./commons/components/display/hooks/*.js",
+    "./commons/components/pages/hooks/*": "./commons/components/pages/hooks/*.js",
+    "./locales/fr/*.json": "./locales/fr/*.json",
+    "./locales/en/*.json": "./locales/en/*.json",
+    "./locales/fr/help/*.json": "./locales/fr/help/*.json",
+    "./locales/en/help/*.json": "./locales/en/help/*.json",
+    "./api/overview/*": "./api/overview/*.js",
+    "./api/overview": "./api/overview/index.js",
+    "./api/v2/*": "./api/v2/*.js",
+    "./api/v2": "./api/v2/index.js",
+    "./api/action/*": "./api/action/*.js",
+    "./api/action": "./api/action/index.js",
+    "./api/auth/*": "./api/auth/*.js",
+    "./api/auth": "./api/auth/index.js",
+    "./api/notebook/*": "./api/notebook/*.js",
+    "./api/notebook": "./api/notebook/index.js",
+    "./api/template/*": "./api/template/*.js",
+    "./api/template": "./api/template/index.js",
+    "./api/analytic/*": "./api/analytic/*.js",
+    "./api/analytic": "./api/analytic/index.js",
+    "./api/user/*": "./api/user/*.js",
+    "./api/user": "./api/user/index.js",
+    "./api/dossier/*": "./api/dossier/*.js",
+    "./api/dossier": "./api/dossier/index.js",
+    "./api/search/*": "./api/search/*.js",
+    "./api/search": "./api/search/index.js",
+    "./api/configs/*": "./api/configs/*.js",
+    "./api/configs": "./api/configs/index.js",
+    "./api/hit/*": "./api/hit/*.js",
+    "./api/hit": "./api/hit/index.js",
+    "./api/view/*": "./api/view/*.js",
+    "./api/view": "./api/view/index.js",
+    "./api/v2/search/*": "./api/v2/search/*.js",
+    "./api/v2/search": "./api/v2/search/index.js",
+    "./api/v2/case/*": "./api/v2/case/*.js",
+    "./api/v2/case": "./api/v2/case/index.js",
+    "./api/analytic/comments/*": "./api/analytic/comments/*.js",
+    "./api/analytic/comments": "./api/analytic/comments/index.js",
+    "./api/analytic/notebooks/*": "./api/analytic/notebooks/*.js",
+    "./api/analytic/notebooks": "./api/analytic/notebooks/index.js",
+    "./api/user/avatar/*": "./api/user/avatar/*.js",
+    "./api/user/avatar": "./api/user/avatar/index.js",
+    "./api/search/eql/*": "./api/search/eql/*.js",
+    "./api/search/histogram/*": "./api/search/histogram/*.js",
+    "./api/search/histogram": "./api/search/histogram/index.js",
+    "./api/search/facet/*": "./api/search/facet/*.js",
+    "./api/search/facet": "./api/search/facet/index.js",
+    "./api/search/fields/*": "./api/search/fields/*.js",
+    "./api/search/fields": "./api/search/fields/index.js",
+    "./api/search/grouped/*": "./api/search/grouped/*.js",
+    "./api/search/grouped": "./api/search/grouped/index.js",
+    "./api/search/sigma/*": "./api/search/sigma/*.js",
+    "./api/search/explain/*": "./api/search/explain/*.js",
+    "./api/search/count/*": "./api/search/count/*.js",
+    "./api/search/count": "./api/search/count/index.js",
+    "./api/hit/comments/*": "./api/hit/comments/*.js",
+    "./api/hit/comments": "./api/hit/comments/index.js",
     "./plugins/clue/*": "./plugins/clue/*.js",
     "./plugins/clue": "./plugins/clue/index.js",
+    "./plugins/clue/components/*": "./plugins/clue/components/*.js",
     "./plugins/clue/locales/*": "./plugins/clue/locales/*.js",
-    "./plugins/clue/components/*": "./plugins/clue/components/*.js"
+    "./models/socket/*": "./models/socket/*.js",
+    "./models/entities/*": "./models/entities/*.js",
+    "./models/entities/generated/*": "./models/entities/generated/*.js"
   }
 }

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

@@ -1,10 +0,0 @@
-import { type FC } from 'react';
-declare const CaseAggregate: FC<{
-    icon?: string;
-    iconColor?: string;
-    field?: string;
-    ids?: string[];
-    title?: string;
-    subtitle?: string;
-}>;
-export default CaseAggregate;