@cccsaurora/howler-ui 3.1.0-dev.1424 → 3.1.0-dev.1437

package/components/elements/hit/HitOutline.js

@@ -1,42 +1,87 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Divider, Typography } from '@mui/material';
+import { ContentPaste, FilterList, Info, Language, Lock, Person } from '@mui/icons-material';
+import { IconButton, Stack, Tooltip, Typography, useTheme } from '@mui/material';
 import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
+import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
 import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
-import { isNil } from 'lodash-es';
-import { createElement, memo, useEffect, useMemo, useState } from 'react';
+import get from 'lodash-es/get';
+import isNil from 'lodash-es/isNil';
+import isObject from 'lodash-es/isObject';
+import { memo, useContext, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
+import { Link } from 'react-router-dom';
+import { useContextSelector } from 'use-context-selector';
+import { PROVIDER_COLORS, StorageKey } from '@cccsaurora/howler-ui/utils/constants';
+import { stringToColor } from '@cccsaurora/howler-ui/utils/utils';
+import PluginTypography from '../PluginTypography';
 import { HitLayout } from './HitLayout';
-import DefaultOutline from './outlines/DefaultOutline';
 export const DEFAULT_FIELDS = ['event.created', 'howler.id', 'howler.hash'];
-const HitOutline = ({ hit, layout, lazy = false, forceAllFields = false }) => {
+const EditIcon = ({ label, icon: Icon, link }) => (_jsx(Tooltip, { title: label, children: _jsx(IconButton, { size: "small", component: Link, to: link, "aria-label": label, children: _jsx(Icon, { sx: { height: '16px !important', width: '16px !important' } }) }) }));
+const HitOutline = ({ hit, layout, lazy = false, forceAllFields = false, template: providedTemplate = null }) => {
+    const theme = useTheme();
     const { t } = useTranslation();
+    const { config } = useContext(ApiConfigContext);
+    const addFilter = useContextSelector(ParameterContext, ctx => ctx?.addFilter);
     const { getMatchingTemplate } = useMatchers(lazy);
     const [templateFieldCount] = useMyLocalStorageItem(StorageKey.TEMPLATE_FIELD_COUNT, null);
     const [template, setTemplate] = useState(null);
-    useEffect(() => {
-        void getMatchingTemplate(hit).then(setTemplate);
-    }, [getMatchingTemplate, hit]);
-    const outline = useMemo(() => {
-        if (template) {
-            return createElement(DefaultOutline, {
-                hit,
-                layout,
-                template,
-                fields: !isNil(templateFieldCount) && !forceAllFields
-                    ? [...template.keys].slice(0, templateFieldCount)
-                    : template.keys,
-                readonly: template.type === 'readonly'
-            });
+    const providerColor = useMemo(() => {
+        if (!hit?.event.provider) {
+            return PROVIDER_COLORS.unknown;
+        }
+        return PROVIDER_COLORS[hit?.event.provider] ?? stringToColor(hit?.event.provider);
+    }, [hit?.event.provider]);
+    const fields = useMemo(() => {
+        const keys = template?.keys;
+        if (!keys?.length) {
+            return DEFAULT_FIELDS;
+        }
+        if (!isNil(templateFieldCount) && !forceAllFields) {
+            return keys.slice(0, templateFieldCount);
         }
-        else {
-            return createElement(DefaultOutline, {
-                hit,
-                layout,
-                fields: DEFAULT_FIELDS
-            });
+        return keys;
+    }, [template, templateFieldCount, forceAllFields]);
+    const editUrl = useMemo(() => {
+        const params = {
+            analytic: hit.howler.analytic,
+            type: template?.type ?? 'personal'
+        };
+        if (template?.detection) {
+            params.detection = template.detection;
         }
-    }, [forceAllFields, hit, layout, template, templateFieldCount]);
-    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] }));
+        else if (!template && hit.howler.detection) {
+            params.detection = hit.howler.detection;
+        }
+        return '/templates/view?' + new URLSearchParams(params).toString();
+    }, [template, hit]);
+    useEffect(() => {
+        void getMatchingTemplate(hit, providedTemplate).then(setTemplate);
+    }, [getMatchingTemplate, hit, providedTemplate]);
+    if (fields.length < 1) {
+        return null;
+    }
+    return (_jsxs(Stack, { sx: { my: 1, borderLeft: `5px solid ${providerColor}`, pl: 1, alignItems: 'stretch' }, children: [_jsxs(Stack, { direction: "row", spacing: 0.5, alignItems: "center", children: [_jsx(Typography, { variant: "body2", fontWeight: "bold", children: t('hit.details.title') }), template?.type === 'readonly' ? (_jsx(EditIcon, { label: t('route.templates.builtin'), icon: Lock, link: editUrl })) : !template ? (_jsx(EditIcon, { label: t('route.templates.default'), icon: Info, link: editUrl })) : template.type === 'global' ? (_jsx(EditIcon, { label: t('route.templates.global'), icon: Language, link: editUrl })) : (_jsx(EditIcon, { label: t('route.templates.personal'), icon: Person, link: editUrl }))] }), (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(Stack, { direction: "row", spacing: 1, sx: {
+                        '& .copy': { opacity: 0, cursor: 'pointer', transition: theme.transitions.create('opacity') },
+                        '&:hover .copy': { opacity: 1 },
+                        position: 'relative',
+                        pr: '75px'
+                    }, 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: { wordBreak: 'break-all' }, value: displayedData, field: field, obj: hit, children: displayedData }), _jsxs(Stack, { spacing: 0.25, direction: "row", sx: { position: 'absolute', right: 0, top: '50%', transform: 'translateY(-50%)' }, children: [_jsx(Tooltip, { title: t('hit.outline.copy'), children: _jsx(IconButton, { className: "copy", size: "small", onClick: e => {
+                                            e.preventDefault();
+                                            e.stopPropagation();
+                                            void navigator.clipboard.writeText(displayedData);
+                                        }, children: _jsx(ContentPaste, { fontSize: "small" }) }) }), addFilter && (_jsx(Tooltip, { title: t('hit.outline.add_filter'), children: _jsx(IconButton, { className: "copy", size: "small", onClick: e => {
+                                            e.preventDefault();
+                                            e.stopPropagation();
+                                            addFilter(`${field}:"${displayedData}"`);
+                                        }, children: _jsx(FilterList, { fontSize: "small" }) }) }))] })] }, field));
+            })] }));
 };
 export default memo(HitOutline);

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

