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

package/components/elements/hit/HitBanner.js

@@ -1,38 +1,34 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Box, Chip, Divider, Grid, Stack, Tooltip, Typography, avatarClasses, iconButtonClasses, useTheme } from '@mui/material';
-import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
 import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
 import { uniq } from 'lodash-es';
 import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
-import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { useCallback, useContext, useMemo } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { usePluginStore } from 'react-pluggable';
-import { Link } from 'react-router-dom';
 import { ESCALATION_COLORS, PROVIDER_COLORS } from '@cccsaurora/howler-ui/utils/constants';
 import { stringToColor } from '@cccsaurora/howler-ui/utils/utils';
 import PluginTypography from '../PluginTypography';
+import AnalyticLink from './elements/AnalyticLink';
 import Assigned from './elements/Assigned';
 import EscalationChip from './elements/EscalationChip';
 import HitTimestamp from './elements/HitTimestamp';
 import HitBannerTooltip from './HitBannerTooltip';
 import { HitLayout } from './HitLayout';
+import RelatedRecords from './related/RelatedRecords';
 const HitBanner = ({ hit, layout = HitLayout.NORMAL, showAssigned = true }) => {
     const { t } = useTranslation();
     const { config } = useContext(ApiConfigContext);
     const theme = useTheme();
     const pluginStore = usePluginStore();
-    const { getMatchingAnalytic } = useMatchers();
-    const [analyticId, setAnalyticId] = useState();
     const compressed = useMemo(() => layout === HitLayout.DENSE, [layout]);
     const textVariant = useMemo(() => (layout === HitLayout.COMFY ? 'body1' : 'caption'), [layout]);
-    useEffect(() => {
-        if (!hit?.howler.analytic) {
-            return;
+    const providerColor = useMemo(() => {
+        if (!hit?.event.provider) {
+            return PROVIDER_COLORS.unknown;
         }
-        getMatchingAnalytic(hit).then(analytic => setAnalyticId(analytic?.analytic_id));
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [hit?.howler.analytic]);
-    const providerColor = useMemo(() => PROVIDER_COLORS[hit.event?.provider ?? 'unknown'] ?? stringToColor(hit.event.provider), [hit.event?.provider]);
+        return PROVIDER_COLORS[hit?.event.provider] ?? stringToColor(hit?.event.provider);
+    }, [hit?.event.provider]);
     const mitreId = useMemo(() => {
         if (hit.threat?.framework?.toLowerCase().startsWith('mitre')) {
             return;
@@ -52,35 +48,23 @@ const HitBanner = ({ hit, layout = HitLayout.NORMAL, showAssigned = true }) => {
         }
         return `/api/static/mitre/${mitreId}.svg`;
     }, [mitreId]);
-    const leftBox = useMemo(() => {
-        if (hit.howler.is_bundle) {
-            return (_jsx(Box, { sx: {
-                    alignSelf: 'stretch',
-                    backgroundColor: providerColor,
-                    borderRadius: theme.shape.borderRadius,
-                    minWidth: '15px'
-                } }));
-        }
-        else {
-            return (_jsx(HitBannerTooltip, { hit: hit, children: _jsxs(Box, { sx: {
-                        gridColumn: { xs: 'span 3', sm: 'span 1' },
-                        minWidth: '90px',
-                        backgroundColor: providerColor,
-                        color: theme.palette.getContrastText(providerColor),
-                        alignSelf: 'start',
-                        borderRadius: theme.shape.borderRadius,
-                        p: compressed ? 0.5 : 1,
-                        pt: 2,
-                        pl: 1
-                    }, display: "flex", flexDirection: "column", children: [_jsx(Typography, { variant: compressed ? 'caption' : 'body1', style: { wordBreak: 'break-all' }, children: hit.organization?.name ?? _jsx(Trans, { i18nKey: "unknown" }) }), iconUrl && (_jsx(Box, { sx: {
-                                width: '40px',
-                                height: '40px',
-                                mask: `url("${iconUrl}")`,
-                                maskSize: 'cover',
-                                background: theme.palette.getContrastText(providerColor)
-                            } }))] }) }));
-        }
-    }, [compressed, hit, iconUrl, providerColor, theme.palette, theme.shape.borderRadius]);
+    const leftBox = useMemo(() => (_jsx(HitBannerTooltip, { hit: hit, children: _jsxs(Box, { sx: {
+                gridColumn: { xs: 'span 3', sm: 'span 1' },
+                minWidth: '90px',
+                backgroundColor: providerColor,
+                color: theme.palette.getContrastText(providerColor),
+                alignSelf: 'start',
+                borderRadius: theme.shape.borderRadius,
+                p: compressed ? 0.5 : 1,
+                pt: 2,
+                pl: 1
+            }, display: "flex", flexDirection: "column", children: [_jsx(Typography, { variant: compressed ? 'caption' : 'body1', style: { wordBreak: 'break-all' }, children: hit.organization?.name ?? _jsx(Trans, { i18nKey: "unknown" }) }), iconUrl && (_jsx(Box, { sx: {
+                        width: '40px',
+                        height: '40px',
+                        mask: `url("${iconUrl}")`,
+                        maskSize: 'cover',
+                        background: theme.palette.getContrastText(providerColor)
+                    } }))] }) })), [compressed, hit, iconUrl, providerColor, theme.palette, theme.shape.borderRadius]);
     /**
      * The tooltips are necessary only when in the most compressed format
      */
@@ -88,7 +72,7 @@ const HitBanner = ({ hit, layout = HitLayout.NORMAL, showAssigned = true }) => {
         const _children = (_jsxs(Stack, { direction: "row", spacing: 1, flex: 1, children: [_jsxs(Typography, { variant: textVariant, noWrap: compressed, textOverflow: compressed ? 'ellipsis' : 'wrap', ...typographyProps, sx: [
                         { display: 'flex', flexDirection: 'row' },
                         ...(Array.isArray(typographyProps?.sx) ? typographyProps?.sx : [typographyProps?.sx])
-                    ], children: [t(i18nKey), ":"] }), (Array.isArray(value) ? value : [value]).map(val => (_jsx(PluginTypography, { component: "span", context: "banner", variant: textVariant, noWrap: compressed, textOverflow: compressed ? 'ellipsis' : 'wrap', ...typographyProps, value: val, field: field, hit: hit }, val)))] }));
+                    ], children: [t(i18nKey), ":"] }), (Array.isArray(value) ? value : [value]).map(val => (_jsx(PluginTypography, { component: "span", context: "banner", variant: textVariant, noWrap: compressed, textOverflow: compressed ? 'ellipsis' : 'wrap', ...typographyProps, value: val, field: field, obj: hit }, val)))] }));
         return compressed ? (_jsx(Tooltip, { title: Array.isArray(value) ? (_jsx("div", { children: value.map(_indicator => (_jsx("p", { style: { margin: 0, padding: 0 }, children: _indicator }, _indicator))) })) : (value), children: _children })) : (_children);
     }, [compressed, hit, t, textVariant]);
     return (_jsxs(Box, { display: "grid", gridTemplateColumns: "minmax(0, auto) minmax(0, 1fr) minmax(0, auto)", alignItems: "stretch", sx: { width: '100%', ml: 0, overflow: 'hidden' }, children: [leftBox, _jsxs(Stack, { sx: {
@@ -98,11 +82,7 @@ const HitBanner = ({ hit, layout = HitLayout.NORMAL, showAssigned = true }) => {
                 }, spacing: layout !== HitLayout.COMFY ? 1 : 2, divider: _jsx(Divider, { orientation: "horizontal", sx: [
                         layout !== HitLayout.COMFY && { marginTop: '4px !important' },
                         { mr: `${theme.spacing(-1)} !important` }
-                    ] }), children: [_jsxs(Typography, { variant: compressed ? 'body1' : 'h6', fontWeight: compressed && 'bold', sx: { alignSelf: 'start', '& a': { color: 'text.primary' } }, children: [analyticId ? (_jsx(Link, { to: `/analytics/${analyticId}`, onAuxClick: e => {
-                                    e.stopPropagation();
-                                }, onClick: e => {
-                                    e.stopPropagation();
-                                }, children: hit.howler.analytic })) : (hit.howler.analytic), hit.howler.detection && ': ', hit.howler.detection] }), hit.howler?.rationale && (_jsxs(Typography, { flex: 1, variant: textVariant, color: ESCALATION_COLORS[hit.howler.escalation] + '.main', sx: { fontWeight: 'bold' }, children: [t('hit.header.rationale'), ": ", hit.howler.rationale] })), hit.howler?.outline && (_jsxs(_Fragment, { children: [_jsxs(Grid, { container: true, spacing: layout !== HitLayout.COMFY ? 1 : 2, sx: { ml: `${theme.spacing(-1)} !important` }, children: [hit.howler.outline.threat && (_jsx(Grid, { item: true, children: _jsx(Wrapper, { i18nKey: "hit.header.threat", value: hit.howler.outline.threat, field: "howler.outline.threat" }) })), hit.howler.outline.target && (_jsx(Grid, { item: true, children: _jsx(Wrapper, { i18nKey: "hit.header.target", value: hit.howler.outline.target, field: "howler.outline.target" }) }))] }), hit.howler.outline.indicators?.length > 0 && (_jsxs(Stack, { direction: "row", spacing: 1, children: [_jsxs(Typography, { component: "span", variant: textVariant, children: [t('hit.header.indicators'), ":"] }), _jsx(Grid, { container: true, spacing: 0.5, sx: { mt: `${theme.spacing(-0.5)} !important`, ml: `${theme.spacing(0.25)} !important` }, children: uniq(hit.howler.outline.indicators).map((_indicator, index) => {
+                    ] }), children: [_jsx(AnalyticLink, { hit: hit }), hit.howler?.rationale && (_jsxs(Typography, { flex: 1, variant: textVariant, color: ESCALATION_COLORS[hit.howler.escalation] + '.main', sx: { fontWeight: 'bold' }, children: [t('hit.header.rationale'), ": ", hit.howler.rationale] })), hit.howler?.outline && (_jsxs(_Fragment, { children: [_jsxs(Grid, { container: true, spacing: layout !== HitLayout.COMFY ? 1 : 2, sx: { ml: `${theme.spacing(-1)} !important` }, children: [hit.howler.outline.threat && (_jsx(Grid, { item: true, children: _jsx(Wrapper, { i18nKey: "hit.header.threat", value: hit.howler.outline.threat, field: "howler.outline.threat" }) })), hit.howler.outline.target && (_jsx(Grid, { item: true, children: _jsx(Wrapper, { i18nKey: "hit.header.target", value: hit.howler.outline.target, field: "howler.outline.target" }) }))] }), hit.howler.outline.indicators?.length > 0 && (_jsxs(Stack, { direction: "row", spacing: 1, children: [_jsxs(Typography, { component: "span", variant: textVariant, children: [t('hit.header.indicators'), ":"] }), _jsx(Grid, { container: true, spacing: 0.5, sx: { mt: `${theme.spacing(-0.5)} !important`, ml: `${theme.spacing(0.25)} !important` }, children: uniq(hit.howler.outline.indicators).map((_indicator, index) => {
                                             return (_jsx(Grid, { item: true, children: _jsxs(Stack, { direction: "row", children: [_jsx(PluginTypography, { context: "indicators", variant: textVariant, value: _indicator, children: _indicator }), index < hit.howler.outline.indicators.length - 1 && (_jsx(Typography, { variant: textVariant, children: ',' }))] }) }, _indicator));
                                         }) })] })), hit.howler.outline.summary && (_jsx(Wrapper, { i18nKey: "hit.header.summary", value: hit.howler.outline.summary, paragraph: true, textOverflow: "wrap", sx: [compressed && { marginTop: `0 !important` }], field: "howler.outline.summary" }))] }))] }), _jsxs(Stack, { direction: "column", spacing: layout !== HitLayout.COMFY ? 0.5 : 1, alignSelf: "stretch", sx: [
                     { minWidth: 0, alignItems: { sm: 'end', md: 'start' }, flex: 1, pl: 1 },
@@ -116,6 +96,6 @@ const HitBanner = ({ hit, layout = HitLayout.NORMAL, showAssigned = true }) => {
                             width: theme.spacing(3)
                         }
                     }
-                ], children: [_jsx(HitTimestamp, { hit: hit, layout: layout }), showAssigned && _jsx(Assigned, { hit: hit, layout: layout }), _jsxs(Stack, { direction: "row", spacing: layout !== HitLayout.COMFY ? 0.5 : 1, children: [_jsx(EscalationChip, { hit: hit, layout: layout }), ['in-progress', 'on-hold'].includes(hit.howler.status) && (_jsx(Chip, { sx: { width: 'fit-content', display: 'inline-flex' }, label: hit.howler.status, size: layout !== HitLayout.COMFY ? 'small' : 'medium', color: "primary" })), hit.howler.is_bundle && (_jsx(Chip, { size: layout !== HitLayout.COMFY ? 'small' : 'medium', label: t('hit.header.bundlesize', { hits: hit.howler.hits.length }) }))] }), howlerPluginStore.plugins.flatMap(plugin => pluginStore.executeFunction(`${plugin}.status`, { hit, layout }))] })] }));
+                ], children: [_jsx(HitTimestamp, { hit: hit, layout: layout }), showAssigned && _jsx(Assigned, { hit: hit, layout: layout }), _jsxs(Stack, { direction: "row", spacing: layout !== HitLayout.COMFY ? 0.5 : 1, children: [_jsx(EscalationChip, { hit: hit, layout: layout }), ['in-progress', 'on-hold'].includes(hit.howler.status) && (_jsx(Chip, { sx: { width: 'fit-content', display: 'inline-flex' }, label: hit.howler.status, color: "primary" }))] }), hit.howler.related && _jsx(RelatedRecords, { hit: hit }), howlerPluginStore.plugins.flatMap(plugin => pluginStore.executeFunction(`${plugin}.status`, { hit, layout }))] })] }));
 };
 export default HitBanner;

package/components/elements/hit/HitCard.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CardContent, Skeleton } from '@mui/material';
-import { HitContext } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
+import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
 import { memo, useEffect } from 'react';
 import { useContextSelector } from 'use-context-selector';
 import HowlerCard from '../display/HowlerCard';
@@ -8,17 +8,17 @@ import HitBanner from './HitBanner';
 import HitLabels from './HitLabels';
 import HitOutline from './HitOutline';
 const HitCard = ({ id, layout, readOnly = true }) => {
-    const getHit = useContextSelector(HitContext, ctx => ctx.getHit);
-    const hit = useContextSelector(HitContext, ctx => ctx.hits[id]);
+    const getRecord = useContextSelector(RecordContext, ctx => ctx.getRecord);
+    const hit = useContextSelector(RecordContext, ctx => ctx.records[id]);
     useEffect(() => {
         if (!hit) {
-            getHit(id);
+            getRecord(id);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [id]);
     if (!hit) {
         return _jsx(Skeleton, { variant: "rounded", height: "200px" });
     }
-    return (_jsx(HowlerCard, { tabIndex: 0, sx: { position: 'relative' }, children: _jsxs(CardContent, { children: [_jsx(HitBanner, { hit: hit, layout: layout }), _jsx(HitOutline, { hit: hit, layout: layout }), _jsx(HitLabels, { hit: hit, readOnly: readOnly })] }) }));
+    return (_jsx(HowlerCard, { id: hit?.howler.id, tabIndex: 0, sx: { position: 'relative' }, children: _jsxs(CardContent, { children: [_jsx(HitBanner, { hit: hit, layout: layout }), _jsx(HitOutline, { hit: hit, layout: layout }), _jsx(HitLabels, { hit: hit, readOnly: readOnly })] }) }));
 };
 export default memo(HitCard);

package/components/elements/hit/HitLabels.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Add, Check, Edit } from '@mui/icons-material';
 import { Backdrop, Box, Button, Chip, CircularProgress, Drawer, FormControl, FormHelperText, IconButton, InputAdornment, InputLabel, ListItemIcon, ListItemText, MenuItem, Select, Stack, TextField, Tooltip, Typography } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
-import { HitContext } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
+import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import { memo, useCallback, useEffect, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
@@ -44,7 +44,7 @@ const NewLabelForm = ({ handleSubmit }) => {
 const HitLabels = ({ hit, readOnly = false }) => {
     const { dispatchApi } = useMyApi();
     const { t } = useTranslation();
-    const updateHit = useContextSelector(HitContext, ctx => ctx.updateHit);
+    const updateHit = useContextSelector(RecordContext, ctx => ctx.updateRecord);
     const [openDrawer, setOpenDrawer] = useState(false);
     const [loading, setLoading] = useState(false);
     const [labels, setLabels] = useState(Object.entries(hit.howler.labels).flatMap(([key, category]) => {

package/components/elements/hit/{HitQuickSearch.d.ts → HitPreview.d.ts}

@@ -1,8 +1,8 @@
 import type { AppSearchItemRendererOption } from '@cccsaurora/howler-ui/commons/components/app/AppSearchService';
 import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
-type QuickSearchProps = {
+type PreviewProps = {
     hit: Hit;
-    options: AppSearchItemRendererOption<Hit>;
+    options?: AppSearchItemRendererOption<Hit>;
 };
-declare const _default: import("react").NamedExoticComponent<QuickSearchProps>;
+declare const _default: import("react").NamedExoticComponent<PreviewProps>;
 export default _default;

package/components/elements/hit/{HitQuickSearch.js → HitPreview.js}

@@ -4,12 +4,18 @@ import { memo, useMemo } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { ESCALATION_COLORS, PROVIDER_COLORS, STATUS_COLORS } from '@cccsaurora/howler-ui/utils/constants';
 import { formatDate, stringToColor } from '@cccsaurora/howler-ui/utils/utils';
-const HitQuickSearch = ({ hit, options }) => {
+const HitPreview = ({ hit, options }) => {
     const { t } = useTranslation();
     const theme = useTheme();
     const isUnderLg = useMediaQuery(theme.breakpoints.down('lg'));
     const providerColor = useMemo(() => PROVIDER_COLORS[hit.event?.provider ?? 'unknown'] ?? stringToColor(hit.event.provider), [hit.event?.provider]);
-    return (_jsxs(Box, { sx: { overflow: 'hidden', borderBottom: `thin solid ${theme.palette.divider}`, pb: 1, mb: 0 }, display: "grid", gridTemplateColumns: "minmax(0, 1fr) minmax(0, auto)", children: [_jsxs(Stack, { flexGrow: 1, gridColumn: options.state.mode === 'inline' ? 'span 2' : '', children: [_jsxs(Typography, { variant: "body1", fontWeight: "bold", children: [hit.howler.analytic, hit.howler.detection && ': ', hit.howler.detection] }), options.state.mode !== 'inline' && hit.howler?.outline && (_jsx(Tooltip, { placement: isUnderLg ? 'bottom' : 'left', componentsProps: {
+    return (_jsxs(Box, { sx: {
+            overflow: 'hidden',
+            borderBottom: `thin solid ${theme.palette.divider}`,
+            pb: 1,
+            mb: 0,
+            gap: theme.spacing(1)
+        }, display: "grid", gridTemplateColumns: "minmax(0, 1fr) minmax(0, auto)", children: [_jsxs(Stack, { flexGrow: 1, gridColumn: options?.state.mode === 'inline' ? 'span 2' : '', children: [_jsxs(Typography, { variant: "body1", fontWeight: "bold", children: [hit.howler.analytic, hit.howler.detection && ': ', hit.howler.detection] }), options?.state.mode !== 'inline' && hit.howler?.outline && (_jsx(Tooltip, { placement: isUnderLg ? 'bottom' : 'left', componentsProps: {
                             tooltip: {
                                 sx: {
                                     fontSize: 12,
@@ -17,7 +23,7 @@ const HitQuickSearch = ({ hit, options }) => {
                                     color: theme.palette.getContrastText(theme.palette.background.paper)
                                 }
                             }
-                        }, title: _jsxs(Stack, { divider: _jsx(Divider, { sx: { my: 0.5 } }), children: [_jsxs("div", { children: [_jsx(Trans, { i18nKey: "hit.header.threat" }), ": ", hit.howler.outline.threat] }), _jsxs("div", { children: [_jsx(Trans, { i18nKey: "hit.header.target" }), ": ", hit.howler.outline.target] }), _jsx("div", { children: hit.howler.outline.indicators.join(', ') })] }), children: _jsxs(Stack, { direction: { xs: 'column', sm: 'column' }, flex: 1, children: [_jsxs(Typography, { variant: "caption", textOverflow: "ellipsis", sx: { wordBreak: 'break-all', overflow: 'hidden' }, children: [_jsx(Trans, { i18nKey: "hit.header.threat" }), ": ", hit.howler.outline.threat] }), _jsxs(Typography, { variant: "caption", textOverflow: "ellipsis", sx: { wordBreak: 'break-all', overflow: 'hidden' }, children: [_jsx(Trans, { i18nKey: "hit.header.target" }), ": ", hit.howler.outline.target] }), _jsxs(Typography, { variant: "caption", textOverflow: "ellipsis", sx: { wordBreak: 'break-all', overflow: 'hidden' }, children: [_jsx(Trans, { i18nKey: "hit.header.indicators" }), ": ", hit.howler.outline.indicators.map(i => i).join(', ')] })] }) }))] }), _jsxs(Stack, { alignItems: options.state.mode === 'fullscreen' ? 'end' : 'start', spacing: 0.5, children: [options.state.mode === 'fullscreen' && _jsx(Chip, { label: formatDate(hit.timestamp), size: "small" }), _jsxs(Stack, { direction: "row", spacing: 0.5, children: [options.state.mode === 'inline' && _jsx(Chip, { label: formatDate(hit.timestamp), size: "small" }), _jsx(Chip, { sx: {
+                        }, title: _jsxs(Stack, { divider: _jsx(Divider, { sx: { my: 0.5 } }), children: [_jsxs("div", { children: [_jsx(Trans, { i18nKey: "hit.header.threat" }), ": ", hit.howler.outline.threat] }), _jsxs("div", { children: [_jsx(Trans, { i18nKey: "hit.header.target" }), ": ", hit.howler.outline.target] }), _jsx("div", { children: hit.howler.outline.indicators.join(', ') })] }), children: _jsxs(Stack, { direction: { xs: 'column', sm: 'column' }, flex: 1, children: [_jsxs(Typography, { variant: "caption", textOverflow: "ellipsis", sx: { wordBreak: 'break-all', overflow: 'hidden' }, children: [_jsx(Trans, { i18nKey: "hit.header.threat" }), ": ", hit.howler.outline.threat] }), _jsxs(Typography, { variant: "caption", textOverflow: "ellipsis", sx: { wordBreak: 'break-all', overflow: 'hidden' }, children: [_jsx(Trans, { i18nKey: "hit.header.target" }), ": ", hit.howler.outline.target] })] }) }))] }), _jsxs(Stack, { alignItems: options?.state.mode === 'fullscreen' ? 'end' : 'start', spacing: 0.5, children: [options?.state.mode === 'fullscreen' && _jsx(Chip, { label: formatDate(hit.timestamp), size: "small" }), _jsxs(Stack, { direction: "row", spacing: 0.5, children: [options?.state.mode === 'inline' && _jsx(Chip, { label: formatDate(hit.timestamp), size: "small" }), _jsx(Chip, { sx: {
                                     backgroundColor: providerColor,
                                     color: theme.palette.getContrastText(providerColor)
                                 }, label: hit.organization?.name ?? _jsx(Trans, { i18nKey: "unknown" }), size: "small" }), _jsx(Chip, { label: hit.howler.escalation, size: "small", color: ESCALATION_COLORS[hit.howler.escalation] })] }), _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(Chip, { sx: {
@@ -28,4 +34,4 @@ const HitQuickSearch = ({ hit, options }) => {
                                     ? hit?.howler.assignment
                                     : t('app.drawer.hit.assignment.unassigned.name'), size: "small" }), _jsx(Chip, { label: hit.howler.status, size: "small", color: STATUS_COLORS[hit.howler.status] })] })] })] }));
 };
-export default memo(HitQuickSearch);
+export default memo(HitPreview);

package/components/elements/hit/HitSummary.d.ts

@@ -1,8 +1,9 @@
 import type { HowlerSearchResponse } from '@cccsaurora/howler-ui/api/search';
 import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+import type { Observable } from '@cccsaurora/howler-ui/models/entities/generated/Observable';
 import type { WithMetadata } from '@cccsaurora/howler-ui/models/WithMetadata';
 declare const _default: import("react").NamedExoticComponent<{
-    response?: HowlerSearchResponse<WithMetadata<Hit>>;
+    response?: HowlerSearchResponse<WithMetadata<Hit | Observable>>;
     execute?: boolean;
     onStart?: () => void;
     onComplete?: () => void;

package/components/elements/hit/HitSummary.js

@@ -4,8 +4,8 @@ import { Alert, AlertTitle, Autocomplete, Box, Button, Chip, CircularProgress, D
 import api from '@cccsaurora/howler-ui/api';
 import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
 import { FieldContext } from '@cccsaurora/howler-ui/components/app/providers/FieldProvider';
-import { HitSearchContext } from '@cccsaurora/howler-ui/components/app/providers/HitSearchProvider';
 import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
+import { RecordSearchContext } from '@cccsaurora/howler-ui/components/app/providers/RecordSearchProvider';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
 import useMySnackbar from '@cccsaurora/howler-ui/components/hooks/useMySnackbar';
@@ -14,6 +14,7 @@ import { memo, useCallback, useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useContextSelector } from 'use-context-selector';
 import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
+import { isHit } from '@cccsaurora/howler-ui/utils/typeUtils';
 import { getTimeRange } from '@cccsaurora/howler-ui/utils/utils';
 import PluginChip from '../PluginChip';
 import HitGraph from './aggregate/HitGraph';
@@ -24,9 +25,9 @@ const HitSummary = ({ response, onStart, onComplete }) => {
     const { showErrorMessage } = useMySnackbar();
     const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
     const { getMatchingTemplate } = useMatchers();
-    const searching = useContextSelector(HitSearchContext, ctx => ctx.searching);
-    const error = useContextSelector(HitSearchContext, ctx => ctx.error);
-    const getFilters = useContextSelector(HitSearchContext, ctx => ctx.getFilters);
+    const searching = useContextSelector(RecordSearchContext, ctx => ctx.searching);
+    const error = useContextSelector(RecordSearchContext, ctx => ctx.error);
+    const getFilters = useContextSelector(RecordSearchContext, ctx => ctx.getFilters);
     const query = useContextSelector(ParameterContext, ctx => ctx.query);
     const setQuery = useContextSelector(ParameterContext, ctx => ctx.setQuery);
     const views = useContextSelector(ParameterContext, ctx => ctx.views);
@@ -40,7 +41,7 @@ const HitSummary = ({ response, onStart, onComplete }) => {
         }
         try {
             // Get a list of every key in every template of the hits we're searching
-            const rawCounts = await Promise.all((response?.items ?? []).map(async (h) => {
+            const rawCounts = await Promise.all((response?.items ?? []).filter(isHit).map(async (h) => {
                 const matchingTemplate = await getMatchingTemplate(h);
                 return (matchingTemplate?.keys ?? [])
                     .filter(key => !['howler.id', 'howler.hash'].includes(key))

package/components/elements/hit/aggregate/HitGraph.js

@@ -4,9 +4,9 @@ import { Alert, AlertTitle, Autocomplete, Box, Button, CircularProgress, IconBut
 import api from '@cccsaurora/howler-ui/api';
 import 'chartjs-adapter-dayjs-4';
 import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
-import { HitContext } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
-import { HitSearchContext } from '@cccsaurora/howler-ui/components/app/providers/HitSearchProvider';
 import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
+import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
+import { RecordSearchContext } from '@cccsaurora/howler-ui/components/app/providers/RecordSearchProvider';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import useMyChart from '@cccsaurora/howler-ui/components/hooks/useMyChart';
 import dayjs from 'dayjs';
@@ -38,12 +38,12 @@ const HitGraph = () => {
     const setQuery = useContextSelector(ParameterContext, ctx => ctx.setQuery);
     const span = useContextSelector(ParameterContext, ctx => ctx.span);
     const views = useContextSelector(ParameterContext, ctx => ctx.views);
-    const selectedHits = useContextSelector(HitContext, ctx => ctx.selectedHits);
-    const addHitToSelection = useContextSelector(HitContext, ctx => ctx.addHitToSelection);
-    const removeHitFromSelection = useContextSelector(HitContext, ctx => ctx.removeHitFromSelection);
-    const error = useContextSelector(HitSearchContext, ctx => ctx.error);
-    const response = useContextSelector(HitSearchContext, ctx => ctx.response);
-    const getFilters = useContextSelector(HitSearchContext, ctx => ctx.getFilters);
+    const selectedHits = useContextSelector(RecordContext, ctx => ctx.selectedRecords);
+    const addHitToSelection = useContextSelector(RecordContext, ctx => ctx.addRecordToSelection);
+    const removeHitFromSelection = useContextSelector(RecordContext, ctx => ctx.removeRecordFromSelection);
+    const error = useContextSelector(RecordSearchContext, ctx => ctx.error);
+    const response = useContextSelector(RecordSearchContext, ctx => ctx.response);
+    const getFilters = useContextSelector(RecordSearchContext, ctx => ctx.getFilters);
     const chartRef = useRef();
     const [loading, setLoading] = useState(false);
     const [filterField, setFilterField] = useState(FILTER_FIELDS[0]);

package/components/elements/hit/elements/AnalyticLink.d.ts

@@ -0,0 +1,8 @@
+import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+import { type FC } from 'react';
+declare const AnalyticLink: FC<{
+    hit: Hit;
+    compressed?: boolean;
+    alignSelf?: string;
+}>;
+export default AnalyticLink;

package/components/elements/hit/elements/AnalyticLink.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Typography } from '@mui/material';
+import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
+import { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+const AnalyticLink = ({ hit, compressed, alignSelf = 'start' }) => {
+    const { getMatchingAnalytic } = useMatchers();
+    const [analyticId, setAnalyticId] = useState();
+    useEffect(() => {
+        if (!hit?.howler.analytic) {
+            return;
+        }
+        getMatchingAnalytic(hit).then(analytic => setAnalyticId(analytic?.analytic_id));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [hit?.howler.analytic]);
+    return (_jsxs(Typography, { variant: compressed ? 'body1' : 'h6', fontWeight: compressed && 'bold', sx: { alignSelf, '& a': { color: 'text.primary' } }, children: [analyticId ? (_jsx(Link, { to: `/analytics/${analyticId}`, onAuxClick: e => {
+                    e.stopPropagation();
+                }, onClick: e => {
+                    e.stopPropagation();
+                }, children: hit.howler.analytic })) : (hit.howler.analytic), hit.howler.detection && ': ', hit.howler.detection] }));
+};
+export default AnalyticLink;

package/components/elements/hit/outlines/DefaultOutline.js

@@ -41,7 +41,7 @@ const DefaultOutline = ({ hit, fields, template, layout = HitLayout.NORMAL, read
                 if (!displayedData) {
                     return null;
                 }
-                return (_jsxs(React.Fragment, { children: [_jsx(Tooltip, { title: (config.indexes.hit[field]?.description ?? t('none')).split('\n')[0], children: _jsxs(Typography, { variant: layout !== HitLayout.COMFY ? 'caption' : 'body1', fontWeight: "bold", children: [field, ":"] }) }), _jsx(PluginTypography, { context: "outline", variant: layout !== HitLayout.COMFY ? 'caption' : 'body1', whiteSpace: "normal", sx: { width: '100%', wordBreak: 'break-all' }, value: displayedData, field: field, hit: hit, children: displayedData })] }, field));
+                return (_jsxs(React.Fragment, { children: [_jsx(Tooltip, { title: (config.indexes.hit[field]?.description ?? t('none')).split('\n')[0], children: _jsxs(Typography, { variant: layout !== HitLayout.COMFY ? 'caption' : 'body1', fontWeight: "bold", children: [field, ":"] }) }), _jsx(PluginTypography, { context: "outline", variant: layout !== HitLayout.COMFY ? 'caption' : 'body1', whiteSpace: "normal", sx: { width: '100%', wordBreak: 'break-all' }, value: displayedData, field: field, obj: hit, children: displayedData })] }, field));
             })] }));
 };
 export default memo(DefaultOutline);

package/components/elements/hit/related/RelatedRecords.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Link as LinkIcon } from '@mui/icons-material';
+import { alpha, Box, Chip, Divider, Stack, useTheme } from '@mui/material';
+import CasePreview from '@cccsaurora/howler-ui/components/elements/case/CasePreview';
+import ChipPopper from '@cccsaurora/howler-ui/components/elements/display/ChipPopper';
+import ObservablePreview from '@cccsaurora/howler-ui/components/elements/observable/ObservablePreview';
+import useRelatedRecords from '@cccsaurora/howler-ui/components/hooks/useRelatedRecords';
+import { identity, uniq } from 'lodash-es';
+import { memo, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import { isCase, isHit, isObservable } from '@cccsaurora/howler-ui/utils/typeUtils';
+import HitPreview from '../HitPreview';
+const RecordLink = ({ to, ariaLabel, children }) => {
+    const theme = useTheme();
+    return (_jsxs(Box, { p: 1, flex: 1, position: "relative", sx: {
+            '& > a': {
+                backgroundColor: 'transparent',
+                transition: theme.transitions.create('background-color', {
+                    duration: theme.transitions.duration.shortest
+                }),
+                '&:hover': {
+                    backgroundColor: alpha('#555', 0.5)
+                }
+            }
+        }, children: [_jsx(Link, { to: to, style: { position: 'absolute', top: 0, bottom: 0, left: 0, right: 0 }, target: "_blank", rel: "noopener noreferrer", "aria-label": ariaLabel }), children] }));
+};
+const RelatedRecords = ({ hit }) => {
+    const { t } = useTranslation();
+    const [open, setOpen] = useState(false);
+    const [filter, setFilter] = useState(null);
+    const related = useMemo(() => hit?.howler.related ?? [], [hit?.howler.related]);
+    const records = useRelatedRecords(related, open);
+    return (_jsxs(ChipPopper
+    // eslint-disable-next-line jsx-a11y/anchor-is-valid
+    , { 
+        // eslint-disable-next-line jsx-a11y/anchor-is-valid
+        icon: _jsx(LinkIcon, {}), label: _jsx("span", { style: { cursor: 'pointer' }, children: t('hit.header.related', { count: related.length }) }), slotProps: {
+            chip: { disabled: related.length < 1 },
+            paper: {
+                elevation: 4,
+                onAuxClick: ev => ev.stopPropagation()
+            }
+        }, disablePortal: false, placement: "bottom-end", onToggle: _open => setOpen(_open), children: [_jsx(Stack, { direction: "row", spacing: 1, mb: 1, justifyContent: "end", children: uniq(records.map(record => record.__index))
+                    .filter(identity)
+                    .map(_type => (_jsx(Chip, { color: _type === filter ? 'primary' : 'default', label: _type, onClick: () => setFilter(current => (current === _type ? null : _type)) }, _type))) }), _jsxs(Stack, { maxWidth: "40vw", maxHeight: "70vh", sx: { overflowY: 'auto' }, children: [_jsx(Divider, {}), records
+                        .filter(record => !filter || record.__index === filter)
+                        .map(entry => {
+                        if (isHit(entry)) {
+                            const key = entry.howler.id;
+                            return (_jsx(RecordLink, { to: `/hits/${key}`, ariaLabel: t('hit.header.view.hit', { id: key }), children: _jsx(HitPreview, { hit: entry }) }, key));
+                        }
+                        else if (isCase(entry)) {
+                            const key = entry.case_id;
+                            return (_jsx(RecordLink, { to: `/cases/${key}`, ariaLabel: t('hit.header.view.case', { id: key }), children: _jsx(CasePreview, { case: entry }) }, key));
+                        }
+                        else if (isObservable(entry)) {
+                            const key = entry.howler.id;
+                            return (_jsx(RecordLink, { to: `/observables/${key}`, ariaLabel: t('hit.header.view.observable', { id: key }), children: _jsx(ObservablePreview, { observable: entry }) }, key));
+                        }
+                    })] })] }));
+};
+export default memo(RelatedRecords);

package/components/elements/observable/ObservableCard.d.ts

@@ -0,0 +1,6 @@
+import type { Observable } from '@cccsaurora/howler-ui/models/entities/generated/Observable';
+declare const _default: import("react").NamedExoticComponent<{
+    id?: string;
+    observable?: Observable;
+}>;
+export default _default;

package/components/elements/observable/ObservableCard.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CardContent, Skeleton } from '@mui/material';
+import { hit } from '@cccsaurora/howler-ui/api/search';
+import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
+import HowlerCard from '@cccsaurora/howler-ui/components/elements/display/HowlerCard';
+import { memo, useEffect } from 'react';
+import { useContextSelector } from 'use-context-selector';
+import ObservablePreview from './ObservablePreview';
+const ObservableCard = ({ id, observable: _observable }) => {
+    const getRecord = useContextSelector(RecordContext, ctx => ctx.getRecord);
+    const observable = useContextSelector(RecordContext, ctx => _observable ?? ctx.records[id]);
+    useEffect(() => {
+        if (!observable) {
+            getRecord(id);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [id]);
+    if (!hit) {
+        return _jsx(Skeleton, { variant: "rounded", height: "200px" });
+    }
+    return (_jsx(HowlerCard, { sx: { position: 'relative' }, children: _jsx(CardContent, { children: _jsx(ObservablePreview, { observable: observable }) }) }));
+};
+export default memo(ObservableCard);

package/components/elements/observable/ObservablePreview.d.ts

@@ -0,0 +1,6 @@
+import type { Observable } from '@cccsaurora/howler-ui/models/entities/generated/Observable';
+type PreviewProps = {
+    observable: Observable;
+};
+declare const _default: import("react").NamedExoticComponent<PreviewProps>;
+export default _default;

package/components/elements/observable/ObservablePreview.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { OpenInNew } from '@mui/icons-material';
+import { Chip, IconButton, Stack, Typography, useTheme } from '@mui/material';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+const ObservablePreview = ({ observable }) => {
+    const { t } = useTranslation();
+    const theme = useTheme();
+    return (_jsx(Stack, { flex: 1, spacing: 1, sx: { overflow: 'hidden', borderBottom: `thin solid ${theme.palette.divider}`, pb: 1, mb: 0 }, children: _jsxs(Stack, { children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Typography, { variant: "body1", fontWeight: "bold", children: observable.event.provider }), _jsx("div", { style: { flex: 1 } }), _jsx(Chip, { label: observable.event.kind }), observable.event.reference && (_jsx(IconButton, { size: "small", component: Link, to: observable.event.reference, sx: { opacity: 1 }, target: "_blank", rel: "noopener noreferrer", children: _jsx(OpenInNew, { fontSize: "small" }) }))] }), observable.event.type && (_jsxs(Typography, { variant: "caption", children: [t('event.type'), " - ", observable.event.type.join(', ')] })), observable.event.module && (_jsxs(Typography, { variant: "caption", children: [t('event.module'), " - ", observable.event.module] }))] }) }));
+};
+export default memo(ObservablePreview);

package/components/elements/{hit/HitComments.d.ts → record/RecordComments.d.ts}

@@ -1,11 +1,12 @@
 import type { HowlerUser } from '@cccsaurora/howler-ui/models/entities/HowlerUser';
 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';
-interface HitCommentsProps {
-    hit: Hit;
+interface RecordCommentsProps {
+    record: Hit | Observable;
     users: {
         [id: string]: HowlerUser;
     };
 }
-declare const HitComments: FC<HitCommentsProps>;
-export default HitComments;
+declare const RecordComments: FC<RecordCommentsProps>;
+export default RecordComments;