@cccsaurora/howler-ui 2.12.0-dev.168

package/components/elements/hit/HitLayout.js

@@ -0,0 +1,6 @@
+export var HitLayout;
+(function (HitLayout) {
+    HitLayout["DENSE"] = "dense";
+    HitLayout["NORMAL"] = "normal";
+    HitLayout["COMFY"] = "comfy";
+})(HitLayout || (HitLayout = {}));

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

@@ -0,0 +1,8 @@
+import type { Analytic } from '@cccsaurora/howler-ui/models/entities/generated/Analytic';
+import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+declare const _default: import("react").NamedExoticComponent<{
+    analytic: Analytic;
+    selectedNotebook?: string;
+    hit?: Hit;
+}>;
+export default _default;

package/components/elements/hit/HitNotebooks.js

@@ -0,0 +1,145 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Avatar, Backdrop, Box, Button, Chip, CircularProgress, ClickAwayListener, Fade, MenuItem, Paper, Popper, Stack, TextField } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
+import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import useMySnackbar from '@cccsaurora/howler-ui/components/hooks/useMySnackbar';
+import { memo, useCallback, useContext, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { safeStringPropertyCompare } from '@cccsaurora/howler-ui/utils/stringUtils';
+import HowlerCard from '../display/HowlerCard';
+import ConfirmNotebookModal from '../display/modals/ConfirmNotebookModal';
+const FETCH_OPTIONS = {
+    credentials: 'include',
+    headers: {
+        Accept: '*/*',
+        'Sec-Fetch-Dest': 'empty',
+        'Sec-Fetch-Mode': 'cors',
+        'Sec-Fetch-Site': 'same-site'
+    },
+    mode: 'cors'
+};
+const HitNotebooks = ({ analytic, selectedNotebook, hit }) => {
+    const { t } = useTranslation();
+    const { config } = useContext(ApiConfigContext);
+    const { showErrorMessage } = useMySnackbar();
+    const { dispatchApi } = useMyApi();
+    const [open, setOpen] = useState(false);
+    const [envs, setEnvs] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [loadedNotebook, setLoadedNotebook] = useState({
+        nb_content: null,
+        name: ''
+    });
+    const [anchorEl, setAnchorEl] = useState(null);
+    const { showModal } = useContext(ModalContext);
+    const handleToggle = (event) => {
+        setAnchorEl(event.currentTarget);
+        setOpen(prev => !prev);
+    };
+    const goToJupyhub = useCallback(async (filename, url) => {
+        try {
+            await fetch(url, {
+                ...FETCH_OPTIONS,
+                method: 'post',
+                body: `{"type":"notebook","content":${JSON.stringify(loadedNotebook.nb_content)}}`
+            });
+            window.open(`${envs[0].url}lab/tree/${filename}`, '_blank');
+            setOpen(false);
+        }
+        catch (e) {
+            showErrorMessage(t('hit.notebook.error.failToPost'));
+        }
+    }, [envs, loadedNotebook, showErrorMessage, t]);
+    const checkJupyhub = useCallback(async () => {
+        setLoading(true);
+        const nbFileName = hit ? `${loadedNotebook.name} - ${hit.howler.id}.ipynb` : `${loadedNotebook.name}.ipynb`;
+        //using fetch since we are going directly to jupyterhub
+        try {
+            const response = await fetch(`${envs[0].url}api/contents/${nbFileName}`, FETCH_OPTIONS);
+            if (response.status < 300) {
+                // if it exists, we need to ask for overwrite
+                showModal(_jsx(ConfirmNotebookModal, { onConfirm: () => {
+                        goToJupyhub(nbFileName, `${envs[0].url}post/${nbFileName}`);
+                    } }));
+            }
+            else {
+                goToJupyhub(nbFileName, `${envs[0].url}post/${nbFileName}`);
+            }
+        }
+        catch (e) {
+            // error means notebook doesn't exist, we can proceed with posting
+            goToJupyhub(nbFileName, `${envs[0].url}post/${nbFileName}`);
+        }
+        setLoading(false);
+    }, [envs, goToJupyhub, hit, loadedNotebook, showModal]);
+    const fetchEnvs = useCallback(async () => {
+        setLoading(true);
+        try {
+            const jhEnvs = await dispatchApi(api.notebook.environments.get(), { showError: true, throwError: false });
+            setEnvs(jhEnvs.envs.map(env => ({ ...env, url: env.url.endsWith('/') ? env.url : env.url + '/' })));
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [dispatchApi]);
+    // retrieve notebook json from howler-api/nbgallery
+    const fetchNb = useCallback(async (link) => {
+        setLoading(true);
+        try {
+            const notebookResponse = await dispatchApi(api.notebook.post({
+                link: link ?? analytic?.notebooks.find(n => n.name === selectedNotebook).value,
+                analytic: analytic,
+                ...(hit ? { hit: hit } : {})
+            }), {
+                showError: true,
+                throwError: false
+            });
+            setLoadedNotebook(notebookResponse);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [analytic, dispatchApi, hit, selectedNotebook]);
+    useEffect(() => {
+        if (open) {
+            fetchEnvs(); //retrieve env info from howler-api/nbgallery
+            if (selectedNotebook) {
+                fetchNb();
+            }
+        }
+        else {
+            setLoadedNotebook({
+                nb_content: null,
+                name: ''
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open]);
+    return (config.configuration.features.notebook &&
+        analytic?.notebooks && (_jsx(ClickAwayListener, { onClickAway: () => setOpen(false), mouseEvent: 'onMouseUp', children: _jsxs("div", { children: [_jsx(Popper, { open: open, anchorEl: anchorEl, placement: 'bottom', transition: true, sx: { zIndex: 1499 }, children: ({ TransitionProps }) => (_jsx(Fade, { ...TransitionProps, timeout: 350, children: _jsxs(Paper, { sx: { maxWidth: '90%', width: '400px', p: 1, position: 'relative' }, children: [_jsx(Backdrop, { open: loading, sx: { position: 'absolute', zIndex: theme => theme.zIndex.drawer + 1 }, children: _jsx(Stack, { direction: "column", children: _jsx("div", { style: { textAlign: 'center' }, children: _jsx(CircularProgress, { color: "inherit" }) }) }) }), _jsxs(Stack, { direction: "column", spacing: 2, sx: { p: 1 }, children: [_jsxs(TextField, { disabled: !!selectedNotebook, label: "Notebook", select: true, onChange: e => {
+                                                fetchNb(e.target.value);
+                                            }, SelectProps: {
+                                                MenuProps: {
+                                                    style: { zIndex: 35001 }
+                                                }
+                                            }, defaultValue: selectedNotebook ? analytic?.notebooks.find(n => n.name === selectedNotebook).value : '', children: [_jsx(MenuItem, { disabled: true, value: "", children: _jsx("em", { children: t('hit.notebook.select') }) }), analytic?.notebooks.sort(safeStringPropertyCompare('detection')).map(e => (_jsx(MenuItem, { value: e.value, children: _jsxs(Stack, { direction: 'row', sx: { width: '100%' }, children: [e.name, e.detection && (_jsxs(_Fragment, { children: [_jsx(Box, { flex: 1 }), _jsx(Chip, { label: e.detection, size: "small" })] }))] }) }, e.value)))] }), _jsx(Button, { variant: "outlined", disabled: loadedNotebook.name === '' || envs.length === 0, color: "success", onClick: () => checkJupyhub(), children: t('hit.notebook.goTo') })] })] }) })) }), _jsx(HowlerCard, { variant: "elevation", onClick: handleToggle, sx: [
+                        theme => ({
+                            cursor: 'pointer',
+                            backgroundColor: 'transparent',
+                            transition: theme.transitions.create(['border-color']),
+                            '&:hover': { borderColor: 'primary.main' }
+                        }),
+                        { border: 'thin solid', borderColor: 'transparent' }
+                    ], children: _jsxs(Stack, { direction: "row", p: 1, spacing: 1, alignItems: "center", children: [_jsx(Avatar, { variant: "rounded", src: '/images/jupyter_notebook_file_icon.png', sx: [
+                                    theme => ({
+                                        width: theme.spacing(3),
+                                        height: theme.spacing(3),
+                                        '& img': {
+                                            objectFit: 'contain'
+                                        }
+                                    })
+                                ], children: 'jupyter_notebook_file_icon.png' }), t('hit.notebook.tooltip')] }) })] }) })));
+};
+export default memo(HitNotebooks);

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

@@ -0,0 +1,9 @@
+import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+import { HitLayout } from './HitLayout';
+export declare const DEFAULT_FIELDS: string[];
+declare const _default: import("react").NamedExoticComponent<{
+    hit: Hit;
+    layout: HitLayout;
+    type?: "global" | "personal";
+}>;
+export default _default;

package/components/elements/hit/HitOutline.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Divider, Skeleton, Typography } from '@mui/material';
+import { TemplateContext } from '@cccsaurora/howler-ui/components/app/providers/TemplateProvider';
+import { createElement, memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useContextSelector } from 'use-context-selector';
+import { HitLayout } from './HitLayout';
+import DefaultOutline from './outlines/DefaultOutline';
+export const DEFAULT_FIELDS = ['howler.hash'];
+const HitOutline = ({ hit, layout, type }) => {
+    const { t } = useTranslation();
+    const loaded = useContextSelector(TemplateContext, ctx => ctx.loaded);
+    const getMatchingTemplate = useContextSelector(TemplateContext, ctx => ctx.getMatchingTemplate);
+    const template = useMemo(() => getMatchingTemplate(hit), [getMatchingTemplate, hit]);
+    const outline = useMemo(() => {
+        if (template && template.type === type) {
+            return createElement(DefaultOutline, {
+                hit,
+                layout,
+                template,
+                fields: template.keys
+            });
+        }
+        else if (!loaded) {
+            return _jsx(Skeleton, { variant: "rounded", height: "50px" });
+        }
+        else if (template) {
+            return createElement(DefaultOutline, {
+                hit,
+                layout,
+                template,
+                fields: template.keys,
+                readonly: template.type === 'readonly'
+            });
+        }
+        else {
+            return createElement(DefaultOutline, {
+                hit,
+                layout,
+                fields: DEFAULT_FIELDS
+            });
+        }
+    }, [hit, layout, loaded, template, type]);
+    return (_jsxs(Box, { sx: { py: 1, width: '100%', pr: 2 }, children: [layout === HitLayout.COMFY && (_jsx(Typography, { variant: "body1", fontWeight: "bold", sx: { mb: 1 }, children: t('hit.details.title') })), layout !== HitLayout.DENSE && _jsx(Divider, { orientation: "horizontal", sx: { mb: 1 } }), outline] }));
+};
+export default memo(HitOutline);

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

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

package/components/elements/hit/HitOverview.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { InsertLink } from '@mui/icons-material';
+import { Box, IconButton, Skeleton } from '@mui/material';
+import { OverviewContext } from '@cccsaurora/howler-ui/components/app/providers/OverviewProvider';
+import ErrorBoundary from '@cccsaurora/howler-ui/components/routes/ErrorBoundary';
+import { memo, useContext, useMemo } from 'react';
+import { Link } from 'react-router-dom';
+import HandlebarsMarkdown from '../display/HandlebarsMarkdown';
+const HitOverview = ({ content, hit }) => {
+    const { getMatchingOverview } = useContext(OverviewContext);
+    const matchingOverview = useMemo(() => (hit ? getMatchingOverview(hit) : null), [getMatchingOverview, hit]);
+    const link = useMemo(() => matchingOverview
+        ? `/overviews/view?analytic=${encodeURIComponent(matchingOverview.analytic)}${matchingOverview.detection && '&detection=' + encodeURIComponent(matchingOverview.detection)}`
+        : hit
+            ? `/overviews/view?analytic=${encodeURIComponent(hit?.howler.analytic)}${hit?.howler.detection && '&detection=' + encodeURIComponent(hit?.howler.detection)}`
+            : null, [hit, matchingOverview]);
+    return (_jsxs(Box, { sx: { position: 'relative', height: '100%', overflow: 'auto' }, children: [link && (_jsx(IconButton, { component: Link, to: link, sx: theme => ({ position: 'absolute', right: theme.spacing(1), top: theme.spacing(1) }), children: _jsx(InsertLink, {}) })), matchingOverview || content ? (_jsx(ErrorBoundary, { children: _jsx(HandlebarsMarkdown, { md: content ?? matchingOverview.content, object: hit, disableLinks: true }) })) : (_jsx(Skeleton, { variant: "rounded", height: "40vh" }))] }));
+};
+export default memo(HitOverview);

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

@@ -0,0 +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 = {
+    hit: Hit;
+    options: AppSearchItemRendererOption<Hit>;
+};
+declare const _default: import("react").NamedExoticComponent<QuickSearchProps>;
+export default _default;

package/components/elements/hit/HitQuickSearch.js

@@ -0,0 +1,31 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Box, Chip, Divider, Stack, Tooltip, Typography, useMediaQuery, useTheme } from '@mui/material';
+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 { 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: {
+                            tooltip: {
+                                sx: {
+                                    fontSize: 12,
+                                    backgroundColor: theme.palette.background.paper,
+                                    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: {
+                                    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: {
+                                    '& .MuiChip-icon': {
+                                        marginLeft: 0
+                                    }
+                                }, label: hit?.howler.assignment !== 'unassigned'
+                                    ? 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);

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

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

package/components/elements/hit/HitRelated.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Grid } from '@mui/material';
+import RelatedLink from './related/RelatedLink';
+const HitRelated = ({ hit }) => {
+    return (_jsx(Grid, { container: true, spacing: 1, pr: 2, children: hit?.howler.links?.map(l => (_jsx(Grid, { item: true, xs: 6, sm: 4, md: 3, children: _jsx(RelatedLink, { ...l }) }, l.title + l.href))) }));
+};
+export default HitRelated;

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

@@ -0,0 +1,5 @@
+export declare enum HitShortcuts {
+    SHORTCUTS_HINT = "hint",
+    SHORTCUTS = "shortcut",
+    NO_SHORTCUTS = "no"
+}

package/components/elements/hit/HitShortcuts.js

@@ -0,0 +1,6 @@
+export var HitShortcuts;
+(function (HitShortcuts) {
+    HitShortcuts["SHORTCUTS_HINT"] = "hint";
+    HitShortcuts["SHORTCUTS"] = "shortcut";
+    HitShortcuts["NO_SHORTCUTS"] = "no";
+})(HitShortcuts || (HitShortcuts = {}));

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

@@ -0,0 +1,10 @@
+import type { HowlerSearchResponse } from '@cccsaurora/howler-ui/api/search';
+import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+declare const _default: import("react").NamedExoticComponent<{
+    query: string;
+    response?: HowlerSearchResponse<Hit>;
+    execute?: boolean;
+    onStart?: () => void;
+    onComplete?: () => void;
+}>;
+export default _default;

package/components/elements/hit/HitSummary.js

@@ -0,0 +1,151 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Analytics, InfoOutlined } from '@mui/icons-material';
+import { Alert, AlertTitle, Autocomplete, Box, Button, Chip, CircularProgress, Divider, Fade, Grid, LinearProgress, Stack, TextField, Tooltip, Typography } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
+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 { TemplateContext } from '@cccsaurora/howler-ui/components/app/providers/TemplateProvider';
+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';
+import { isEmpty } from 'lodash-es';
+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 { convertCustomDateRangeToLucene, convertDateToLucene, getTimeRange } from '@cccsaurora/howler-ui/utils/utils';
+import PluginChip from '../PluginChip';
+import HitGraph from './aggregate/HitGraph';
+const HitSummary = ({ query, response, onStart, onComplete }) => {
+    const { t } = useTranslation();
+    const getMatchingTemplate = useContextSelector(TemplateContext, ctx => ctx.getMatchingTemplate);
+    const { dispatchApi } = useMyApi();
+    const { hitFields } = useContext(FieldContext);
+    const { showErrorMessage } = useMySnackbar();
+    const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
+    const setQuery = useContextSelector(ParameterContext, ctx => ctx.setQuery);
+    const viewId = useContextSelector(HitSearchContext, ctx => ctx.viewId);
+    const searching = useContextSelector(HitSearchContext, ctx => ctx.searching);
+    const error = useContextSelector(HitSearchContext, ctx => ctx.error);
+    const span = useContextSelector(ParameterContext, ctx => ctx.span);
+    const startDate = useContextSelector(ParameterContext, ctx => ctx.startDate);
+    const endDate = useContextSelector(ParameterContext, ctx => ctx.endDate);
+    const [loading, setLoading] = useState(false);
+    const [customKeys, setCustomKeys] = useState([]);
+    const [keyCounts, setKeyCounts] = useState({});
+    const [aggregateResults, setAggregateResults] = useState({});
+    const performAggregation = useCallback(async () => {
+        if (onStart) {
+            onStart();
+        }
+        const filters = [];
+        if (span && !span.endsWith('custom')) {
+            filters.push(`event.created:${convertDateToLucene(span)}`);
+        }
+        else if (startDate && endDate) {
+            filters.push(`event.created:${convertCustomDateRangeToLucene(startDate, endDate)}`);
+        }
+        try {
+            // Get a list of every key in every template of the hits we're searching
+            const _keyCounts = (response?.items ?? [])
+                .flatMap(h => {
+                const matchingTemplate = getMatchingTemplate(h);
+                return (matchingTemplate?.keys ?? [])
+                    .filter(key => !['howler.id', 'howler.hash'].includes(key))
+                    .map(key => ({
+                    key,
+                    source: `${matchingTemplate.analytic}: ${matchingTemplate.detection ?? t('any')}`
+                }));
+            })
+                .concat(customKeys.map(key => ({ key, source: 'custom' })))
+                // Take that array and reduce it to unique keys and the number of times we see it,
+                // as well as the templates we sourced this key from
+                .reduce((acc, val) => {
+                if (acc[val.key] && val.source !== 'custom') {
+                    acc[val.key].count++;
+                }
+                else if (val.source === 'custom') {
+                    acc[val.key] = {
+                        count: -1,
+                        sources: [val.source]
+                    };
+                }
+                else {
+                    acc[val.key] = {
+                        count: 1,
+                        sources: [val.source]
+                    };
+                }
+                return acc;
+            }, {});
+            // We'll save this for later
+            setKeyCounts(_keyCounts);
+            setAggregateResults({});
+            // Sort the fields based on the number of occurrences
+            const sortedKeys = Object.keys(_keyCounts).sort((a, b) => (_keyCounts[b]?.count ?? 0) - (_keyCounts[a]?.count ?? 0));
+            setLoading(true);
+            // Facet each field
+            for (const key of sortedKeys) {
+                const result = await dispatchApi(api.search.facet.hit.post(key, {
+                    query,
+                    rows: pageCount,
+                    filters
+                }), {
+                    throwError: false,
+                    logError: true,
+                    showError: false
+                });
+                if (result) {
+                    setAggregateResults(_results => ({
+                        ..._results,
+                        [key]: result
+                    }));
+                }
+            }
+        }
+        catch (e) {
+            showErrorMessage(e);
+            setAggregateResults({});
+        }
+        finally {
+            setLoading(false);
+            if (onComplete) {
+                onComplete();
+            }
+        }
+    }, [
+        customKeys,
+        dispatchApi,
+        endDate,
+        getMatchingTemplate,
+        onComplete,
+        onStart,
+        pageCount,
+        query,
+        response?.items,
+        showErrorMessage,
+        span,
+        startDate,
+        t
+    ]);
+    const setSearch = useCallback((key, value) => {
+        setQuery(`${key}:${value}`);
+    }, [setQuery]);
+    useEffect(() => {
+        if ((!query && !viewId) || searching || error) {
+            return;
+        }
+        performAggregation();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [query, viewId, searching, error]);
+    return (_jsxs(Stack, { sx: { mx: 2, height: '100%' }, spacing: 1, children: [_jsx(Typography, { variant: "h6", children: t('hit.summary.aggregate.title') }), _jsx(Divider, { flexItem: true }), _jsx(HitGraph, { query: query }), _jsx(Divider, { flexItem: true }), _jsxs(Stack, { sx: { overflow: 'auto', marginTop: '0 !important' }, pt: 1, spacing: 1, children: [_jsxs(Stack, { direction: "row", spacing: 2, mb: 2, alignItems: "stretch", children: [_jsx(Autocomplete, { fullWidth: true, multiple: true, sx: { minWidth: '175px' }, size: "small", value: customKeys, options: hitFields.map(_field => _field.key), renderInput: _params => _jsx(TextField, { ..._params, label: t('hit.summary.adhoc') }), onChange: (_, value) => setCustomKeys(value) }), _jsx(Button, { variant: "outlined", startIcon: loading ? _jsx(CircularProgress, { size: 20, sx: { ml: 1 } }) : _jsx(Analytics, { sx: { ml: 1 } }), disabled: loading, onClick: () => performAggregation(), children: t('button.aggregate') })] }), isEmpty(aggregateResults) && (_jsxs(Alert, { severity: "info", variant: "outlined", children: [_jsx(AlertTitle, { children: t('hit.summary.aggregate.nokeys.title') }), t('hit.summary.aggregate.nokeys.description')] })), loading && _jsx(LinearProgress, { sx: { minHeight: '4px' } }), Object.keys(aggregateResults)
+                        .filter(key => !isEmpty(aggregateResults[key]))
+                        .flatMap(key => [
+                        _jsx(Fade, { in: true, children: _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [_jsx(Typography, { variant: "body1", children: key }, key + '-title'), keyCounts[key]?.count < 0 ? (_jsxs(Typography, { variant: "caption", color: "text.secondary", children: ["(", t('hit.summary.adhoc.custom'), ")"] })) : (_jsxs(Typography, { variant: "caption", color: "text.secondary", children: ["(", keyCounts[key]?.count, " ", t('references'), ")"] })), _jsx(Tooltip, { title: _jsxs(Stack, { children: [_jsx(Typography, { variant: "caption", children: t('hit.summary.aggregate.sources') }), keyCounts[key].sources.map(source => (_jsx(Typography, { variant: "caption", children: source }, source)))] }), children: _jsx(InfoOutlined, { fontSize: "inherit" }) })] }) }, key + '-refs'),
+                        _jsx(Fade, { in: true, children: hitFields.find(f => f.key === key)?.type !== 'date' ? (_jsx(Box, { sx: theme => ({ ml: `${theme.spacing(1)} !important`, alignSelf: 'start' }), children: _jsx(Grid, { container: true, sx: theme => ({ mr: 1, mt: theme.spacing(-1) }), spacing: 1, children: Object.keys(aggregateResults[key]).map(_key => (_jsx(Grid, { item: true, xs: "auto", children: _jsx(PluginChip, { context: "summary", size: "small", variant: "filled", value: _key, label: `${_key} (${aggregateResults[key][_key]})`, onClick: () => setSearch(key, `"${_key}"`) }) }, _key))) }, key + '-list') })) : (_jsx(Chip, { size: "small", sx: theme => ({ ml: `${theme.spacing(1)} !important`, alignSelf: 'start' }), label: getTimeRange(Object.keys(aggregateResults[key]))
+                                    .map(d => new Date(d).toLocaleString())
+                                    .join(' - '), onClick: () => setSearch(key, `[${getTimeRange(Object.keys(aggregateResults[key])).join(' TO ')}]`) })) }, key + '-results')
+                    ])] })] }));
+};
+export default memo(HitSummary);

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

@@ -0,0 +1,10 @@
+import type { HowlerUser } from '@cccsaurora/howler-ui/models/entities/HowlerUser';
+import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+import type { FC } from 'react';
+declare const HitWorklog: FC<{
+    hit: Hit;
+    users: {
+        [id: string]: HowlerUser;
+    };
+}>;
+export default HitWorklog;

package/components/elements/hit/HitWorklog.js

@@ -0,0 +1,97 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { KeyboardArrowUp } from '@mui/icons-material';
+import { CardContent, CardHeader, Divider, Skeleton, Stack, Tooltip, Typography, useTheme } from '@mui/material';
+import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
+import useMyUtils from '@cccsaurora/howler-ui/components/hooks/useMyUtils';
+import { useEffect, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
+import { compareTimestamp, twitterShort } from '@cccsaurora/howler-ui/utils/utils';
+import HowlerAvatar from '../display/HowlerAvatar';
+import HowlerCard from '../display/HowlerCard';
+import Markdown from '../display/Markdown';
+const HitWorklog = ({ hit, users }) => {
+    const theme = useTheme();
+    const { shiftColor } = useMyUtils();
+    const { t } = useTranslation();
+    // This value tracks the latest hit version we have seen.
+    // That way, when we see a new version, we can highlight the new changes in the UI
+    const [initialVersions, setInitialVersions] = useMyLocalStorageItem(StorageKey.LAST_SEEN, {});
+    /**
+     * The variable that tracks the grouped worklog entries. For the sake of readability, we group together log items that are close in time and created
+     * by the same user. We also add a split between previously seen and new worklog entries.
+     */
+    const worklogGroups = useMemo(() => {
+        let setInitialVersion = false;
+        return (hit?.howler?.log || [])
+            .slice()
+            .sort((a, b) => compareTimestamp(b.timestamp, a.timestamp))
+            .reduce((acc, l) => {
+            if (!initialVersions[hit.howler.id] && !setInitialVersion) {
+                setInitialVersion = true;
+                setInitialVersions({
+                    ...initialVersions,
+                    [hit.howler.id]: l.previous_version
+                });
+            }
+            // Initialize the worklog card groups
+            if (!acc.length) {
+                return [[l]];
+            }
+            // Get the the most recent worklog card
+            const currArr = acc[acc.length - 1];
+            if (
+            // Does this log version match the saved version?
+            l.previous_version === initialVersions[hit.howler.id] &&
+                // Does the previous entry not match?
+                currArr[currArr.length - 1].previous_version !== initialVersions[hit.howler.id]) {
+                // If so, we've figured out where the new logs should start, so we start a new card.
+                acc.push([l]);
+                return acc;
+            }
+            // If a different user added this to the log, or enough time has passed, we start a new card
+            if (currArr[0].user === l.user && compareTimestamp(currArr[0].timestamp, l.timestamp) < 60 * 5) {
+                currArr.push(l);
+                return acc;
+            }
+            acc.push([l]);
+            return acc;
+        }, []);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [hit?.howler?.log]);
+    useEffect(() => {
+        // On unmount, mark the latest entry version as the last seen version.
+        return () => {
+            if (hit?.howler.id) {
+                setInitialVersions({
+                    ...initialVersions,
+                    [hit.howler.id]: worklogGroups[0][0]?.previous_version ?? initialVersions[hit.howler.id]
+                });
+            }
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    // We now render the actual HTML from our grouped worklog items
+    const worklogEls = useMemo(() => {
+        if (worklogGroups.length > 0) {
+            return worklogGroups.flatMap((ls, index) => {
+                const result = [];
+                if (index > 0 && initialVersions[hit.howler.id] && ls[0].previous_version === initialVersions[hit.howler.id]) {
+                    result.push(_jsx(Divider, { children: _jsxs(Stack, { direction: "row", children: [_jsx(KeyboardArrowUp, { sx: { color: 'text.secondary' }, fontSize: "small" }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('hit.worklog.new') }), _jsx(KeyboardArrowUp, { sx: { color: 'text.secondary' }, fontSize: "small" })] }) }, "new"));
+                }
+                result.push(_jsxs(HowlerCard, { elevation: 4, children: [_jsx(CardHeader, { avatar: _jsx(HowlerAvatar, { userId: ls[0].user }), title: users[ls[0].user]?.name ?? ls[0].user, subheader: _jsx(Tooltip, { title: new Date(ls[0].timestamp).toLocaleString(), children: _jsx(Typography, { variant: "caption", children: twitterShort(ls[0].timestamp) }) }) }), _jsx(CardContent, { children: _jsx(Stack, { spacing: 1, divider: _jsx(Divider, { orientation: "horizontal" }), children: ls.map(l => (_jsxs(Typography, { variant: "body2", color: "text.secondary", component: "div", position: "relative", children: [l.explanation ? (_jsx(Markdown, { md: l.explanation.trim() })) : (_jsxs(_Fragment, { children: [_jsxs("span", { children: [t('hit.worklog.updated'), "\u00A0"] }), _jsx("code", { children: l.key }), _jsx("span", { children: ":\u00A0" }), {
+                                                    set: (_jsxs("span", { children: [l.previous_value, " ", t('hit.worklog.set'), " ", l.new_value] })),
+                                                    appended: (_jsxs("span", { children: [l.new_value, " ", t('hit.worklog.appended'), " ", l.previous_value?.replace(/[[\]]/g, '')] })),
+                                                    removed: (_jsxs("span", { children: [l.new_value, " ", t('hit.worklog.removed'), " ", l.previous_value?.replace(/[[\]]/g, '')] }))
+                                                }[l.type]] })), ls.length > 1 && (_jsx(Tooltip, { title: new Date(l.timestamp).toLocaleString(), children: _jsx(Typography, { sx: { ml: 0.5, position: 'absolute', right: '1rem', top: 0 }, variant: "caption", color: shiftColor(theme.palette.text.primary, 0.5), children: twitterShort(l.timestamp) }) }))] }, l.timestamp))) }) })] }, ls[0].timestamp));
+                return result;
+            });
+        }
+        else if (!hit?.howler) {
+            return (_jsxs(_Fragment, { children: [_jsx(Skeleton, { width: "100%", height: 200, variant: "rounded" }), _jsx(Skeleton, { width: "100%", height: 220, variant: "rounded" }), _jsx(Skeleton, { width: "100%", height: 150, variant: "rounded" })] }));
+        }
+    }, [worklogGroups, hit.howler, initialVersions, users, t, shiftColor, theme.palette.text.primary]);
+    return (_jsx(Stack, { sx: { p: 2 }, spacing: 1, children: worklogEls }));
+};
+export default HitWorklog;

package/components/elements/hit/actions/ButtonActions.d.ts

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