@@ -0,0 +1 @@
+export {};

package/components/elements/hit/HitOutline.test.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { BrowserRouter } from 'react-router-dom';
+import { describe, expect, it, vi } from 'vitest';
+import { HitLayout } from './HitLayout';
+import HitOutline from './HitOutline';
+const addFilter = vi.fn();
+const getMatchingTemplate = vi.fn((_hit, template) => Promise.resolve(template));
+vi.mock('components/app/hooks/useMatchers', () => ({
+    default: () => ({ getMatchingTemplate })
+}));
+vi.mock('components/app/providers/ApiConfigProvider', async () => {
+    const { createContext } = await import('react');
+    return {
+        ApiConfigContext: createContext({ config: { indexes: { hit: {} } } })
+    };
+});
+vi.mock('components/app/providers/ParameterProvider', () => ({
+    ParameterContext: {}
+}));
+vi.mock('components/hooks/useMyLocalStorage', () => ({
+    useMyLocalStorageItem: () => [null]
+}));
+vi.mock('components/elements/PluginTypography', () => ({
+    default: ({ children }) => _jsx("span", { children: children })
+}));
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({ t: (key) => key })
+}));
+vi.mock('use-context-selector', () => ({
+    useContextSelector: (_context, selector) => selector({ addFilter })
+}));
+vi.mock('utils/constants', () => ({
+    PROVIDER_COLORS: { unknown: '#000000' },
+    StorageKey: { TEMPLATE_FIELD_COUNT: 'template-field-count' }
+}));
+vi.mock('utils/utils', () => ({
+    stringToColor: () => '#ffffff'
+}));
+describe('HitOutline', () => {
+    it('renders supplied template fields and adds a filter for the selected value', async () => {
+        const user = userEvent.setup();
+        const hit = {
+            event: { provider: 'endpoint' },
+            howler: { id: 'hit-1', analytic: 'analytic-1', detection: 'hit-detection' },
+            details: { values: ['first', 'second'] }
+        };
+        const template = {
+            keys: ['event.provider', 'details.values'],
+            type: 'global',
+            detection: 'template-detection'
+        };
+        render(_jsx(BrowserRouter, { children: _jsx(HitOutline, { hit: hit, layout: HitLayout.NORMAL, template: template }) }));
+        expect(await screen.findByText('event.provider:')).toBeInTheDocument();
+        expect(screen.getByText('endpoint')).toBeInTheDocument();
+        expect(screen.getByText('details.values:')).toBeInTheDocument();
+        expect(screen.getByText('first, second')).toBeInTheDocument();
+        expect(screen.getByRole('link')).toHaveAttribute('href', '/templates/view?analytic=analytic-1&type=global&detection=template-detection');
+        await user.click(screen.getAllByLabelText('hit.outline.add_filter')[0]);
+        expect(addFilter).toHaveBeenCalledWith('event.provider:"endpoint"');
+    });
+});

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Typography } from '@mui/material';
+import { Link as LinkIcon } from '@mui/icons-material';
+import { IconButton, Stack, Typography } from '@mui/material';
 import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
 import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
