@cccsaurora/howler-ui 2.13.0-dev.163 → 2.13.0-dev.169

package/components/elements/display/json/JSONViewer.d.ts

@@ -2,5 +2,7 @@ import { type FC } from 'react';
 declare const JSONViewer: FC<{
     data: object;
     collapse?: boolean;
+    hideSearch?: boolean;
+    filter?: string;
 }>;
 export default JSONViewer;

package/components/elements/display/json/JSONViewer.js

@@ -8,10 +8,11 @@ import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/us
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
+import { validateRegex } from '@cccsaurora/howler-ui/utils/stringUtils';
 import Throttler from '@cccsaurora/howler-ui/utils/Throttler';
 import { removeEmpty, searchObject } from '@cccsaurora/howler-ui/utils/utils';
 const THROTTLER = new Throttler(150);
-const JSONViewer = ({ data, collapse = true }) => {
+const JSONViewer = ({ data, collapse = true, hideSearch = false, filter }) => {
     const { t } = useTranslation();
     const { isDark } = useAppTheme();
     const [compact] = useMyLocalStorageItem(StorageKey.COMPACT_JSON, true);
@@ -21,19 +22,11 @@ const JSONViewer = ({ data, collapse = true }) => {
     useEffect(() => {
         THROTTLER.debounce(() => {
             const filteredData = removeEmpty(data, compact);
-            const searchedData = searchObject(filteredData, query, flat);
+            const searchedData = searchObject(filteredData, filter ?? query, flat);
             setResult(searchedData);
         });
-    }, [compact, data, flat, query]);
-    const hasError = useMemo(() => {
-        try {
-            new RegExp(query);
-            return false;
-        }
-        catch (e) {
-            return true;
-        }
-    }, [query]);
+    }, [compact, data, filter, flat, query]);
+    const hasError = useMemo(() => !validateRegex(filter ?? query), [query, filter]);
     const shouldCollapse = useCallback((field) => {
         return (field.name !== 'root' && field.type !== 'object') || field.namespace.length > 3;
     }, []);
@@ -48,6 +41,6 @@ const JSONViewer = ({ data, collapse = true }) => {
             // Type declaration is wrong - this is a valid prop
             displayArrayKey: !compact
         } })), [collapse, compact, isDark, result, shouldCollapse]);
-    return data ? (_jsxs(Stack, { direction: "column", spacing: 1, sx: { '& > div:first-of-type': { mt: 1, mr: 0.5 } }, children: [_jsx(Phrase, { value: query, onChange: setQuery, error: hasError, label: t('json.viewer.search.label'), placeholder: t('json.viewer.search.prompt'), disabled: !result, endAdornment: _jsx(IconButton, { onClick: () => setQuery(''), children: _jsx(Clear, {}) }) }), renderer] })) : (_jsx(Skeleton, { width: "100%", height: "95%", variant: "rounded" }));
+    return data ? (_jsxs(Stack, { direction: "column", spacing: 1, sx: { '& > div:first-of-type': { mt: 1, mr: 0.5 } }, children: [!hideSearch && (_jsx(Phrase, { value: query, onChange: setQuery, error: hasError, label: t('json.viewer.search.label'), placeholder: t('json.viewer.search.prompt'), disabled: !result, endAdornment: _jsx(IconButton, { onClick: () => setQuery(''), children: _jsx(Clear, {}) }) })), renderer] })) : (_jsx(Skeleton, { width: "100%", height: "95%", variant: "rounded" }));
 };
 export default JSONViewer;

package/components/routes/advanced/QueryBuilder.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMonaco } from '@monaco-editor/react';
 import { OpenInNew, PlayArrowOutlined, SsidChart } from '@mui/icons-material';
 import { Alert, AlertTitle, Autocomplete, Box, Card, Checkbox, Chip, CircularProgress, FormControlLabel, IconButton, ListItemText, Slider, Stack, TextField, Tooltip, Typography, useMediaQuery, useTheme } from '@mui/material';
+import Popper, {} from '@mui/material/Popper';
 import api from '@cccsaurora/howler-ui/api';
 import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
 import { parseEvent } from '@cccsaurora/howler-ui/commons/components/utils/keyboard';
