@cccsaurora/howler-ui 2.12.0-dev.30

package/dist/components/elements/hit/actions/ButtonActions.js

@@ -0,0 +1,126 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge, Button, FormControl, FormControlLabel, FormLabel, Radio, RadioGroup, Stack, styled, Tooltip } from '@mui/material';
+import { blueGrey } from '@mui/material/colors';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { HitShortcuts } from '../HitShortcuts';
+import { TOP_ROW } from './SharedComponents';
+const StyledBadge = styled(Badge)({
+    '& .MuiBadge-badge': {
+        borderRadius: '4px',
+        background: blueGrey[400],
+        fontSize: 9,
+        height: '15px',
+        minWidth: '15px',
+        padding: '0',
+        right: '5px',
+        top: '2.5px'
+    }
+});
+const ButtonActions = ({ actions, loading, orientation, shortcuts, currentVote }) => {
+    const { t } = useTranslation();
+    const isHorizontal = useMemo(() => orientation === 'horizontal', [orientation]);
+    const showShortcuts = useMemo(() => shortcuts === HitShortcuts.SHORTCUTS_HINT, [shortcuts]);
+    const actionRows = useMemo(() => actions
+        .filter(action => action.type === 'action')
+        .reduce(([top, bottom], action) => {
+        if (top.length === bottom.length) {
+            top.push(action);
+        }
+        else {
+            bottom.push(action);
+        }
+        return [top, bottom];
+    }, [[], []]), [actions]);
+    const assessmentRows = useMemo(() => actions
+        .filter(action => action.type === 'assessment')
+        .reduce(([top, bottom], action) => {
+        if (TOP_ROW.includes(action.name)) {
+            top.push(action);
+        }
+        else {
+            bottom.push(action);
+        }
+        return [top, bottom];
+    }, [[], []]) ?? [], [actions]);
+    return (_jsxs(Stack, { direction: isHorizontal ? 'row' : 'column', spacing: 0.75, alignItems: !isHorizontal && 'start', py: 1, sx: { position: 'relative', flex: 1 }, justifyContent: "space-between", children: [_jsxs(FormControl, { disabled: loading, sx: [
+                    {
+                        display: 'grid',
+                        justifyContent: 'stretch',
+                        gap: 0.8
+                    },
+                    isHorizontal
+                        ? {
+                            // If you want to understand the disgusting, unholy grid shenanigans that's going on here, talk to Matt R
+                            // If you want to complain about how bad this is, talk to Ben
+                            gridTemplateRows: 'auto 1fr 1fr', // Make sure the buttons are the same height
+                            gridAutoColumns: 'minmax(0, 125px)', // Make sure the buttons are the same width
+                            // God help me
+                            gridTemplateColumns: `repeat(auto, 125px)`
+                            // Why do we need to use both gridTemplateColumns AND gridAutoColumns, you ask?
+                            // I DON'T KNOW ASK WHOEVER WROTE THE CSS GRID SPEC
+                        }
+                        : {
+                            gridTemplateColumns: '1fr 1fr'
+                        }
+                ], children: [_jsx(FormLabel, { children: t('hit.details.actions.action') }), actionRows.flatMap((row, rowIndex) => row.map((option, index) => {
+                        const gridSx = isHorizontal
+                            ? { gridColumn: index, gridRow: rowIndex + 2 }
+                            : { gridColumn: rowIndex + 1, gridRow: index + 2 };
+                        const button = (_jsx(Button, { size: "small", variant: "outlined", color: "secondary", disabled: loading, onClick: option.actionFunction, sx: [
+                                {
+                                    width: '100%',
+                                    p: 0.6
+                                },
+                                gridSx,
+                                isHorizontal && (theme => ({ fontSize: theme.typography.caption.fontSize }))
+                            ], children: option.i18nKey ? t(option.i18nKey) : option.name }, option.name));
+                        if (showShortcuts) {
+                            return (_jsx(StyledBadge, { badgeContent: option.key, sx: gridSx, children: button }, option.name));
+                        }
+                        return button;
+                    })), assessmentRows.flat().length > 0 && (_jsx(FormLabel, { sx: isHorizontal
+                            ? {
+                                gridRow: 1,
+                                gridColumn: actionRows[0].length + 1
+                            }
+                            : { gridRow: actionRows[0].length + 2 }, children: t('hit.details.actions.assessment') })), assessmentRows.flatMap((row, rowIndex) => row.map((action, index) => {
+                        const gridSx = isHorizontal
+                            ? {
+                                gridColumn: index + 1 + actionRows[0].length,
+                                gridRow: rowIndex + 2
+                            }
+                            : { gridColumn: rowIndex + 1, gridRow: index + 3 + actionRows[0].length };
+                        const button = (_jsx(Tooltip, { title: t(`hit.details.asessments.${action.name}.description`), children: _jsx(Button, { variant: "outlined", size: "small", disabled: loading, onClick: action.actionFunction, sx: [
+                                    {
+                                        width: '100%',
+                                        p: 0.6
+                                    },
+                                    gridSx,
+                                    isHorizontal && (theme => ({ fontSize: theme.typography.caption.fontSize }))
+                                ], children: action.name }, action.name) }));
+                        if (showShortcuts) {
+                            return (_jsx(StyledBadge, { badgeContent: action.key, sx: gridSx, children: button }, action.key));
+                        }
+                        return button;
+                    }))] }), _jsxs(FormControl, { disabled: loading || !actions.some(action => action.type === 'vote'), sx: { opacity: +actions.some(action => action.type === 'vote') }, children: [_jsx(FormLabel, { sx: { mb: 1 }, children: t('hit.details.actions.vote') }), _jsx(RadioGroup, { value: currentVote, children: actions
+                            .filter(action => action.type === 'vote')
+                            .map(action => {
+                            const button = (_jsx(FormControlLabel, { value: action.name.toLowerCase(), sx: { display: 'flex', alignItems: 'center' }, componentsProps: {
+                                    typography: {
+                                        sx: [isHorizontal && (theme => ({ fontSize: theme.typography.caption.fontSize }))]
+                                    }
+                                }, control: _jsx(Radio, { size: "small", sx: [{ mr: 1 }, isHorizontal && { p: 0.5 }] }), label: action.name, onClick: action.actionFunction }, action.key));
+                            if (showShortcuts && action.key) {
+                                return (_jsx(StyledBadge, { badgeContent: action.key, sx: [
+                                        { '& .MuiBadge-badge': { left: '20px', top: '5px', right: 'unset' } },
+                                        loading && { '.MuiBadge-badge': { opacity: '0.5' } }
+                                    ], anchorOrigin: {
+                                        vertical: 'top',
+                                        horizontal: 'left'
+                                    }, children: button }, action.key));
+                            }
+                            return button;
+                        }) })] })] }));
+};
+export default ButtonActions;