@@ -13,10 +14,10 @@ const AnalyticLink = ({ hit, lazy = false, compressed, alignSelf = 'start' }) =>
         void getMatchingAnalytic(hit).then(analytic => setAnalyticId(analytic?.analytic_id));
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [hit?.howler.analytic]);
-    return (_jsxs(Typography, { variant: compressed ? 'body1' : 'h6', fontWeight: compressed && 'bold', sx: { alignSelf, '& a': { color: 'text.primary' } }, children: [analyticId ? (_jsx(Link, { to: `/analytics/${analyticId}`, target: "_blank", rel: "noopener noreferrer", onAuxClick: e => {
+    return (_jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.5, children: [_jsx(IconButton, { size: "small", component: Link, onAuxClick: e => {
                     e.stopPropagation();
                 }, onClick: e => {
                     e.stopPropagation();
-                }, children: hit.howler.analytic })) : (hit.howler.analytic), hit.howler.detection && ': ', hit.howler.detection] }));
+                }, disabled: !analyticId, to: `/analytics/${analyticId}`, target: "_blank", rel: "noopener noreferrer", children: _jsx(LinkIcon, { fontSize: "small" }) }), _jsxs(Typography, { variant: compressed ? 'body1' : 'h6', fontWeight: compressed && 'bold', sx: { alignSelf, '& a': { color: 'text.primary' } }, children: [hit.howler.analytic, hit.howler.detection && ' > ', hit.howler.detection] })] }));
 };
 export default AnalyticLink;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { BrowserRouter } from 'react-router-dom';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import AnalyticLink from './AnalyticLink';
+const getMatchingAnalytic = vi.hoisted(() => vi.fn());
+vi.mock('components/app/hooks/useMatchers', () => ({
+    default: () => ({ getMatchingAnalytic })
+}));
+describe('AnalyticLink', () => {
+    beforeEach(() => {
+        getMatchingAnalytic.mockResolvedValue({ analytic_id: 'analytic-id' });
+    });
+    it('renders an isolated link button when the analytic is resolved', async () => {
+        const user = userEvent.setup();
+        const onClick = vi.fn();
+        const hit = { howler: { analytic: 'Analytic Name', detection: 'Detection Name' } };
+        render(_jsx(BrowserRouter, { children: _jsx("div", { onClick: onClick, children: _jsx(AnalyticLink, { hit: hit }) }) }));
+        const link = await screen.findByRole('link');
+        expect(link).toHaveAttribute('href', '/analytics/analytic-id');
+        expect(screen.getByRole('heading')).toHaveTextContent('Analytic Name > Detection Name');
+        await user.click(link);
+        expect(onClick).not.toHaveBeenCalled();
+    });
+});

package/components/routes/help/TemplateDocumentation.js

@@ -3,7 +3,7 @@ import { Card, CardContent, Stack } from '@mui/material';
 import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
 import Markdown from '@cccsaurora/howler-ui/components/elements/display/Markdown';
 import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
-import DefaultOutline from '@cccsaurora/howler-ui/components/elements/hit/outlines/DefaultOutline';
+import HitOutline from '@cccsaurora/howler-ui/components/elements/hit/HitOutline';
 import { useScrollRestoration } from '@cccsaurora/howler-ui/components/hooks/useScrollRestoration';
 import dayjs from 'dayjs';
 import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
@@ -13,6 +13,11 @@ import { usePluginStore } from 'react-pluggable';
 import { modifyDocumentation } from '@cccsaurora/howler-ui/utils/utils';
 import TEMPLATES_EN from './markdown/en/templates.md';
 import TEMPLATES_FR from './markdown/fr/templates.md';
