@cccsaurora/howler-ui 2.14.0-dev.269 → 2.14.0-dev.272

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

@@ -0,0 +1,236 @@
+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 '@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 useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import useMyChart from '@cccsaurora/howler-ui/components/hooks/useMyChart';
+import dayjs from 'dayjs';
+import { capitalize } from 'lodash-es';
+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 '@cccsaurora/howler-ui/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 error = useContextSelector(HitSearchContext, ctx => ctx.error);
+    const response = useContextSelector(HitSearchContext, ctx => ctx.response);
+    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)}`);
+            }
+            if (escalationFilter) {
+                filters.push(`howler.escalation:${escalationFilter}`);
+            }
+            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 _data = await dispatchApi(api.search.grouped.hit.post(filterField, {
+                query: query || 'howler.id:*',
+                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 createdDate = dayjs(hit.event?.created ?? hit.timestamp);
+                        return {
+                            x: createdDate.clone().hour(0).minute(0).second(0).toISOString(),
+                            y: createdDate.hour() + createdDate.minute() / 60 + createdDate.second() / 3600,
+                            hit,
+                            label
+                        };
+                    })
+                };
+            });
+            setData(processed);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [dispatchApi, endDate, escalationFilter, filterField, override, query, span, startDate]);
+    useEffect(() => {
+        if ((!query && !viewId) || error || !response) {
+            return;
+        }
+        performQuery();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [query, viewId, error, span, response]);
+    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} (${dayjs(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 dayjs().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/components/elements/hit/elements/Assigned.d.ts

@@ -0,0 +1,9 @@
+import type { Hit } from '@cccsaurora/howler-ui/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/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 '@cccsaurora/howler-ui/commons/components/app/hooks';
+import HowlerAvatar from '@cccsaurora/howler-ui/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/components/elements/hit/elements/EscalationChip.d.ts

@@ -0,0 +1,9 @@
+import type { Hit } from '@cccsaurora/howler-ui/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/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 '@cccsaurora/howler-ui/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/components/elements/hit/elements/HitTimestamp.d.ts

@@ -0,0 +1,8 @@
+import type { Hit } from '@cccsaurora/howler-ui/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/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 '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import dayjs from 'dayjs';
+import { useContext, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { formatDate } from '@cccsaurora/howler-ui/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(() => dayjs().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 dayjs(earliest).isBefore(current) ? earliest : current;
+        });
+        return earliestDate;
+    }, [hit]);
+    const color = useMemo(() => {
+        if (dayjs(timestamp).isBefore(threshold.clone().add(2, 'weeks'))) {
+            return 'error';
+        }
+        if (dayjs(timestamp).isBefore(threshold.clone().add(1, 'months'))) {
+            return 'warning';
+        }
+        return 'default';
+    }, [threshold, timestamp]);
+    const duration = useMemo(() => {
+        if (dayjs(timestamp).isBefore(threshold)) {
+            return t('retention.imminent');
+        }
+        const diff = dayjs(timestamp).diff(threshold, 'seconds');
+        const _duration = dayjs.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/components/elements/hit/outlines/DefaultOutline.d.ts

@@ -0,0 +1,12 @@
+import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+import type { Template } from '@cccsaurora/howler-ui/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/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 '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import PluginTypography from '@cccsaurora/howler-ui/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, field: field, children: displayedData })] }, field));
+            })] }));
+};
+export default memo(DefaultOutline);

package/components/elements/hit/outlines/al/AssemblyLineRules.d.ts

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

package/components/elements/hit/outlines/al/AssemblyLineRules.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Lock } from '@mui/icons-material';
+import { Chip, Grid, Stack, Tooltip, Typography } from '@mui/material';
+import { get } from 'lodash-es';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+const TAGS = [
+    'assemblyline.antivirus',
+    'assemblyline.behaviour',
+    'assemblyline.heuristic',
+    'assemblyline.yara',
+    'assemblyline.attribution',
+    'assemblyline.mitre.tactic',
+    'assemblyline.mitre.technique'
+];
+const VERDICT_COLORS = {
+    malicious: 'error',
+    suspicious: 'warning',
+    info: 'info',
+    safe: 'primary'
+};
+const VERDICT_ORDER = ['malicious', 'suspicious', 'safe', 'info'];
+const ARRAY_LIMIT = 10;
+const sortByVerdict = (a, b) => {
+    return VERDICT_ORDER.indexOf(a.verdict) > VERDICT_ORDER.indexOf(b.verdict)
+        ? 1
+        : VERDICT_ORDER.indexOf(b.verdict) > VERDICT_ORDER.indexOf(a.verdict)
+            ? -1
+            : 0;
+};
+const AssemblyLineRules = ({ hit }) => {
+    const { t } = useTranslation();
+    const ipArr = (hit.related.ip ?? []).filter(e => !!e).slice(0, ARRAY_LIMIT);
+    const tagsArr = TAGS.map(each => get(hit, each))
+        .filter(tag => !!tag?.value)
+        .sort(sortByVerdict)
+        .slice(0, ARRAY_LIMIT);
+    return (_jsxs(Grid, { container: true, direction: "row", justifyContent: "center", sx: { position: 'relative' }, children: [_jsx(Tooltip, { title: t('route.templates.builtin'), children: _jsx(Lock, { fontSize: "small", sx: { position: 'absolute', right: 0, top: 0 } }) }), _jsx(Grid, { item: true, xs: 2, children: _jsxs(Typography, { variant: "caption", fontWeight: "bold", children: [t('outline.assemblyline.file_path'), ":"] }) }), _jsx(Grid, { item: true, xs: 10, children: _jsx(Typography, { variant: "caption", children: hit.file.path ?? t('unknown') }) }), _jsx(Grid, { item: true, xs: 2, children: _jsxs(Typography, { variant: "caption", fontWeight: "bold", children: [t('outline.assemblyline.last_modified'), ":"] }) }), _jsx(Grid, { item: true, xs: 10, children: _jsxs(Typography, { variant: "caption", children: [hit.cbs?.sharepoint?.modified?.user ?? t('unknown'), " ", t('using'), ' ', hit.cbs?.sharepoint?.modified?.application ?? t('unknown'), " ", t('on'), " ", hit.file?.mtime ?? t('unknown')] }) }), _jsx(Grid, { item: true, xs: 2, children: _jsxs(Typography, { variant: "caption", fontWeight: "bold", children: [t('outline.assemblyline.beacons'), ":"] }) }), _jsx(Grid, { item: true, xs: 10, children: _jsxs(Stack, { direction: "row", spacing: 0.5, sx: { mb: 0.5 }, children: [ipArr.map(analytic => {
+                            return (_jsx(Grid, { item: true, children: _jsx(Chip, { label: analytic, variant: "outlined", size: "small" }) }, analytic));
+                        }), ipArr.length < 1 && (_jsx(Grid, { item: true, children: _jsx(Chip, { label: t('none'), variant: "outlined", size: "small" }) }))] }) }), _jsx(Grid, { item: true, xs: 2, children: _jsxs(Typography, { variant: "caption", fontWeight: "bold", children: [t('outline.assemblyline.tags'), ":"] }) }), _jsx(Grid, { item: true, xs: 10, children: _jsxs(Stack, { direction: "row", spacing: 0.5, sx: { mb: 0.5 }, children: [tagsArr.map(analytic => {
+                            return (_jsx(Grid, { item: true, children: _jsx(Chip, { label: analytic?.value, color: analytic?.verdict in VERDICT_COLORS
+                                        ? VERDICT_COLORS[analytic?.verdict]
+                                        : 'error', variant: "outlined", size: "small" }) }, analytic?.value + analytic?.verdict + analytic?.type + analytic?.subtype));
+                        }), tagsArr.length < 1 && (_jsx(Grid, { item: true, children: _jsx(Chip, { label: t('none'), variant: "outlined", size: "small" }) }))] }) })] }));
+};
+export default memo(AssemblyLineRules);

package/components/elements/hit/related/PivotLink.d.ts

@@ -0,0 +1,10 @@
+import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+import type { Pivot } from '@cccsaurora/howler-ui/models/entities/generated/Pivot';
+import { type FC } from 'react';
+export interface PivotLinkProps {
+    pivot: Pivot;
+    hit: Hit;
+    compact?: boolean;
+}
+declare const PivotLink: FC<PivotLinkProps>;
+export default PivotLink;

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

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Skeleton } from '@mui/material';
+import Handlebars from 'handlebars';
+import { isEmpty } from 'lodash-es';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { usePluginStore } from 'react-pluggable';
+import { flattenDeep } from '@cccsaurora/howler-ui/utils/utils';
+import RelatedLink from './RelatedLink';
+const PivotLink = ({ pivot, hit, compact = false }) => {
+    const { i18n } = useTranslation();
+    const pluginStore = usePluginStore();
+    const flatHit = useMemo(() => flattenDeep(hit ?? {}), [hit]);
+    const href = useMemo(() => {
+        if (!pivot || pivot.format !== 'link' || !flatHit || isEmpty(flatHit)) {
+            return '';
+        }
+        const templateObject = Object.fromEntries(pivot.mappings.map(mapping => {
+            const result = [mapping.key];
+            if (mapping.field === 'custom') {
+                result.push(mapping.custom_value);
+            }
+            else if (Array.isArray(flatHit[mapping.field])) {
+                result.push(flatHit[mapping.field][0]);
+            }
+            else {
+                result.push(flatHit[mapping.field]);
+            }
+            return result;
+        }));
+        return Handlebars.compile(pivot.value)(templateObject);
+    }, [flatHit, pivot]);
+    if (href) {
+        return _jsx(RelatedLink, { title: pivot.label[i18n.language], href: href, compact: compact, icon: pivot.icon });
+    }
+    try {
+        const pluginPivot = pluginStore.executeFunction(`pivot.${pivot.format}`, { pivot, hit, compact });
+        if (pluginPivot) {
+            return pluginPivot;
+        }
+    }
+    catch (e) {
+        // eslint-disable-next-line no-console
+        console.warn(`Pivot plugin for format ${pivot.format} does not exist, not rendering`);
+        return null;
+    }
+    return _jsx(Skeleton, { variant: "rounded" });
+};
+export default PivotLink;

package/components/elements/hit/related/RelatedIcon.d.ts

@@ -0,0 +1,8 @@
+import { type FC } from 'react';
+declare const RelatedIcon: FC<{
+    icon?: string;
+    title?: string;
+    href?: string;
+    compact?: boolean;
+}>;
+export default RelatedIcon;

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

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Icon, iconExists } from '@iconify/react/dist/iconify.js';
+import Avatar from '@mui/material/Avatar';
+import { useAppTheme } from '@cccsaurora/howler-ui/commons/components/app/hooks';
+import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import { useContext } from 'react';
+const RelatedIcon = ({ icon, title, href, compact = false }) => {
+    const { config } = useContext(ApiConfigContext);
+    const { isDark } = useAppTheme();
+    if (!icon) {
+        return null;
+    }
+    if (iconExists(icon)) {
+        return _jsx(Icon, { fontSize: "1.5rem", icon: icon });
+    }
+    const app = config.configuration.ui.apps.find(a => a.name.toLowerCase() === icon?.toLowerCase());
+    if (app) {
+        // use the image link for the configured related application instead
+        icon = app[`img_${isDark ? 'd' : 'l'}`];
+    }
+    return (_jsx(Avatar, { variant: "rounded", alt: title ?? href, src: icon, sx: [
+            theme => ({
+                width: theme.spacing(compact ? 4 : 6),
+                height: theme.spacing(compact ? 4 : 6),
+                '& img': {
+                    objectFit: 'contain'
+                }
+            }),
+            !icon && { backgroundColor: 'transparent' }
+        ], children: icon }));
+};
+export default RelatedIcon;

package/components/elements/hit/related/RelatedLink.d.ts

@@ -0,0 +1,8 @@
+import React, { type PropsWithChildren } from 'react';
+declare const RelatedLink: React.FC<PropsWithChildren<{
+    icon?: string;
+    title?: string;
+    href?: string;
+    compact?: boolean;
+}>>;
+export default RelatedLink;

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

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Stack, Typography } from '@mui/material';
+import HowlerCard from '@cccsaurora/howler-ui/components/elements/display/HowlerCard';
+import React, {} from 'react';
+import { Link } from 'react-router-dom';
+import RelatedIcon from './RelatedIcon';
+const RelatedLink = ({ icon, title, href, compact = false, children }) => {
+    return (_jsx(HowlerCard, { variant: compact ? 'outlined' : 'elevation', onClick: () => window.open(href), sx: [
+            theme => ({
+                cursor: 'pointer',
+                backgroundColor: 'transparent',
+                transition: theme.transitions.create(['border-color']),
+                '&:hover': { borderColor: 'primary.main', '& a': { textDecoration: 'underline' } },
+                '& > div': {
+                    height: '100%'
+                },
+                '& a': { textDecoration: 'none', color: 'text.primary' }
+            }),
+            !compact && { border: 'thin solid', borderColor: 'transparent' }
+        ], children: _jsxs(Stack, { direction: "row", p: compact ? 0.5 : 1, spacing: 1, alignItems: "center", children: [children || _jsx(RelatedIcon, { icon: icon, title: title, href: href, compact: compact }), _jsx(Typography, { component: Link, to: href, onClick: e => e.stopPropagation(), children: title ?? href })] }) }, href));
+};
+export default RelatedLink;

package/components/elements/view/ViewTitle.d.ts

@@ -0,0 +1,10 @@
+import { type FC } from 'react';
+interface ViewTitleProps {
+    title?: string;
+    type?: string;
+    query?: string;
+    sort?: string;
+    span?: string;
+}
+export declare const ViewTitle: FC<ViewTitleProps>;
+export {};