@@ -61,6 +62,10 @@ falsepositives:
 level: informational
 `
 };
+const LUCENE_QUERY_OPTIONS = ['default', 'facet', 'groupby'];
+const CustomPopper = (props) => {
+    return _jsx(Popper, { ...props, style: { width: 'fit-content' }, placement: "bottom-start" });
+};
 const QueryBuilder = () => {
     const { t } = useTranslation();
     const theme = useTheme();
@@ -73,6 +78,8 @@ const QueryBuilder = () => {
     const [type, setType] = useState('lucene');
     const [loading, setLoading] = useState(false);
     const [query, setQuery] = useState(DEFAULT_VALUES.lucene);
+    const [queryType, setQueryType] = useState(LUCENE_QUERY_OPTIONS[0]);
+    const [groupByField, setGroupByField] = useState(null);
     const [allFields, setAllFields] = useState(true);
     const [fields, setFields] = useState(['howler.id']);
     const [response, setResponse] = useState(null);
@@ -90,10 +97,25 @@ const QueryBuilder = () => {
             };
             let result;
             if (type === 'lucene') {
-                result = await api.search.hit.post({
-                    query: sanitizeMultilineLucene(query),
-                    ...searchProperties
-                });
+                if (queryType === 'facet') {
+                    result = await api.search.facet.hit.post({
+                        query: sanitizeMultilineLucene(query),
+                        rows: STEPS[rows],
+                        fields
+                    });
+                }
+                else if (queryType === 'groupby') {
+                    result = await api.search.grouped.hit.post(groupByField, {
+                        query: sanitizeMultilineLucene(query),
+                        ...searchProperties
+                    });
+                }
+                else {
+                    result = await api.search.hit.post({
+                        query: sanitizeMultilineLucene(query),
+                        ...searchProperties
+                    });
+                }
             }
             else if (type === 'eql') {
                 result = await api.search.hit.eql.post({
@@ -116,7 +138,7 @@ const QueryBuilder = () => {
         finally {
             setLoading(false);
         }
-    }, [allFields, fields, query, rows, type]);
+    }, [allFields, fields, groupByField, query, queryType, rows, type]);
     const onKeyDown = useCallback(event => {
         const parsedEvent = parseEvent(event);
         if (parsedEvent.isCtrl && parsedEvent.isEnter) {
@@ -146,6 +168,12 @@ const QueryBuilder = () => {
             maxHeight: '85vh'
         }));
     }, [query, response, showModal, showWarningMessage, t, type]);
+    const searchDisabled = useMemo(() => type === 'lucene' && queryType === 'groupby' && !groupByField, [groupByField, queryType, type]);
+    useEffect(() => {
+        if (type !== 'lucene' && queryType !== 'default') {
+            setQueryType('default');
+        }
+    }, [queryType, type]);
     useEffect(() => {
         if (!monaco) {
             return;
@@ -190,13 +218,21 @@ const QueryBuilder = () => {
                             display: 'flex',
                             alignSelf: 'stretch'
                         }
-                    }, children: [smallButtons ? (_jsx(Tooltip, { title: t('route.actions.execute'), children: _jsx(IconButton, { size: "small", sx: { alignSelf: 'start' }, color: "success", onClick: execute, children: loading ? _jsx(CircularProgress, { size: 18, color: "success" }) : _jsx(PlayArrowOutlined, { color: "success" }) }) })) : (_jsx(CustomButton, { size: "small", variant: "outlined", startIcon: loading ? (_jsx(CircularProgress, { size: 18, color: "success" })) : (_jsx(PlayArrowOutlined, { color: "success", sx: { '& path': { stroke: 'currentcolor', strokeWidth: '1px' } } })), color: "success", onClick: execute, children: t('route.actions.execute') })), _jsxs(Stack, { direction: compactLayout ? 'column' : 'row', spacing: 1, children: [_jsx(Autocomplete, { value: type, onChange: (__, value) => setType(value), options: QUERY_TYPES, getOptionLabel: option => t(`route.advanced.query.${option}`), renderOption: (props, option) => (_jsx(ListItemText, { ...props, sx: { flexDirection: 'column', alignItems: 'start !important' }, primary: t(`route.advanced.query.${option}`), secondary: t(`route.advanced.query.${option}.description`) })), renderInput: params => (_jsx(TextField, { ...params, size: "small", label: t('route.advanced.type'), sx: { minWidth: '250px' } })), sx: [
+                    }, children: [smallButtons ? (_jsx(Tooltip, { title: t('route.actions.execute'), children: _jsx(IconButton, { size: "small", sx: { alignSelf: 'start' }, color: "success", onClick: execute, disabled: searchDisabled, children: loading ? (_jsx(CircularProgress, { size: 18, color: "success" })) : (_jsx(PlayArrowOutlined, { color: searchDisabled ? 'disabled' : 'success' })) }) })) : (_jsx(CustomButton, { size: "small", variant: "outlined", startIcon: loading ? (_jsx(CircularProgress, { size: 18, color: "success" })) : (_jsx(PlayArrowOutlined, { color: searchDisabled ? 'disabled' : 'success', sx: { '& path': { stroke: 'currentcolor', strokeWidth: '1px' } } })), color: "success", onClick: execute, disabled: searchDisabled, children: t('route.actions.execute') })), _jsxs(Stack, { direction: compactLayout ? 'column' : 'row', spacing: 1, children: [_jsx(Autocomplete, { value: type, onChange: (__, value) => setType(value), options: QUERY_TYPES, getOptionLabel: option => t(`route.advanced.query.${option}`), renderOption: (props, option) => (_jsx(ListItemText, { ...props, sx: { flexDirection: 'column', alignItems: 'start !important' }, primary: t(`route.advanced.query.${option}`), secondary: t(`route.advanced.query.${option}.description`) })), renderInput: params => (_jsx(TextField, { ...params, size: "small", label: t('route.advanced.type'), sx: { minWidth: '250px' } })), sx: [
                                         !compactLayout && {
                                             height: '100%',
                                             '& .MuiFormControl-root': { height: '100%', '& > div': { height: '100%' } }
                                         }
-                                    ], slotProps: { paper: { sx: { minWidth: '600px' } } } }), _jsx(Card, { variant: "outlined", sx: { flex: 1, maxWidth: '350px', minWidth: '210px' }, children: _jsxs(Stack, { spacing: 0.5, sx: { px: 1, alignItems: 'start' }, children: [_jsxs(Typography, { variant: "caption", color: "text.secondary", sx: { whiteSpace: 'nowrap' }, children: [t('route.advanced.rows'), ": ", STEPS[rows]] }), _jsx(Slider, { size: "small", valueLabelDisplay: "off", value: rows, onChange: (_, value) => setRows(value), min: 0, max: 9, step: 1, marks: true, track: false, sx: { py: 0.5 } })] }) })] }), allFields ? (_jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: allFields, onChange: (__, checked) => setAllFields(checked) }), label: t('route.advanced.fields.all'), sx: { '& > span': { color: 'text.secondary' }, alignSelf: 'start' } })) : (_jsx(Autocomplete, { fullWidth: true, renderTags: values => values.length <= 3 ? (_jsx(Stack, { direction: "row", spacing: 0.5, children: values.map(_value => (_jsx(Chip, { size: "small", label: _value }, _value))) })) : (_jsx(Tooltip, { title: _jsx(Stack, { spacing: 1, children: values.map(_value => (_jsx("span", { children: _value }, _value))) }), children: _jsx(Chip, { size: "small", label: values.length }) })), multiple: true, size: "small", options: fieldOptions, value: fields, onChange: (__, values) => (values.length > 0 ? setFields(values) : setAllFields(true)), renderInput: params => _jsx(TextField, { ...params, label: t('route.advanced.fields') }), sx: { maxWidth: '500px', width: '20vw', minWidth: '200px', '& label': { zIndex: 1200 } }, onKeyDown: onKeyDown })), _jsx(FlexOne, {}), type === 'lucene' &&
-                            (smallButtons ? (_jsx(Tooltip, { title: t('route.advanced.open'), children: _jsx(IconButton, { color: "primary", sx: { alignSelf: 'center' }, component: Link, disabled: !response, to: `/hits?query=${sanitizeMultilineLucene(query).replaceAll('\n', ' ').trim()}`, children: _jsx(OpenInNew, { fontSize: "small" }) }) })) : (_jsx(CustomButton, { size: "small", variant: "outlined", startIcon: _jsx(OpenInNew, {}), component: Link, disabled: !response, ...{ to: `/hits?query=${sanitizeMultilineLucene(query).replaceAll('\n', ' ').trim()}` }, children: t('route.advanced.open') }))), smallButtons ? (_jsx(Tooltip, { title: response ? t('route.advanced.create.rule') : t('route.advanced.create.rule.disabled'), children: _jsx(IconButton, { size: "small", sx: { alignSelf: 'center' }, color: "info", onClick: onCreateRule, disabled: !response, children: _jsx(SsidChart, {}) }) })) : (_jsx(CustomButton, { size: "small", variant: "outlined", color: "info", startIcon: _jsx(SsidChart, {}), onClick: onCreateRule, disabled: !response, ...{ to: `/hits?query=${sanitizeMultilineLucene(query).replaceAll('\n', ' ').trim()}` }, tooltip: !response && t('route.advanced.create.rule.disabled'), children: t('route.advanced.create.rule') }))] }), _jsxs(Box, { width: "100%", height: "calc(100vh - 112px)", sx: { position: 'relative', overflow: 'hidden', borderTop: `thin solid ${theme.palette.divider}` }, children: [_jsx(Box, { sx: { position: 'absolute', top: 0, left: 0, bottom: 0, right: `calc(50% + 7px - ${x}px)`, pt: 1 }, children: _jsx(QueryEditor, { query: query, setQuery: setQuery, language: type }) }), _jsx(Box, { sx: {
+                                    ], slotProps: { paper: { sx: { minWidth: '600px' } } } }), _jsx(Card, { variant: "outlined", sx: { flex: 1, maxWidth: '350px', minWidth: '210px' }, children: _jsxs(Stack, { spacing: 0.5, sx: { px: 1, alignItems: 'start' }, children: [_jsxs(Typography, { variant: "caption", color: "text.secondary", sx: { whiteSpace: 'nowrap' }, children: [t('route.advanced.rows'), ": ", STEPS[rows]] }), _jsx(Slider, { size: "small", valueLabelDisplay: "off", value: rows, onChange: (_, value) => setRows(value), min: 0, max: 9, step: 1, marks: true, track: false, sx: { py: 0.5 } })] }) })] }), type === 'lucene' && (_jsx(Autocomplete, { size: "small", getOptionLabel: opt => t(`route.advanced.query.type.${opt}`), options: LUCENE_QUERY_OPTIONS, value: queryType, onChange: (_event, value) => setQueryType(value), renderInput: params => (_jsx(TextField, { ...params, label: t('route.advanced.query.type'), sx: { minWidth: '200px' } })) })), queryType === 'groupby' && (_jsx(Autocomplete, { size: "small", options: fieldOptions, value: groupByField, onChange: (__, value) => setGroupByField(value), renderInput: params => _jsx(TextField, { ...params, label: t('route.advanced.pivot.field') }), sx: { minWidth: '200px', '& label': { zIndex: 1200 } }, onKeyDown: onKeyDown, PopperComponent: CustomPopper })), allFields && queryType !== 'facet' ? (_jsx(FormControlLabel, { control: _jsx(Checkbox, { size: "small", checked: allFields, onChange: (__, checked) => setAllFields(checked) }), label: t('route.advanced.fields.all'), sx: { '& > span': { color: 'text.secondary' }, alignSelf: 'start' } })) : (_jsx(Autocomplete, { fullWidth: true, renderTags: values => values.length <= 3 ? (_jsx(Stack, { direction: "row", spacing: 0.5, children: values.map(_value => (_jsx(Chip, { size: "small", label: _value }, _value))) })) : (_jsx(Tooltip, { title: _jsx(Stack, { spacing: 1, children: values.map(_value => (_jsx("span", { children: _value }, _value))) }), children: _jsx(Chip, { size: "small", label: values.length }) })), multiple: true, size: "small", options: fieldOptions, value: fields, onChange: (__, values) => (values.length > 0 ? setFields(values) : setAllFields(true)), renderInput: params => _jsx(TextField, { ...params, label: t('route.advanced.fields') }), sx: { maxWidth: '500px', width: '20vw', minWidth: '200px', '& label': { zIndex: 1200 } }, onKeyDown: onKeyDown, PopperComponent: CustomPopper })), _jsx(FlexOne, {}), type === 'lucene' &&
+                            (smallButtons ? (_jsx(Tooltip, { title: t('route.advanced.open'), children: _jsx(IconButton, { color: "primary", sx: { alignSelf: 'center' }, component: Link, disabled: !response, to: `/hits?query=${sanitizeMultilineLucene(query).replaceAll('\n', ' ').trim()}`, children: _jsx(OpenInNew, { fontSize: "small" }) }) })) : (_jsx(CustomButton, { size: "small", variant: "outlined", startIcon: _jsx(OpenInNew, {}), component: Link, disabled: !response, ...{ to: `/hits?query=${sanitizeMultilineLucene(query).replaceAll('\n', ' ').trim()}` }, children: t('route.advanced.open') }))), smallButtons ? (_jsx(Tooltip, { title: response ? t('route.advanced.create.rule') : t('route.advanced.create.rule.disabled'), children: _jsx(IconButton, { size: "small", sx: { alignSelf: 'center' }, color: "info", onClick: onCreateRule, disabled: !response, children: _jsx(SsidChart, {}) }) })) : (_jsx(CustomButton, { size: "small", variant: "outlined", color: "info", startIcon: _jsx(SsidChart, {}), onClick: onCreateRule, disabled: !response, ...{ to: `/hits?query=${sanitizeMultilineLucene(query).replaceAll('\n', ' ').trim()}` }, tooltip: !response && t('route.advanced.create.rule.disabled'), children: t('route.advanced.create.rule') }))] }), _jsxs(Box, { width: "100%", height: "calc(100vh - 112px)", sx: { position: 'relative', overflow: 'hidden', borderTop: `thin solid ${theme.palette.divider}` }, children: [_jsx(Box, { sx: {
+                                position: 'absolute',
+                                top: 0,
+                                left: 0,
+                                bottom: 0,
+                                right: `calc(50% + 7px - ${x}px)`,
+                                pt: 1,
+                                display: 'flex'
+                            }, children: _jsx(QueryEditor, { query: query, setQuery: setQuery, language: type, height: "100%" }) }), _jsx(Box, { sx: {
                                 position: 'absolute',
                                 top: 0,
                                 bottom: 0,

package/components/routes/hits/search/InformationPane.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Clear, Code, Comment, DataObject, History, LinkSharp, OpenInNew, QueryStats } from '@mui/icons-material';
-import { Badge, Box, Divider, Skeleton, Stack, Tab, Tabs, Tooltip, useTheme } from '@mui/material';
+import { Badge, Box, Divider, IconButton, Skeleton, Stack, Tab, Tabs, Tooltip, useTheme } from '@mui/material';
 import TuiIconButton from '@cccsaurora/howler-ui/components/elements/addons/buttons/CustomIconButton';
 import { Icon } from '@iconify/react/dist/iconify.js';
 import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
@@ -11,6 +11,7 @@ import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/Fle
 import VSBox from '@cccsaurora/howler-ui/components/elements/addons/layout/vsbox/VSBox';
 import VSBoxContent from '@cccsaurora/howler-ui/components/elements/addons/layout/vsbox/VSBoxContent';
 import VSBoxHeader from '@cccsaurora/howler-ui/components/elements/addons/layout/vsbox/VSBoxHeader';
+import Phrase from '@cccsaurora/howler-ui/components/elements/addons/search/phrase/Phrase';
 import BundleButton from '@cccsaurora/howler-ui/components/elements/display/icons/BundleButton';
 import SocketBadge from '@cccsaurora/howler-ui/components/elements/display/icons/SocketBadge';
 import JSONViewer from '@cccsaurora/howler-ui/components/elements/display/json/JSONViewer';
@@ -38,6 +39,7 @@ import { usePluginStore } from 'react-pluggable';
 import { useLocation } from 'react-router-dom';
 import { useContextSelector } from 'use-context-selector';
 import { getUserList } from '@cccsaurora/howler-ui/utils/hitFunctions';
+import { validateRegex } from '@cccsaurora/howler-ui/utils/stringUtils';
 import { tryParse } from '@cccsaurora/howler-ui/utils/utils';
 import LeadRenderer from '../view/LeadRenderer';
 const InformationPane = ({ onClose }) => {
@@ -55,6 +57,7 @@ const InformationPane = ({ onClose }) => {
     const [tab, setTab] = useState('overview');
     const [loading, setLoading] = useState(false);
     const [dossiers, setDossiers] = useState([]);
+    const [filter, setFilter] = useState('');
     const users = useMyUserList(userIds);
     const hit = useContextSelector(HitContext, ctx => ctx.hits[selected]);
     howlerPluginStore.plugins.forEach(plugin => {
@@ -128,8 +131,8 @@ const InformationPane = ({ onClose }) => {
             overview: () => _jsx(HitOverview, { hit: hit }),
             details: () => _jsx(HitDetails, { hit: hit }),
             hit_comments: () => _jsx(HitComments, { hit: hit, users: users }),
-            hit_raw: () => _jsx(JSONViewer, { data: !loading && hit }),
-            hit_data: () => (_jsx(JSONViewer, { data: !loading && hit?.howler?.data?.map(entry => tryParse(entry)), collapse: false })),
+            hit_raw: () => _jsx(JSONViewer, { data: !loading && hit, hideSearch: true, filter: filter }),
+            hit_data: () => (_jsx(JSONViewer, { data: !loading && hit?.howler?.data?.map(entry => tryParse(entry)), collapse: false, hideSearch: true, filter: filter })),
             hit_worklog: () => _jsx(HitWorklog, { hit: !loading && hit, users: users }),
             hit_aggregate: () => _jsx(HitSummary, { query: `howler.bundles:(${hit?.howler?.id})` }),
             hit_related: () => _jsx(HitRelated, { hit: hit }),
@@ -139,7 +142,8 @@ const InformationPane = ({ onClose }) => {
                 () => _jsx(LeadRenderer, { lead: _lead, hit: hit })
             ])))
         }[tab]?.();
-    }, [dossiers, hit, loading, tab, users]);
+    }, [dossiers, filter, hit, loading, tab, users]);
+    const hasError = useMemo(() => !validateRegex(filter), [filter]);
     return (_jsxs(VSBox, { top: 10, sx: { height: '100%', flex: 1 }, children: [_jsxs(Stack, { direction: "column", flex: 1, sx: { overflowY: 'auto', flexGrow: 1 }, position: "relative", spacing: 1, ml: 2, children: [_jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.5, flexShrink: 0, pr: 2, sx: [hit?.howler?.is_bundle && { position: 'absolute', top: 1, right: 0, zIndex: 1100 }], children: [_jsx(FlexOne, {}), onClose && !location.pathname.startsWith('/bundles') && (_jsx(TuiIconButton, { size: "small", onClick: onClose, tooltip: t('hit.panel.details.exit'), children: _jsx(Clear, {}) })), _jsx(SocketBadge, { size: "small" }), analytic && (_jsx(TuiIconButton, { size: "small", tooltip: t('hit.panel.analytic.open'), disabled: !analytic || loading, route: `/analytics/${analytic.analytic_id}`, children: _jsx(QueryStats, {}) })), hit?.howler.bundles?.length > 0 && _jsx(BundleButton, { ids: hit.howler.bundles, disabled: loading }), !!hit && !hit.howler.is_bundle && (_jsx(TuiIconButton, { tooltip: t('hit.panel.open'), href: `/hits/${selected}`, disabled: !hit || loading, size: "small", target: "_blank", children: _jsx(OpenInNew, {}) }))] }), _jsx(Box, { pr: 2, children: header }), !!hit &&
                         !hit.howler.is_bundle &&
                         (!loading ? (_jsxs(_Fragment, { children: [_jsx(HitOutline, { hit: hit, layout: HitLayout.DENSE }), _jsx(HitLabels, { hit: hit })] })) : (_jsx(Skeleton, { height: 124 }))), (hit?.howler?.links?.length > 0 ||
@@ -149,39 +153,39 @@ const InformationPane = ({ onClose }) => {
                                     .slice(0, 3)
                                     .map(l => _jsx(RelatedLink, { compact: true, ...l }, l.href)), dossiers.flatMap(_dossier => (_dossier.pivots ?? []).map((_pivot, index) => (
                             // eslint-disable-next-line react/no-array-index-key
-                            _jsx(PivotLink, { pivot: _pivot, hit: hit, compact: true }, _dossier.dossier_id + index))))] })), _jsx(VSBoxHeader, { ml: -1, mr: -1, pb: 1, sx: { top: '0px' }, children: _jsxs(Tabs, { value: tab === 'overview' && !hasOverview ? 'details' : tab, sx: {
-                                display: 'flex',
-                                flexDirection: 'row',
-                                pr: 2,
-                                alignItems: 'center',
-                                position: 'relative',
-                                '& > .MuiTabScrollButton-root': {
-                                    position: 'absolute',
-                                    top: 0,
-                                    bottom: 0,
-                                    zIndex: 5,
-                                    backgroundColor: theme.palette.background.paper,
-                                    '&:not(.Mui-disabled)': {
-                                        opacity: 1
-                                    },
-                                    '&:first-of-type': {
-                                        left: 0
-                                    },
-                                    '&:last-of-type': {
-                                        right: 0
+                            _jsx(PivotLink, { pivot: _pivot, hit: hit, compact: true }, _dossier.dossier_id + index))))] })), _jsxs(VSBoxHeader, { ml: -1, mr: -1, pb: 1, sx: { top: '0px' }, children: [_jsxs(Tabs, { value: tab === 'overview' && !hasOverview ? 'details' : tab, sx: {
+                                    display: 'flex',
+                                    flexDirection: 'row',
+                                    pr: 2,
+                                    alignItems: 'center',
+                                    position: 'relative',
+                                    '& > .MuiTabScrollButton-root': {
+                                        position: 'absolute',
+                                        top: 0,
+                                        bottom: 0,
+                                        zIndex: 5,
+                                        backgroundColor: theme.palette.background.paper,
+                                        '&:not(.Mui-disabled)': {
+                                            opacity: 1
+                                        },
+                                        '&:first-of-type': {
+                                            left: 0
+                                        },
+                                        '&:last-of-type': {
+                                            right: 0
+                                        }
                                     }
-                                }
-                            }, variant: "scrollable", children: [_jsx(Tab, { sx: { px: 2, minWidth: 0 }, label: _jsx(Tooltip, { title: t('hit.viewer.comments'), children: _jsx(Badge, { sx: {
-                                                '& > .MuiBadge-badge': {
-                                                    backgroundColor: theme.palette.divider,
-                                                    zIndex: 1,
-                                                    right: theme.spacing(-0.5)
-                                                },
-                                                '& > svg': { zIndex: 2 }
-                                            }, badgeContent: hit?.howler.comment?.length ?? 0, children: _jsx(Comment, {}) }) }), value: "hit_comments", onClick: () => setTab('hit_comments') }), hit?.howler?.is_bundle && (_jsx(Tab, { label: t('hit.viewer.aggregate'), value: "hit_aggregate", onClick: () => setTab('hit_aggregate') })), hasOverview && (_jsx(Tab, { label: t('hit.viewer.overview'), value: "overview", onClick: () => setTab('overview') })), _jsx(Tab, { label: t('hit.viewer.details'), value: "details", onClick: () => setTab('details') }), hit?.howler.dossier?.map((lead, index) => (_jsx(Tab
-                                // eslint-disable-next-line react/no-array-index-key
-                                , { label: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [lead.icon && _jsx(Icon, { icon: lead.icon }), _jsx("span", { children: i18n.language === 'en' ? lead.label.en : lead.label.fr })] }), value: 'lead:' + index, onClick: () => setTab('lead:' + index) }, 'lead:' + index))), dossiers.flatMap((_dossier, dossierIndex) => _dossier.leads?.map((_lead, leadIndex) => (_jsx(Tab
-                                // eslint-disable-next-line react/no-array-index-key
-                                , { label: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_lead.icon && _jsx(Icon, { icon: _lead.icon }), _jsx("span", { children: i18n.language === 'en' ? _lead.label.en : _lead.label.fr })] }), value: `external-lead:${dossierIndex}:${leadIndex}`, onClick: () => setTab(`external-lead:${dossierIndex}:${leadIndex}`) }, `external-lead:${dossierIndex}:${leadIndex}`)))), _jsx(FlexOne, {}), _jsx(Tab, { sx: { px: 2, minWidth: 0 }, label: _jsx(Tooltip, { title: t('hit.viewer.data'), children: _jsx(DataObject, {}) }), value: "hit_data", onClick: () => setTab('hit_data'), disabled: !hit?.howler?.data }), _jsx(Tab, { sx: { px: 2, minWidth: 0 }, label: _jsx(Tooltip, { title: t('hit.viewer.json'), children: _jsx(Code, {}) }), value: "hit_raw", onClick: () => setTab('hit_raw') }), _jsx(Tab, { sx: { px: 2, minWidth: 0 }, label: _jsx(Tooltip, { title: t('hit.viewer.worklog'), children: _jsx(History, {}) }), value: "hit_worklog", onClick: () => setTab('hit_worklog') }), _jsx(Tab, { sx: { px: 2, minWidth: 0 }, label: _jsx(Tooltip, { title: t('hit.viewer.related'), children: _jsx(LinkSharp, {}) }), value: "hit_related", onClick: () => setTab('hit_related') })] }) }), _jsx(ErrorBoundary, { children: _jsx(VSBoxContent, { mr: -1, ml: -1, height: "100%", children: _jsx(Stack, { height: "100%", flex: 1, children: tabContent }) }) })] }), !!hit && hit?.howler && (_jsxs(Box, { pr: 2, bgcolor: theme.palette.background.default, position: "relative", children: [_jsx(Divider, { orientation: "horizontal" }), _jsx(HitActions, { hit: hit })] }))] }));
+                                }, variant: "scrollable", children: [_jsx(Tab, { sx: { px: 2, minWidth: 0 }, label: _jsx(Tooltip, { title: t('hit.viewer.comments'), children: _jsx(Badge, { sx: {
+                                                    '& > .MuiBadge-badge': {
+                                                        backgroundColor: theme.palette.divider,
+                                                        zIndex: 1,
+                                                        right: theme.spacing(-0.5)
+                                                    },
+                                                    '& > svg': { zIndex: 2 }
+                                                }, badgeContent: hit?.howler.comment?.length ?? 0, children: _jsx(Comment, {}) }) }), value: "hit_comments", onClick: () => setTab('hit_comments') }), hit?.howler?.is_bundle && (_jsx(Tab, { label: t('hit.viewer.aggregate'), value: "hit_aggregate", onClick: () => setTab('hit_aggregate') })), hasOverview && (_jsx(Tab, { label: t('hit.viewer.overview'), value: "overview", onClick: () => setTab('overview') })), _jsx(Tab, { label: t('hit.viewer.details'), value: "details", onClick: () => setTab('details') }), hit?.howler.dossier?.map((lead, index) => (_jsx(Tab
+                                    // eslint-disable-next-line react/no-array-index-key
+                                    , { label: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [lead.icon && _jsx(Icon, { icon: lead.icon }), _jsx("span", { children: i18n.language === 'en' ? lead.label.en : lead.label.fr })] }), value: 'lead:' + index, onClick: () => setTab('lead:' + index) }, 'lead:' + index))), dossiers.flatMap((_dossier, dossierIndex) => _dossier.leads?.map((_lead, leadIndex) => (_jsx(Tab
+                                    // eslint-disable-next-line react/no-array-index-key
+                                    , { label: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_lead.icon && _jsx(Icon, { icon: _lead.icon }), _jsx("span", { children: i18n.language === 'en' ? _lead.label.en : _lead.label.fr })] }), value: `external-lead:${dossierIndex}:${leadIndex}`, onClick: () => setTab(`external-lead:${dossierIndex}:${leadIndex}`) }, `external-lead:${dossierIndex}:${leadIndex}`)))), _jsx(FlexOne, {}), _jsx(Tab, { sx: { px: 2, minWidth: 0 }, label: _jsx(Tooltip, { title: t('hit.viewer.data'), children: _jsx(DataObject, {}) }), value: "hit_data", onClick: () => setTab('hit_data'), disabled: !hit?.howler?.data }), _jsx(Tab, { sx: { px: 2, minWidth: 0 }, label: _jsx(Tooltip, { title: t('hit.viewer.json'), children: _jsx(Code, {}) }), value: "hit_raw", onClick: () => setTab('hit_raw') }), _jsx(Tab, { sx: { px: 2, minWidth: 0 }, label: _jsx(Tooltip, { title: t('hit.viewer.worklog'), children: _jsx(History, {}) }), value: "hit_worklog", onClick: () => setTab('hit_worklog') }), _jsx(Tab, { sx: { px: 2, minWidth: 0 }, label: _jsx(Tooltip, { title: t('hit.viewer.related'), children: _jsx(LinkSharp, {}) }), value: "hit_related", onClick: () => setTab('hit_related') })] }), ['hit_raw', 'hit_data'].includes(tab) && (_jsx(Phrase, { sx: { mt: 1, pr: 1 }, value: filter, onChange: setFilter, error: hasError, label: t('json.viewer.search.label'), placeholder: t('json.viewer.search.prompt'), endAdornment: _jsx(IconButton, { onClick: () => setFilter(''), children: _jsx(Clear, {}) }) }))] }), _jsx(ErrorBoundary, { children: _jsx(VSBoxContent, { mr: -1, ml: -1, height: "100%", children: _jsx(Stack, { height: "100%", flex: 1, children: tabContent }) }) })] }), !!hit && hit?.howler && (_jsxs(Box, { pr: 2, bgcolor: theme.palette.background.default, position: "relative", children: [_jsx(Divider, { orientation: "horizontal" }), _jsx(HitActions, { hit: hit })] }))] }));
 };
 export default InformationPane;

package/locales/en/translation.json

@@ -431,8 +431,13 @@
     "route.advanced.query.yaml": "Sigma Rule",
     "route.advanced.query.yaml.description": "Sigma is a generic and open signature format that allows you to describe relevant log events in a straightforward manner. The rule format is very flexible, easy to write and applicable to any type of log file.",
     "route.advanced.result.title": "Howler Advanced Search",
-    "route.advanced.result.description": "Excecute a query to show results here.",
-    "route.advanced.type": "Rule Type",
+    "route.advanced.result.description": "Execute a query to show results here.",
+    "route.advanced.rule.type": "Rule Type",
+    "route.advanced.pivot.field": "Group By Field",
+    "route.advanced.query.type": "Query Type",
+    "route.advanced.query.type.default": "Default",
+    "route.advanced.query.type.facet": "Facet",
+    "route.advanced.query.type.groupby": "Group By",
     "route.analytics": "Analytics",
     "route.analytics.deleted": "Deleted Rule!",
     "route.analytics.detections": "Detections:",

package/locales/fr/translation.json

@@ -431,8 +431,13 @@
     "route.advanced.query.yaml": "Règle Sigma",
     "route.advanced.query.yaml.description": "Sigma est un format de signature générique et ouvert qui vous permet de décrire des événements de journal pertinents de manière directe. Le format de règle est très flexible, facile à écrire et applicable à tout type de fichier journal.",
     "route.advanced.result.title": "Recherche avancée de howler",
-    "route.advanced.result.description": "Excecutez une requête pour afficher les résultats ici.",
-    "route.advanced.type": "Type de règle",
+    "route.advanced.result.description": "Exécutez une requête pour afficher les résultats ici.",
+    "route.advanced.rule.type": "Type de règle",
+    "route.advanced.pivot.field": "Champ à regrouper par",
+    "route.advanced.query.type": "Type de requête",
+    "route.advanced.query.type.default": "Défaut",
+    "route.advanced.query.type.facet": "Facette",
+    "route.advanced.query.type.groupby": "Regrouper",
     "route.analytics": "Analyses",
     "route.analytics.deleted": "Règle supprimée!",
     "route.analytics.detections": "Détections:",

package/package.json

@@ -96,7 +96,7 @@
     "internal-slot": "1.0.7"
   },
   "type": "module",
-  "version": "2.13.0-dev.163",
+  "version": "2.13.0-dev.169",
   "exports": {
     "./i18n": "./i18n.js",
     "./index.css": "./index.css",

package/utils/stringUtils.d.ts

@@ -5,3 +5,4 @@ export declare const safeFieldValueURI: (data: string | number | boolean) => str
 export declare const sanitizeLuceneQuery: (query: string) => string;
 export declare const safeStringPropertyCompare: (propertyPath: string) => (a: unknown, b: unknown) => any;
 export declare const sanitizeMultilineLucene: (query: string) => string;
+export declare const validateRegex: (regex: string) => boolean;

package/utils/stringUtils.js

@@ -36,3 +36,12 @@ export const safeStringPropertyCompare = (propertyPath) => {
 export const sanitizeMultilineLucene = (query) => {
     return query.replace(/#.+/g, '').replace(/\n{2,}/, '\n');
 };
+export const validateRegex = (regex) => {
+    try {
+        new RegExp(regex);
+        return true;
+    }
+    catch {
+        return false;
+    }
+};