+const TEMPLATE = {
+    analytic: 'Cat Checker',
+    owner: 'cat',
+    type: 'personal'
+};
 const ALERTS = [
     {
         howler: { id: 'hit1', analytic: 'Cat Checker', detection: 'Listening for Meows' },
@@ -43,8 +48,14 @@ const TemplateDocumentation = () => {
         ALERTS.forEach((alert, index) => {
             markdown = markdown.replace(`$ALERT_${index + 1}`, JSON.stringify(alert, null, 2));
         });
-        return modifyDocumentation(markdown.split('\n===SPLIT===\n'), howlerPluginStore, pluginStore);
+        return markdown
+            .split('\n===SPLIT===\n')
+            .map(section => modifyDocumentation(section, howlerPluginStore, pluginStore));
     }, [i18n.language, pluginStore]);
-    return (_jsxs(PageCenter, { margin: 4, width: "100%", textAlign: "left", children: [_jsx(Markdown, { md: md1 }), _jsx(Stack, { spacing: 1, children: ALERTS.map(alert => (_jsx(Card, { variant: "outlined", children: _jsx(CardContent, { children: _jsx(DefaultOutline, { hit: alert, fields: Object.keys(alert).flatMap(key => Object.keys(alert[key]).map(key2 => [key, key2].join('.'))), layout: HitLayout.NORMAL, readonly: true }) }) }, alert.howler.id))) }), _jsx(Markdown, { md: md2 })] }));
+    return (_jsxs(PageCenter, { margin: 4, width: "100%", textAlign: "left", children: [_jsx(Markdown, { md: md1 }), _jsx(Stack, { spacing: 1, children: ALERTS.map(alert => (_jsx(Card, { variant: "outlined", children: _jsx(CardContent, { children: _jsx(HitOutline, { hit: alert, template: {
+                                ...TEMPLATE,
+                                detection: alert.howler.detection,
+                                keys: Object.keys(alert['event']).map(key => `event.${key}`)
+                            }, layout: HitLayout.NORMAL, forceAllFields: true }) }) }, alert.howler.id))) }), _jsx(Markdown, { md: md2 })] }));
 };
 export default TemplateDocumentation;

package/components/routes/help/markdown/en/templates.md.js

@@ -1 +1 @@
-export default "# Howler Templates\n\nHowler is, fundamentally, an application that allows analysts to triage hits and alerts. In order to make sure analysts can do this as efficiently as possible, we want to have the ability to present relevant data for a given alert to analysts in an easy, understandable way.\n\nTo this end, Howler allows analysts and detection engineers to create **templates**, which allow various analytics and their detections to present fields and data relevant to triaging alerts generated by that analytic/detection. For example, let's consider two different alerts, by two different detections:\n\n```json\n$ALERT_1\n```\n\n```json\n$ALERT_2\n```\n\nNote that while both share some similar fields, they also differ. We want each of these alert cards to present different data - for that, we can use templates. This allows us to show both hits in the same list, but with differing fields displayed:\n\n===SPLIT===\n\nAs we can see, by specifying a template for each of the detections, different data will be presented to the analyst. To do so, you can use the template creator [here]($CURRENT_URL/templates/view?type=personal).\n\n```alert\nNote that you must have ingested some hits for the given analytic/detection pair for it to show as an option in the template creation UI!\n```\n"
+export default "# Howler Templates\n\nHowler is, fundamentally, an application that allows analysts to triage hits and alerts. In order to make sure analysts can do this as efficiently as possible, we want to have the ability to present relevant data for a given alert to analysts in an easy, understandable way.\n\nTo this end, Howler allows analysts and detection engineers to create **templates**, which allow various analytics and their detections to present fields and data relevant to triaging alerts generated by that analytic/detection. For example, let's consider two different alerts, by two different detections:\n\n```json[hideSearch=true]\n$ALERT_1\n```\n\n---\n\n```json[hideSearch=true]\n$ALERT_2\n```\n\nNote that while both share some similar fields, they also differ. We want each of these alert cards to present different data - for that, we can use templates. This allows us to show both hits in the same list, but with differing fields displayed:\n\n===SPLIT===\n\nAs we can see, by specifying a template for each of the detections, different data will be presented to the analyst. To do so, you can use the template creator [here]($CURRENT_URL/templates/view?type=personal).\n\n```alert\nNote that you must have ingested some hits for the given analytic/detection pair for it to show as an option in the template creation UI!\n```\n"

package/locales/en/translation.json

@@ -212,6 +212,8 @@
     "hit.notebook.select": "Please Select a notebook",
     "hit.notebook.tooltip": "Open in Jupyterhub",
     "hit.open": "Open Hit",
+    "hit.outline.add_filter": "Add filter",
+    "hit.outline.copy": "Copy value",
     "hit.overview.missing": "No overview has been created for this hit. In order to create an overview, press the add button to the right.",
     "hit.panel.aggregation.run": "Create Summary",
     "hit.panel.bundles.open": "Parent Bundles",

package/locales/fr/translation.json

@@ -212,6 +212,8 @@
     "hit.notebook.select": "Veuillez sélectionner un notebook",
     "hit.notebook.tooltip": "Ouvrir dans Jupyterhub",
     "hit.open": "Ouvrir hit",
+    "hit.outline.add_filter": "Ajouter un filtre",
+    "hit.outline.copy": "Copier la valeur",
     "hit.overview.missing": "Aucune vue d'ensemble n'a été créée pour ce hit. Pour créer une vue d'ensemble, cliquez sur le bouton pour ajouter à droite.",
     "hit.panel.aggregation.run": "Créer un sommaire",
     "hit.panel.bundles.open": "Groupes parentaux",