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

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/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.164",
   "exports": {
     "./i18n": "./i18n.js",
     "./index.css": "./index.css",