package/dist/components/elements/hit/actions/DropdownActions.d.ts

@@ -0,0 +1,12 @@
+import type { FC } from 'react';
+import type { ActionButton } from './SharedComponents';
+interface DropdownActionProps {
+    actions: ActionButton[];
+    currentAssessment: string;
+    currentStatus: string;
+    currentVote: string;
+    loading: boolean;
+    orientation: 'horizontal' | 'vertical';
+}
+declare const DropdownActions: FC<DropdownActionProps>;
+export default DropdownActions;

package/dist/components/elements/hit/actions/DropdownActions.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FormControl, formControlClasses, Grid, InputLabel, MenuItem, Select, Skeleton, Stack, Typography } from '@mui/material';
+import { ApiConfigContext } from 'components/app/providers/ApiConfigProvider';
+import { capitalize } from 'lodash-es';
+import { useContext, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+const DropdownActions = ({ actions, currentAssessment, currentStatus, currentVote, loading, orientation }) => {
+    const { t } = useTranslation();
+    const config = useContext(ApiConfigContext);
+    const isHorizontal = useMemo(() => orientation === 'horizontal', [orientation]);
+    if (!config.config.lookups) {
+        return (_jsxs(Grid, { container: true, justifyContent: "end", spacing: 4, p: 2, children: [_jsx(Grid, { item: true, sm: "auto", xs: 12, children: _jsx(Skeleton, { variant: "rounded", width: "200px", height: orientation === 'horizontal' ? '40px' : '56px' }) }), _jsx(Grid, { item: true, sm: "auto", xs: 12, children: _jsx(Skeleton, { variant: "rounded", width: "200px", height: orientation === 'horizontal' ? '40px' : '56px' }) }), _jsx(Grid, { item: true, sm: "auto", xs: 12, children: _jsx(Skeleton, { variant: "rounded", width: "200px", height: orientation === 'horizontal' ? '40px' : '56px' }) })] }));
+    }
+    return (_jsxs(Grid, { container: true, justifyContent: "end", spacing: 2, p: 2, sx: [isHorizontal && { [`& .${formControlClasses.root}`]: { minWidth: '140px' } }], children: [_jsx(Grid, { item: true, sm: !isHorizontal ? true : 'auto', xs: 12, children: _jsxs(FormControl, { disabled: loading, fullWidth: true, children: [_jsx(InputLabel, { id: "transition-label", htmlFor: "transition", children: t('hit.details.actions.action') }), _jsxs(Select, { labelId: "transition-label", id: "transition", size: isHorizontal ? 'small' : 'medium', label: t('hit.details.actions.action'), value: currentStatus, children: [_jsx(MenuItem, { value: currentStatus, sx: { display: 'none' }, children: currentStatus.replace(/-/g, ' ').replace(/^[a-z]/, val => val.toUpperCase()) }), actions
+                                    .filter(_action => _action.type === 'action')
+                                    .map(_action => (_jsx(MenuItem, { value: _action.name, onClick: _action.actionFunction, children: _action.i18nKey ? t(_action.i18nKey) : _action.name }, _action.name)))] })] }) }), _jsx(Grid, { item: true, sm: !isHorizontal ? true : 'auto', xs: 12, children: _jsxs(FormControl, { disabled: loading || !actions.some(action => action.type === 'assessment'), fullWidth: true, children: [_jsx(InputLabel, { id: "assess-label", htmlFor: "assess", children: t('hit.details.actions.assessment') }), _jsxs(Select, { labelId: "assess-label", id: "assess", size: isHorizontal ? 'small' : 'medium', label: t('hit.details.actions.assessment'), value: currentAssessment ?? 'no-assessment', MenuProps: {
+                                anchorOrigin: { horizontal: 'left', vertical: 'bottom' },
+                                transformOrigin: { horizontal: 'left', vertical: 'top' }
+                            }, children: [_jsx(MenuItem, { value: "no-assessment", sx: { display: 'none' }, children: t('hit.details.actions.assessment.noassessment') }), actions
+                                    .filter(action => action.type === 'assessment')
+                                    .map(a => (_jsx(MenuItem, { value: a.name, onClick: a.actionFunction, children: _jsxs(Stack, { direction: "column", children: [_jsx("span", { children: a.name
+                                                    .split(/[ -]/)
+                                                    .map(part => capitalize(part))
+                                                    .join(' ') }), _jsx(Typography, { variant: "caption", color: "text.secondary", maxWidth: "250px", sx: { whiteSpace: 'wrap' }, children: t(`hit.details.asessments.${a.name}.description`) })] }) }, a.name)))] })] }) }), _jsx(Grid, { item: true, sm: !isHorizontal ? true : 'auto', xs: 12, children: _jsxs(FormControl, { disabled: loading || !actions.some(action => action.type === 'vote'), fullWidth: true, children: [_jsx(InputLabel, { id: "vote-label", htmlFor: "vote", children: t('hit.details.actions.vote') }), _jsxs(Select, { labelId: "vote-label", id: "vote", size: isHorizontal ? 'small' : 'medium', label: t('hit.details.actions.vote'), value: currentVote || 'no-vote', children: [_jsx(MenuItem, { value: "no-vote", sx: { display: 'none' }, children: t('hit.details.actions.vote.novote') }), actions
+                                    .filter(action => action.type === 'vote')
+                                    .map(action => (_jsx(MenuItem, { value: action.name.toLowerCase(), onClick: action.actionFunction, children: action.i18nKey ? t(action.i18nKey) : action.name }, action.name)))] })] }) })] }));
+};
+export default DropdownActions;

package/dist/components/elements/hit/actions/SharedComponents.d.ts

@@ -0,0 +1,18 @@
+import type { StyledComponent } from '@emotion/styled';
+import { type BadgeProps } from '@mui/material';
+import type { ReactNode } from 'react';
+export type ActionButton = {
+    type: 'assessment' | 'action' | 'vote';
+    name: string;
+    actionFunction: () => void;
+    key?: string;
+    i18nKey?: string;
+    icon?: ReactNode;
+};
+export type Keybinds = {
+    [key: string]: () => void;
+};
+export declare const TOP_ROW: string[];
+export declare const ASSESSMENT_KEYBINDS: string[];
+export declare const VOTE_OPTIONS: Partial<ActionButton>[];
+export declare const StyledBadge: StyledComponent<BadgeProps>;

package/dist/components/elements/hit/actions/SharedComponents.js

@@ -0,0 +1,21 @@
+import { Badge, styled } from '@mui/material';
+import { blueGrey } from '@mui/material/colors';
+export const TOP_ROW = ['legitimate', 'false-positive', 'ambiguous', 'development', 'security'];
+export const ASSESSMENT_KEYBINDS = ['A', 'S', 'D', 'F', 'G', 'Z', 'X', 'C', 'V', 'B'];
+export const VOTE_OPTIONS = [
+    { name: 'Benign', key: 'Q', type: 'vote' },
+    { name: 'Obscure', key: 'W', type: 'vote' },
+    { name: 'Malicious', key: 'E', type: 'vote' }
+];
+export const StyledBadge = styled(Badge)({
+    '& .MuiBadge-badge': {
+        borderRadius: '4px',
+        background: blueGrey[400],
+        fontSize: 9,
+        height: '15px',
+        minWidth: '15px',
+        padding: '0',
+        right: '5px',
+        top: '2.5px'
+    }
+});

package/dist/components/elements/hit/aggregate/HitGraph.d.ts

@@ -0,0 +1,6 @@
+import 'chartjs-adapter-moment';
+import type { FC } from 'react';
+declare const HitGraph: FC<{
+    query: string;
+}>;
+export default HitGraph;

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

@@ -0,0 +1,238 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CenterFocusWeak, Refresh } from '@mui/icons-material';
+import { Alert, AlertTitle, Autocomplete, Box, Button, CircularProgress, IconButton, Stack, TextField, Tooltip, alpha, useTheme } from '@mui/material';
+import api from 'api';
+import 'chartjs-adapter-moment';
+import { ApiConfigContext } from 'components/app/providers/ApiConfigProvider';
+import { HitContext } from 'components/app/providers/HitProvider';
+import { HitSearchContext } from 'components/app/providers/HitSearchProvider';
+import { ParameterContext } from 'components/app/providers/ParameterProvider';
+import useMyApi from 'components/hooks/useMyApi';
+import useMyChart from 'components/hooks/useMyChart';
+import { capitalize } from 'lodash-es';
+import moment from 'moment';
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { Scatter } from 'react-chartjs-2';
+import { useTranslation } from 'react-i18next';
+import { useContextSelector } from 'use-context-selector';
+import { convertCustomDateRangeToLucene, convertDateToLucene, stringToColor } from 'utils/utils';
+const MAX_ROWS = 2500;
+const OVERRIDE_ROWS = 10000;
+const MAX_QUERY_SIZE = 50000;
+const FILTER_FIELDS = [
+    'howler.analytic',
+    'howler.status',
+    'howler.escalation',
+    'howler.assessment',
+    'howler.detection'
+];
+const HitGraph = ({ query }) => {
+    const { t } = useTranslation();
+    const theme = useTheme();
+    const { dispatchApi } = useMyApi();
+    const { scatter } = useMyChart();
+    const { config } = useContext(ApiConfigContext);
+    const setSelected = useContextSelector(ParameterContext, ctx => ctx.setSelected);
+    const setQuery = useContextSelector(ParameterContext, ctx => ctx.setQuery);
+    const span = useContextSelector(ParameterContext, ctx => ctx.span);
+    const startDate = useContextSelector(ParameterContext, ctx => ctx.startDate);
+    const endDate = useContextSelector(ParameterContext, ctx => ctx.endDate);
+    const selectedHits = useContextSelector(HitContext, ctx => ctx.selectedHits);
+    const addHitToSelection = useContextSelector(HitContext, ctx => ctx.addHitToSelection);
+    const removeHitFromSelection = useContextSelector(HitContext, ctx => ctx.removeHitFromSelection);
+    const viewId = useContextSelector(HitSearchContext, ctx => ctx.viewId);
+    const searching = useContextSelector(HitSearchContext, ctx => ctx.searching);
+    const error = useContextSelector(HitSearchContext, ctx => ctx.error);
+    const chartRef = useRef();
+    const [loading, setLoading] = useState(false);
+    const [filterField, setFilterField] = useState(FILTER_FIELDS[0]);
+    const [data, setData] = useState([]);
+    const [showWarning, setShowWarning] = useState(false);
+    const [override, setOverride] = useState(false);
+    const [disabled, setDisabled] = useState(false);
+    const [searchTotal, setSearchTotal] = useState(0);
+    const [escalationFilter, setEscalationFilter] = useState(null);
+    const performQuery = useCallback(async () => {
+        setLoading(true);
+        setSearchTotal(0);
+        try {
+            const filters = [];
+            if (span && !span.endsWith('custom')) {
+                filters.push(`event.created:${convertDateToLucene(span)}`);
+            }
+            else if (startDate && endDate) {
+                filters.push(`event.created:${convertCustomDateRangeToLucene(startDate, endDate)}`);
+            }
+            const total = (await dispatchApi(api.search.count.hit.post({
+                query,
+                filters
+            }))).count;
+            if (total > MAX_QUERY_SIZE) {
+                setDisabled(true);
+                setSearchTotal(total);
+                return;
+            }
+            else {
+                setDisabled(false);
+            }
+            const subQueries = [query || 'howler.id:*'];
+            if (escalationFilter) {
+                subQueries.push(`howler.escalation:${escalationFilter}`);
+            }
+            const graphQuery = subQueries.map(_query => `(${_query})`).join(' AND ');
+            const _data = await dispatchApi(api.search.grouped.hit.post(filterField, {
+                query: graphQuery,
+                fl: 'event.created,howler.assessment,howler.analytic,howler.detection,howler.outline.threat,howler.outline.target,howler.outline.summary,howler.id',
+                // We want a generally random sample across all date ranges, so we use hash.
+                // If we used event.created instead, when 1 million hits/hour are created, you'd only see hits from this past minute
+                sort: 'howler.hash desc',
+                group_sort: 'howler.hash desc',
+                limit: override ? OVERRIDE_ROWS : MAX_ROWS,
+                rows: override ? OVERRIDE_ROWS : MAX_ROWS,
+                filters
+            }));
+            if (_data.total > MAX_ROWS && !override) {
+                setShowWarning(true);
+            }
+            const processed = _data.items.map(category => {
+                const label = capitalize(category.value ?? 'None');
+                return {
+                    label: `${label} (${category.total})`,
+                    data: category.items.map(hit => {
+                        const createdMoment = moment(hit.event?.created ?? hit.timestamp);
+                        return {
+                            x: createdMoment.clone().hour(0).minute(0).second(0).toISOString(),
+                            y: createdMoment.hour() + createdMoment.minute() / 60 + createdMoment.second() / 3600,
+                            hit,
+                            label
+                        };
+                    })
+                };
+            });
+            setData(processed);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [dispatchApi, endDate, escalationFilter, filterField, override, query, span, startDate]);
+    useEffect(() => {
+        if ((!query && !viewId) || searching || error) {
+            return;
+        }
+        performQuery();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [query, viewId, searching, error]);
+    const options = useMemo(() => {
+        const parentOptions = scatter('hit.summary.title', 'hit.summary.subtitle');
+        return {
+            ...parentOptions,
+            animation: false,
+            onClick: (event, elements) => {
+                const ids = elements.map(({ element }) => element.$context?.raw.hit?.howler.id).filter(id => !!id);
+                if (ids.length < 1) {
+                    return;
+                }
+                if (event.native.ctrlKey || event.native.shiftKey) {
+                    ids.forEach(id => {
+                        if (selectedHits.some(hit => hit.howler.id === id)) {
+                            removeHitFromSelection(id);
+                        }
+                        else {
+                            addHitToSelection(id);
+                        }
+                    });
+                }
+                else {
+                    if (ids.length < 2) {
+                        setSelected(ids[0]);
+                    }
+                    else {
+                        setQuery(`howler.id:(${ids.join(' OR ')})`);
+                    }
+                }
+            },
+            onHover: (event, chartElement) => (event.native.target.style.cursor = chartElement[0] ? 'pointer' : 'default'),
+            interaction: {
+                mode: 'nearest'
+            },
+            plugins: {
+                ...parentOptions.plugins,
+                tooltip: {
+                    callbacks: {
+                        title: entries => `${entries.length} ${t('hits')}`,
+                        label: entry => `${entry.raw.hit.howler.analytic}: ${entry.raw.hit.howler.detection} (${moment(entry.raw.hit.event.created).format('MMM D HH:mm:ss')})`,
+                        afterLabel: entry => `${entry.raw.hit.howler.outline.threat} ${entry.raw.hit.howler.outline.target}`
+                    }
+                },
+                zoom: {
+                    ...parentOptions.plugins.zoom,
+                    zoom: {
+                        ...parentOptions.plugins.zoom.zoom,
+                        mode: 'y'
+                    },
+                    limits: {
+                        y: { min: 0, max: 24 }
+                    }
+                }
+            },
+            scales: {
+                ...parentOptions.scales,
+                y: {
+                    ...parentOptions.scales.y,
+                    grid: {
+                        display: true,
+                        color: theme.palette.divider
+                    },
+                    ticks: {
+                        callback: (value) => {
+                            const [hour, minute] = [Math.floor(value), Math.floor((value - Math.floor(value)) * 60)];
+                            return moment().hour(hour).minute(minute).format('HH:mm');
+                        }
+                    }
+                }
+            },
+            elements: {
+                point: {
+                    borderWidth: context => {
+                        return selectedHits.some(hit => hit.howler.id === context.raw.hit?.howler.id) ? 2 : 0;
+                    },
+                    backgroundColor: context => {
+                        return alpha(stringToColor(context.raw.label), 0.6);
+                    },
+                    borderColor: theme.palette.success.light,
+                    pointRadius: 5
+                }
+            }
+        };
+    }, [
+        addHitToSelection,
+        removeHitFromSelection,
+        scatter,
+        selectedHits,
+        setQuery,
+        setSelected,
+        t,
+        theme.palette.divider,
+        theme.palette.success.light
+    ]);
+    useEffect(() => {
+        chartRef.current?.update();
+    }, [selectedHits]);
+    return (_jsxs(Stack, { sx: { position: 'relative' }, spacing: 1, children: [_jsx(Scatter, { ref: chartRef, options: options, data: {
+                    datasets: data
+                } }), _jsxs(Stack, { direction: "row", spacing: 1, sx: { pt: 2 }, children: [_jsx(Autocomplete, { sx: { flex: 1 }, options: FILTER_FIELDS, renderInput: params => _jsx(TextField, { ...params, label: t('hit.summary.filter.field'), size: "small" }), value: filterField, onChange: (__, option) => setFilterField(option) }), _jsx(Autocomplete, { sx: { flex: 1 }, options: config.lookups['howler.escalation'], renderInput: params => _jsx(TextField, { ...params, label: t('hit.summary.filter.escalation'), size: "small" }), value: escalationFilter, onChange: (__, option) => setEscalationFilter(option) })] }), showWarning && (_jsxs(Alert, { severity: "warning", variant: "outlined", action: _jsx(Button, { variant: "outlined", color: "warning", onClick: () => {
+                        setOverride(true);
+                        setShowWarning(false);
+                    }, children: t('hit.summary.render.limit.override') }), children: [_jsx(AlertTitle, { children: t('hit.summary.render.limit', { number: MAX_ROWS }) }), t(`hit.summary.render.limit.description`, { number: MAX_ROWS, max: OVERRIDE_ROWS })] })), disabled && (_jsx(Box, { sx: {
+                    position: 'absolute',
+                    top: theme.spacing(-1),
+                    bottom: 0,
+                    left: 0,
+                    right: 0,
+                    backgroundColor: alpha(theme.palette.background.paper, 0.75),
+                    zIndex: 11,
+                    display: 'flex',
+                    alignItems: 'start'
+                }, children: _jsxs(Alert, { severity: "warning", variant: "outlined", sx: { m: 3, mr: 7, backgroundColor: theme.palette.background.paper }, children: [_jsx(AlertTitle, { children: t('hit.summary.server.limit', { number: searchTotal }) }), t(`hit.summary.server.limit.description`, { max: MAX_QUERY_SIZE })] }) })), _jsxs(Stack, { direction: "row", sx: { position: 'absolute', right: theme.spacing(1), top: 0, zIndex: 12 }, spacing: 1, children: [_jsx(Tooltip, { title: t('hit.summary.zoom.reset'), children: _jsx(IconButton, { disabled: loading, onClick: () => chartRef.current?.resetZoom(), children: _jsx(CenterFocusWeak, {}) }) }), _jsx(Tooltip, { title: t('hit.summary.refresh'), children: _jsx(IconButton, { disabled: loading, onClick: performQuery, children: loading ? _jsx(CircularProgress, { size: 20 }) : _jsx(Refresh, {}) }) })] })] }));
+};
+export default HitGraph;

package/dist/components/elements/hit/elements/Assigned.d.ts

@@ -0,0 +1,9 @@
+import type { Hit } from 'models/entities/generated/Hit';
+import type { FC } from 'react';
+import { HitLayout } from '../HitLayout';
+declare const Assigned: FC<{
+    hit: Hit;
+    layout: HitLayout;
+    hideLabel?: boolean;
+}>;
+export default Assigned;

package/dist/components/elements/hit/elements/Assigned.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { avatarClasses, AvatarGroup, Chip, Stack } from '@mui/material';
+import { useAppUser } from 'commons/components/app/hooks';
+import HowlerAvatar from 'components/elements/display/HowlerAvatar';
+import { useTranslation } from 'react-i18next';
+import { HitLayout } from '../HitLayout';
+const Assigned = ({ hit, layout, hideLabel = false }) => {
+    const { t } = useTranslation();
+    const { user } = useAppUser();
+    const userAvatar = (_jsx(HowlerAvatar, { userId: hit.howler.assignment, sx: { height: layout !== HitLayout.COMFY ? 24 : 32, width: layout !== HitLayout.COMFY ? 24 : 32 } }));
+    return (_jsxs(Stack, { direction: "row", spacing: 0.5, children: [hideLabel ? (userAvatar) : (_jsx(Chip, { variant: "outlined", sx: {
+                    width: 'fit-content',
+                    '& .MuiChip-icon': {
+                        marginLeft: 0
+                    }
+                }, icon: userAvatar, label: !hideLabel &&
+                    (hit?.howler.assignment !== 'unassigned'
+                        ? hit?.howler.assignment
+                        : t('app.drawer.hit.assignment.unassigned.name')), size: layout !== HitLayout.COMFY ? 'small' : 'medium' })), _jsx(AvatarGroup, { max: 3, sx: { [`.${avatarClasses.root}`]: { border: 0, marginLeft: 0.5 } }, componentsProps: {
+                    additionalAvatar: {
+                        sx: {
+                            height: layout !== HitLayout.COMFY ? 24 : 32,
+                            width: layout !== HitLayout.COMFY ? 24 : 32,
+                            fontSize: '12px'
+                        }
+                    }
+                }, children: [...new Set(hit?.howler.viewers)]
+                    .filter(viewer => viewer !== user.username)
+                    .map(viewer => (_jsx(HowlerAvatar, { userId: viewer, sx: { height: layout !== HitLayout.COMFY ? 24 : 32, width: layout !== HitLayout.COMFY ? 24 : 32 } }, viewer))) })] }));
+};
+export default Assigned;

package/dist/components/elements/hit/elements/EscalationChip.d.ts

@@ -0,0 +1,9 @@
+import type { Hit } from 'models/entities/generated/Hit';
+import type { FC } from 'react';
+import { HitLayout } from '../HitLayout';
+declare const EscalationChip: FC<{
+    hit: Hit;
+    layout: HitLayout;
+    hideLabel?: boolean;
+}>;
+export default EscalationChip;

package/dist/components/elements/hit/elements/EscalationChip.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Chip, Tooltip } from '@mui/material';
+import { ESCALATION_COLORS } from 'utils/constants';
+import { HitLayout } from '../HitLayout';
+const EscalationChip = ({ hit, layout, hideLabel = false }) => {
+    const label = ['evidence', 'miss'].includes(hit.howler.escalation) ? hit.howler.assessment : hit.howler.escalation;
+    const component = (_jsx(Chip, { sx: [{ width: 'fit-content', display: 'inline-flex' }, HitLayout.DENSE && { minWidth: '20px' }], label: hideLabel ? ' ' : label, size: layout !== HitLayout.COMFY ? 'small' : 'medium', color: ESCALATION_COLORS[hit.howler.escalation] }));
+    return hideLabel ? _jsx(Tooltip, { title: label, children: component }) : component;
+};
+export default EscalationChip;

package/dist/components/elements/hit/elements/HitTimestamp.d.ts

@@ -0,0 +1,8 @@
+import type { Hit } from 'models/entities/generated/Hit';
+import type { FC } from 'react';
+import { HitLayout } from '../HitLayout';
+declare const HitTimestamp: FC<{
+    hit: Hit;
+    layout: HitLayout;
+}>;
+export default HitTimestamp;

package/dist/components/elements/hit/elements/HitTimestamp.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Chip, Tooltip } from '@mui/material';
+import { ApiConfigContext } from 'components/app/providers/ApiConfigProvider';
+import moment from 'moment';
+import { useContext, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { formatDate } from 'utils/utils';
+import { HitLayout } from '../HitLayout';
+const TIMESTAMP_MESSAGES = {
+    default: 'retention.safe',
+    warning: 'retention.warn',
+    error: 'retention.error'
+};
+const HitTimestamp = ({ hit, layout }) => {
+    const { t } = useTranslation();
+    const { config } = useContext(ApiConfigContext);
+    const threshold = useMemo(() => moment().subtract(config.configuration.system.retention?.limit_amount ?? 350, config.configuration.system.retention?.limit_unit ?? 'days'), [config.configuration.system.retention?.limit_amount, config.configuration.system.retention?.limit_unit]);
+    const timestamp = useMemo(() => {
+        const validFieldValues = [hit.howler?.expiry, hit.event?.created, hit.timestamp];
+        const earliestDate = validFieldValues
+            .filter(entry => !!entry)
+            .reduce((earliest, current) => {
+            return moment(earliest).isBefore(current) ? earliest : current;
+        });
+        return earliestDate;
+    }, [hit]);
+    const color = useMemo(() => {
+        if (moment(timestamp).isBefore(threshold.clone().add(2, 'weeks'))) {
+            return 'error';
+        }
+        if (moment(timestamp).isBefore(threshold.clone().add(1, 'months'))) {
+            return 'warning';
+        }
+        return 'default';
+    }, [threshold, timestamp]);
+    const duration = useMemo(() => {
+        if (moment(timestamp).isBefore(threshold)) {
+            return t('retention.imminent');
+        }
+        const diff = moment(timestamp).diff(threshold, 'seconds');
+        const _duration = moment.duration(diff, 'seconds');
+        return _duration.humanize();
+    }, [t, threshold, timestamp]);
+    return (_jsx(Tooltip, { title: t(TIMESTAMP_MESSAGES[color], {
+            duration
+        }), children: _jsx(Chip, { variant: "outlined", color: color, label: formatDate(timestamp), size: layout !== HitLayout.COMFY ? 'small' : 'medium' }) }));
+};
+export default HitTimestamp;

package/dist/components/elements/hit/outlines/DefaultOutline.d.ts

@@ -0,0 +1,12 @@
+import type { Hit } from 'models/entities/generated/Hit';
+import type { Template } from 'models/entities/generated/Template';
+import React from 'react';
+import { HitLayout } from '../HitLayout';
+declare const _default: React.NamedExoticComponent<{
+    hit: Hit;
+    fields: string[];
+    template?: Template;
+    layout?: HitLayout;
+    readonly?: boolean;
+}>;
+export default _default;

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

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Info, Language, Lock, Person } from '@mui/icons-material';
+import { Box, IconButton, Tooltip, Typography } from '@mui/material';
+import { ApiConfigContext } from 'components/app/providers/ApiConfigProvider';
+import PluginTypography from 'components/elements/PluginTypography';
+import { get, isObject } from 'lodash-es';
+import React, { memo, useCallback, useContext } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { HitLayout } from '../HitLayout';
+const DefaultOutline = ({ hit, fields, template, layout = HitLayout.NORMAL, readonly = false }) => {
+    const { t } = useTranslation();
+    const { config } = useContext(ApiConfigContext);
+    const navigate = useNavigate();
+    const handleOpen = useCallback((event) => {
+        event.stopPropagation();
+        const params = {
+            analytic: hit.howler.analytic,
+            type: template?.type ?? 'personal'
+        };
+        if (template?.detection) {
+            params.detection = template.detection;
+        }
+        else if (!template && hit.howler.detection) {
+            params.detection = hit.howler.detection;
+        }
+        navigate('/templates/view?' +
+            Object.entries(params)
+                .map(([key, val]) => `${key}=${val}`)
+                .join('&'));
+    }, [hit.howler.analytic, hit.howler.detection, navigate, template]);
+    return (_jsxs(Box, { display: "grid", gridTemplateColumns: "auto 1fr", columnGap: 1, sx: { position: 'relative' }, children: [_jsx(IconButton, { size: "small", sx: { position: 'absolute', right: 0, top: 0 }, onClick: handleOpen, children: readonly ? ( // Built in template
+                _jsx(Tooltip, { title: t('route.templates.builtin'), children: _jsx(Lock, { fontSize: "small" }) })) : !template ? ( // No type specified => using the default
+                _jsx(Tooltip, { title: t('route.templates.default'), children: _jsx(Info, { fontSize: "small" }) })) : template.type === 'global' ? ( // Type is global => global template
+                _jsx(Tooltip, { title: t('route.templates.global'), children: _jsx(Language, { fontSize: "small" }) })) : (
+                // Finally, type isn't global => personal template
+                _jsx(Tooltip, { title: t('route.templates.personal'), children: _jsx(Person, { fontSize: "small" }) })) }), (fields ?? [])
+                .map(field => [field, get(hit, field)])
+                .map(([field, data]) => {
+                const displayedData = (Array.isArray(data) ? data.join(', ') : isObject(data) ? JSON.stringify(data) : data)?.toString();
+                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, children: displayedData })] }, field));
+            })] }));
+};
+export default memo(DefaultOutline);