@cccsaurora/howler-ui 2.14.0-dev.268 → 2.14.0-dev.271

package/components/routes/admin/users/UserSearch.js

@@ -0,0 +1,124 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Close, Search } from '@mui/icons-material';
+import { Box, Chip, Grid, IconButton, LinearProgress, Stack, TextField, Typography } from '@mui/material';
+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';
+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 { TuiListProvider } from '@cccsaurora/howler-ui/components/elements/addons/lists';
+import TuiTable from '@cccsaurora/howler-ui/components/elements/addons/lists/table/TuiTable';
+import { TuiListMethodContext } from '@cccsaurora/howler-ui/components/elements/addons/lists/TuiListProvider';
+import SearchPagination from '@cccsaurora/howler-ui/components/elements/addons/search/SearchPagination';
+import SearchTotal from '@cccsaurora/howler-ui/components/elements/addons/search/SearchTotal';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
+import { useCallback, useContext, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
+import { sanitizeLuceneQuery } from '@cccsaurora/howler-ui/utils/stringUtils';
+const COLUMN = [
+    { column: 'uname', i18nKey: 'page.user.search.column.username' },
+    { column: 'name', i18nKey: 'page.user.search.column.fullname' },
+    { column: 'email', i18nKey: 'page.user.search.column.email' }
+];
+const UserSearch = () => {
+    const navigate = useNavigate();
+    const { t } = useTranslation();
+    const { dispatchApi } = useMyApi();
+    const { load } = useContext(TuiListMethodContext);
+    const [searchParams, setSearchParams] = useSearchParams();
+    const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
+    const [searching, setSearching] = useState(false);
+    const [phrase, setPhrase] = useState('');
+    const [offset, setOffset] = useState(parseInt(searchParams.get('offset')) || 0);
+    const [response, setResponse] = useState(null);
+    // Search Handler.
+    const onSearch = useCallback(async () => {
+        setSearching(true);
+        try {
+            const sanitizedPhrase = sanitizeLuceneQuery(phrase);
+            const _response = await dispatchApi(api.search.user.post({
+                query: `name:*${sanitizedPhrase}* OR uname:*${sanitizedPhrase}* OR email:*${sanitizedPhrase}*`,
+                rows: pageCount,
+                offset
+            }));
+            setResponse(_response);
+            load(_response.items.map(u => ({ id: u.username, item: u })));
+        }
+        finally {
+            setSearching(false);
+        }
+    }, [dispatchApi, load, offset, pageCount, phrase]);
+    const onPageChange = useCallback((_offset) => {
+        if (_offset !== offset) {
+            searchParams.set('offset', _offset.toString());
+            setSearchParams(searchParams);
+            setOffset(_offset);
+        }
+    }, [offset, searchParams, setSearchParams]);
+    // Handler for when search term value changes.
+    const onValueChange = useCallback((event) => setPhrase(event.target.value), []);
+    // Handler for keyboard event in order to trigger search onEnter.
+    const onKeyDown = useCallback((event) => {
+        const { isEnter } = parseEvent(event);
+        if (isEnter) {
+            onSearch();
+        }
+    }, [onSearch]);
+    // Clean button handler.
+    const onClear = useCallback(() => {
+        setPhrase('');
+        onSearch();
+    }, [onSearch]);
+    // Effect to initialize list of users.
+    useEffect(() => {
+        onSearch();
+        if (!searchParams.has('offset')) {
+            searchParams.set('offset', '0');
+            setSearchParams(searchParams);
+        }
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
+    useEffect(() => {
+        if (response?.total <= offset) {
+            setOffset(0);
+            searchParams.set('offset', '0');
+            setSearchParams(searchParams);
+        }
+    }, [offset, response?.total, searchParams, setSearchParams]);
+    useEffect(() => {
+        if (!searching) {
+            onSearch();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [offset]);
+    // TuiTable cell renderer
+    const cellRenderer = useCallback((_value, _, column) => {
+        if (column.column !== 'groups') {
+            return _jsx("div", { style: { height: '100%', display: 'flex', alignItems: 'center' }, children: _value.toString() });
+        }
+        else {
+            return (_jsx(Grid, { container: true, spacing: 1, children: _value.map(g => (_jsx(Grid, { item: true, children: _jsx(Chip, { label: g, size: "small", sx: { fontSize: '11px' } }) }, g))) }));
+        }
+    }, []);
+    // TuiTable handler for when selecting/clicking a Row.
+    const onRowSelect = useCallback(selection => {
+        navigate(selection.item.username);
+    }, [navigate]);
+    return (_jsxs(VSBox, { children: [_jsxs(VSBoxHeader, { children: [_jsx(Typography, { sx: theme => ({ fontStyle: 'italic  ', color: theme.palette.text.disabled, mb: 0.5 }), variant: "body2", children: t('page.user.search.prompt') }), _jsx(TextField, { fullWidth: true, autoComplete: "off", value: phrase, onChange: onValueChange, onKeyDown: onKeyDown, InputProps: {
+                            startAdornment: (_jsx(_Fragment, { children: _jsx(IconButton, { onClick: onSearch, children: _jsx(Search, {}) }) })),
+                            endAdornment: (_jsx(_Fragment, { children: _jsx(IconButton, { onClick: onClear, children: _jsx(Close, {}) }) }))
+                        } }), searching && (_jsx(LinearProgress, { sx: theme => ({
+                            mt: -0.5,
+                            borderBottomLeftRadius: theme.shape.borderRadius,
+                            borderBottomRightRadius: theme.shape.borderRadius
+                        }) })), response && (_jsxs(Stack, { direction: "row", alignItems: "center", mt: 0.5, children: [_jsx(SearchTotal, { total: response.total, pageLength: response.items.length, offset: response.offset, sx: theme => ({ color: theme.palette.text.secondary, fontSize: '0.9em', fontStyle: 'italic' }) }), _jsx(Box, { flex: 1 }), _jsx(SearchPagination, { total: response.total, limit: response.rows, offset: response.offset, onChange: onPageChange })] }))] }), _jsx(VSBoxContent, { sx: { mt: 1 }, children: _jsx(TuiTable, { columns: COLUMN, onRowSelect: onRowSelect, children: cellRenderer }) })] }));
+};
+const UserSearchProvider = () => {
+    return (_jsx(PageCenter, { textAlign: "left", children: _jsx(TuiListProvider, { children: _jsx(UserSearch, {}) }) }));
+};
+export default UserSearchProvider;

package/components/routes/advanced/QueryBuilder.d.ts

@@ -0,0 +1,3 @@
+import { type FC } from 'react';
+declare const QueryBuilder: FC;
+export default QueryBuilder;

package/components/routes/advanced/QueryBuilder.js

@@ -0,0 +1,264 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable no-useless-escape */
+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';
+import { FieldContext } from '@cccsaurora/howler-ui/components/app/providers/FieldProvider';
+import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
+import CustomButton from '@cccsaurora/howler-ui/components/elements/addons/buttons/CustomButton';
+import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';
+import JSONViewer from '@cccsaurora/howler-ui/components/elements/display/json/JSONViewer';
+import useMySnackbar from '@cccsaurora/howler-ui/components/hooks/useMySnackbar';
+import dayjs from 'dayjs';
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import { sanitizeMultilineLucene } from '@cccsaurora/howler-ui/utils/stringUtils';
+import { v4 as uuid } from 'uuid';
+import QueryEditor from './QueryEditor';
+import RuleModal from './RuleModal';
+const QUERY_TYPES = ['eql', 'lucene', 'yaml'];
+const STEPS = [1, 5, 25, 50, 100, 250, 500, 1000, 2500, 10000];
+const DEFAULT_VALUES = {
+    eql: `sequence with maxspan=30m
+  [ process where process.name == "regsvr32.exe" ]
+  [ file where length(process.command_line) > 400 ]
+`,
+    lucene: `# Match any howler.id value
+howler.id:*
+AND
+# Hits must be open
+howler.status:open
+`,
+    yaml: `title: Example Howler Sigma Rule
+id: ${uuid()}
+status: test
+description: A basic example of using sigma rule notation to query howler
+references:
+    - https://github.com/SigmaHQ/sigma
+author: You
+date: ${dayjs().format('YYYY/MM/DD')}
+modified: ${dayjs().format('YYYY/MM/DD')}
+tags:
+    - attack.command_and_control
+logsource:
+    category: nbs
+detection:
+    selection1:
+        howler.analytic|startswith:
+            - '6Tail'
+            - 'Assembly'
+    selection2:
+        howler.status:
+          - open
+          - in-progress
+    condition: 1 of selection*
+falsepositives:
+    - Unknown
+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();
+    const smallButtons = useMediaQuery('(max-width:1150px)');
+    const compactLayout = useMediaQuery('(max-width:870px)');
+    const monaco = useMonaco();
+    const { hitFields, getHitFields } = useContext(FieldContext);
+    const { showModal } = useContext(ModalContext);
+    const { showWarningMessage } = useMySnackbar();
+    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);
+    const [error, setError] = useState(null);
+    const [rows, setRows] = useState(1);
+    const [x, setX] = useState(0);
+    const wrapper = useRef();
+    const fieldOptions = useMemo(() => hitFields.map(_field => _field.key), [hitFields]);
+    const execute = useCallback(async () => {
+        setLoading(true);
+        try {
+            const searchProperties = {
+                fl: allFields ? null : fields.join(','),
+                rows: STEPS[rows]
+            };
+            let result;
+            if (type === 'lucene') {
+                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({
+                    eql_query: sanitizeMultilineLucene(query),
+                    ...searchProperties
+                });
+            }
+            else {
+                result = await api.search.hit.sigma.post({
+                    sigma: query,
+                    ...searchProperties
+                });
+            }
+            setResponse(result);
+            setError(null);
+        }
+        catch (e) {
+            setError(e.message ?? e.toString());
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [allFields, fields, groupByField, query, queryType, rows, type]);
+    const onKeyDown = useCallback(event => {
+        const parsedEvent = parseEvent(event);
+        if (parsedEvent.isCtrl && parsedEvent.isEnter) {
+            execute();
+        }
+    }, [execute]);
+    const onMouseMove = useCallback((event) => {
+        const wrapperRect = wrapper.current?.getBoundingClientRect();
+        const offset = event.clientX - (wrapperRect.left + wrapperRect.width / 2);
+        setX(offset);
+    }, []);
+    const onMouseUp = useCallback(() => {
+        window.removeEventListener('mousemove', onMouseMove);
+        window.removeEventListener('mouseup', onMouseUp);
+    }, [onMouseMove]);
+    const onMouseDown = useCallback(() => {
+        window.addEventListener('mousemove', onMouseMove);
+        window.addEventListener('mouseup', onMouseUp);
+    }, [onMouseMove, onMouseUp]);
+    const onCreateRule = useCallback(async () => {
+        if (!response) {
+            showWarningMessage(t('route.advanced.create.rule.disabled'));
+            return;
+        }
+        await new Promise(res => showModal(_jsx(RuleModal, { onSubmit: res, fileData: query, type: type }), {
+            maxWidth: '85vw',
+            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;
+        }
+        const queryDisposable = monaco.editor.addEditorAction({
+            id: 'execute-query',
+            label: t('route.advanced.execute.query'),
+            contextMenuGroupId: 'howler',
+            keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter],
+            run: execute
+        });
+        const ruleDisposable = monaco.editor.addEditorAction({
+            id: 'save-query',
+            label: t('route.advanced.create.rule'),
+            contextMenuGroupId: 'howler',
+            keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS],
+            run: onCreateRule
+        });
+        return () => {
+            queryDisposable.dispose();
+            ruleDisposable.dispose();
+        };
+    }, [execute, monaco, onCreateRule, t]);
+    useEffect(() => {
+        getHitFields();
+    }, [getHitFields]);
+    useEffect(() => {
+        setResponse(null);
+        if (!monaco) {
+            return;
+        }
+        monaco.editor.getModels().forEach(model => {
+            model.setValue(DEFAULT_VALUES[type]);
+        });
+    }, [type, monaco]);
+    return (_jsx(PageCenter, { width: "100%", maxWidth: "100%", margin: 0, textAlign: "left", children: _jsxs(Stack, { ref: wrapper, children: [_jsxs(Stack, { direction: "row", spacing: 1, sx: {
+                        px: 2,
+                        pt: 1,
+                        pb: 1,
+                        // Fix TuiButton Issue
+                        '& > span': {
+                            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, 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 } })] }) })] }), 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,
+                                left: 'calc(50% - 5px)',
+                                width: '10px',
+                                backgroundColor: theme.palette.divider,
+                                cursor: 'col-resize',
+                                transform: `translateX(${x}px)`,
+                                zIndex: 1000,
+                                borderRadius: theme.shape.borderRadius
+                            }, onMouseDown: onMouseDown }), _jsx(Box, { sx: {
+                                position: 'absolute',
+                                top: 0,
+                                left: `calc(50% + 7px + ${x}px)`,
+                                bottom: 0,
+                                right: 0,
+                                display: 'flex',
+                                alignItems: 'stretch',
+                                justifyContent: 'stretch',
+                                px: 1,
+                                pt: 1,
+                                mt: -1,
+                                '& > *': { width: '100%' },
+                                '& .react-json-view': {
+                                    backgroundColor: `${theme.palette.background.paper} !important`
+                                }
+                            }, children: response ? (_jsx(JSONViewer, { data: response ?? {}, collapse: allFields })) : (_jsxs(Stack, { alignItems: "center", p: 2, children: [_jsx(Typography, { variant: "h3", sx: { mt: 4, color: 'text.secondary', opacity: 0.7 }, children: t('route.advanced.result.title') }), _jsx(Typography, { variant: "h5", sx: { mt: 2, color: 'text.secondary', opacity: 0.7 }, children: t('route.advanced.result.description') })] })) }), error && (_jsxs(Alert, { sx: { position: 'absolute', bottom: 0, left: 0, right: '50%', m: 1, mr: 13, maxHeight: '40vh' }, variant: "outlined", color: "error", children: [_jsx(AlertTitle, { children: t('route.advanced.error') }), error] }))] })] }) }));
+};
+export default QueryBuilder;

package/components/routes/advanced/QueryEditor.d.ts

@@ -0,0 +1,14 @@
+import type { Monaco } from '@monaco-editor/react';
+import type { editor } from 'monaco-editor';
+interface QueryEditorProps {
+    query: string;
+    setQuery: (query: string) => void;
+    onMount?: (editor: editor.IStandaloneCodeEditor, monaco: Monaco) => void;
+    language?: 'lucene' | 'eql' | 'yaml';
+    fontSize?: number;
+    height?: string;
+    width?: string;
+    editorOptions?: editor.IStandaloneEditorConstructionOptions;
+}
+declare const _default: import("react").NamedExoticComponent<QueryEditorProps>;
+export default _default;

package/components/routes/advanced/QueryEditor.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMonaco } from '@monaco-editor/react';
+import { Box, useTheme } from '@mui/material';
+import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import { HitSearchContext } from '@cccsaurora/howler-ui/components/app/providers/HitSearchProvider';
+import ThemedEditor from '@cccsaurora/howler-ui/components/elements/ThemedEditor';
+import { memo, useCallback, useContext, useEffect, useMemo } from 'react';
+import { useContextSelector } from 'use-context-selector';
+import useEQLCompletionProvider from './eqlCompletionProvider';
+import EQL_TOKEN_PROVIDER from './eqlTokenProvider';
+import useHistoryCompletionProvider from './historyCompletionProvider';
+import useLuceneCompletionProvider from './luceneCompletionProvider';
+import LUCENE_TOKEN_PROVIDER from './luceneTokenProvider';
+import useYamlCompletionProvider from './yamlCompletionProvider';
+const QueryEditor = ({ query, setQuery, onMount, language = 'lucene', fontSize = 16, height = '100%', width = '100%', editorOptions = {} }) => {
+    const theme = useTheme();
+    const monaco = useMonaco();
+    const { config } = useContext(ApiConfigContext);
+    const luceneCompletion = useLuceneCompletionProvider();
+    const yamlCompletion = useYamlCompletionProvider();
+    const eqlCompletion = useEQLCompletionProvider();
+    const historyCompletion = useHistoryCompletionProvider();
+    const fzfSearch = useContextSelector(HitSearchContext, ctx => ctx?.fzfSearch ?? false);
+    const setFzfSearch = useContextSelector(HitSearchContext, ctx => ctx?.setFzfSearch);
+    const beforeEditorMount = useCallback((_monaco) => {
+        _monaco.languages.register({ id: 'lucene' });
+        _monaco.languages.register({ id: 'eql' });
+    }, []);
+    useEffect(() => {
+        if (!monaco) {
+            return;
+        }
+        // Set the parsers
+        const monarchLuceneDisposable = monaco.languages.setMonarchTokensProvider('lucene', LUCENE_TOKEN_PROVIDER);
+        const monarchEQLDisposable = monaco.languages.setMonarchTokensProvider('eql', EQL_TOKEN_PROVIDER);
+        monaco.editor.getModels().forEach(model => model.setEOL(monaco.editor.EndOfLineSequence.LF));
+        if (!fzfSearch) {
+            // Add completion providers
+            const luceneCompletionDisposable = monaco.languages.registerCompletionItemProvider('lucene', luceneCompletion);
+            const yamlCompletionDisposable = monaco.languages.registerCompletionItemProvider('yaml', yamlCompletion);
+            const eqlCompletionDisposable = monaco.languages.registerCompletionItemProvider('eql', eqlCompletion);
+            return () => {
+                luceneCompletionDisposable?.dispose();
+                yamlCompletionDisposable?.dispose();
+                eqlCompletionDisposable?.dispose();
+                monarchEQLDisposable?.dispose();
+                monarchLuceneDisposable?.dispose();
+            };
+        }
+        else {
+            const historyCompletionDisposable = monaco.languages.registerCompletionItemProvider('lucene', historyCompletion);
+            return () => {
+                historyCompletionDisposable?.dispose();
+                monarchLuceneDisposable?.dispose();
+            };
+        }
+    }, [config.lookups, eqlCompletion, fzfSearch, historyCompletion, luceneCompletion, monaco, yamlCompletion]);
+    useEffect(() => {
+        if (!monaco || !language) {
+            return;
+        }
+        const disposable = monaco.editor.onDidCreateModel(model => {
+            if (model.getLanguageId() === 'markdown') {
+                return;
+            }
+            monaco.editor.setModelLanguage(model, language);
+        });
+        monaco.editor.getModels().forEach(model => {
+            if (model.getLanguageId() === 'markdown') {
+                return;
+            }
+            monaco.editor.setModelLanguage(model, language);
+        });
+        return disposable.dispose;
+    }, [language, monaco]);
+    const options = useMemo(() => ({
+        readOnly: !setQuery,
+        fontSize,
+        ...editorOptions
+    }), [setQuery, fontSize, editorOptions]);
+    const handleKeyPress = useCallback((event) => {
+        if (setFzfSearch && event.ctrlKey && event.key == 'r') {
+            event.preventDefault();
+            event.stopPropagation();
+            setFzfSearch(!fzfSearch);
+        }
+    }, [fzfSearch, setFzfSearch]);
+    return (_jsx(Box, { sx: { flex: 1 }, onKeyDownCapture: handleKeyPress, children: _jsx(ThemedEditor, { height: height, width: width, theme: theme.palette.mode === 'light' ? 'howler' : 'howler-dark', value: query, onChange: value => setQuery(value), beforeMount: beforeEditorMount, onMount: onMount, options: options }) }));
+};
+export default memo(QueryEditor);

package/components/routes/advanced/RuleModal.d.ts

@@ -0,0 +1,7 @@
+import type { FC } from 'react';
+declare const RuleModal: FC<{
+    onSubmit: () => void;
+    fileData: string;
+    type: 'eql' | 'lucene' | 'yaml';
+}>;
+export default RuleModal;

package/components/routes/advanced/RuleModal.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Button, Card, CardHeader, CircularProgress, Divider, FormControl, InputLabel, MenuItem, Select, Stack, Tab, Tabs, TextField, Typography, useTheme } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
+import { parseEvent } from '@cccsaurora/howler-ui/commons/components/utils/keyboard';
+import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
+import CustomButton from '@cccsaurora/howler-ui/components/elements/addons/buttons/CustomButton';
+import Markdown from '@cccsaurora/howler-ui/components/elements/display/Markdown';
+import ThemedEditor from '@cccsaurora/howler-ui/components/elements/ThemedEditor';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import useMySnackbar from '@cccsaurora/howler-ui/components/hooks/useMySnackbar';
+import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { RULE_INTERVALS } from '@cccsaurora/howler-ui/utils/constants';
+const RuleModal = ({ onSubmit, fileData, type }) => {
+    const { t } = useTranslation();
+    const theme = useTheme();
+    const { close } = useContext(ModalContext);
+    const { dispatchApi } = useMyApi();
+    const { showSuccessMessage } = useMySnackbar();
+    const navigate = useNavigate();
+    const location = useLocation();
+    const [name, setName] = useState('');
+    const [description, setDescription] = useState('');
+    const [crontab, setCrontab] = useState(RULE_INTERVALS[3].crontab);
+    const [loading, setLoading] = useState(false);
+    const [tab, setTab] = useState('description');
+    const badAnalyticName = useMemo(() => !/^([A-Z][a-z]* ?)*$/.test(name), [name]);
+    const handleSubmit = useCallback(async () => {
+        try {
+            setLoading(true);
+            const newAnalytic = await dispatchApi(api.analytic.rules.post({
+                name,
+                description,
+                // Converting the language name to the query type - they all match except sigma
+                rule_type: type.replace('yaml', 'sigma'),
+                rule: fileData,
+                rule_crontab: crontab
+            }));
+            showSuccessMessage(t('modal.rule.success'), 5000, {
+                action: () => (_jsx(Button, { color: "inherit", onClick: () => navigate(`/analytics/${newAnalytic.analytic_id}`), children: t('open') }))
+            });
+            onSubmit();
+            close();
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [dispatchApi, name, description, type, fileData, crontab, showSuccessMessage, t, onSubmit, close, navigate]);
+    const handleKeydown = useCallback(e => {
+        const parsedEvent = parseEvent(e);
+        if (parsedEvent.isCtrl && parsedEvent.isEnter) {
+            e.stopPropagation();
+            e.preventDefault();
+            handleSubmit();
+        }
+        else if (parsedEvent.isEscape) {
+            e.stopPropagation();
+            e.preventDefault();
+            close();
+        }
+    }, [close, handleSubmit]);
+    useEffect(() => {
+        if (location.pathname !== '/advanced') {
+            close();
+        }
+    }, [close, location.pathname]);
+    return (_jsxs(Stack, { spacing: 2, p: 2, alignItems: "start", sx: { minWidth: '60vw', height: '80vh', overflow: 'hidden' }, children: [_jsx(Typography, { variant: "h4", children: t('modal.rule.title') }), _jsx(Typography, { children: t('modal.rule.description') }), _jsxs(Stack, { direction: "row", spacing: 1, sx: { width: '100%' }, children: [_jsx(TextField, { label: t('modal.rule.name') + (badAnalyticName ? ` - ${t('modal.rule.name.warn')}` : ''), value: name, fullWidth: true, color: badAnalyticName ? 'warning' : null, multiline: true, maxRows: 6, onChange: e => setName(e.target.value), onKeyDown: handleKeydown }), _jsxs(FormControl, { sx: { minWidth: '250px' }, children: [_jsx(InputLabel, { children: t('rule.interval') }), _jsx(Select, { label: t('rule.interval'), onChange: event => setCrontab(event.target.value), value: crontab, MenuProps: { style: { zIndex: 1500 } }, children: RULE_INTERVALS.map(interval => (_jsx(MenuItem, { value: interval.crontab, children: t(interval.key) }, interval.key))) })] })] }), _jsxs(Tabs, { value: tab, onChange: (__, value) => setTab(value), children: [_jsx(Tab, { label: t('description'), value: "description" }), _jsx(Tab, { label: t('query'), value: "query" })] }), tab === 'description' && (_jsxs(Box, { display: "grid", alignSelf: "stretch", sx: { pt: 1, flex: 1, overflow: 'hidden', gridTemplateColumns: '1fr 1fr', gap: theme.spacing(1) }, justifyContent: "stretch", children: [_jsxs(Card, { variant: "outlined", sx: { p: 1 }, children: [_jsx(CardHeader, { sx: { py: 1, px: 0 }, title: t('modal.rule.description.title') }), _jsx(Divider, {}), _jsx(ThemedEditor, { height: "90%", width: "100%", theme: "howler", language: "markdown", value: description, onChange: value => setDescription(value), options: {
+                                    minimap: { enabled: false },
+                                    overviewRulerBorder: false,
+                                    renderLineHighlight: 'gutter',
+                                    fontSize: 16,
+                                    autoClosingBrackets: 'always'
+                                } })] }), _jsxs(Card, { variant: "outlined", sx: { p: 1 }, children: [_jsx(CardHeader, { sx: { py: 1, px: 0 }, title: t('modal.rule.markdown.title') }), _jsx(Divider, {}), _jsx(Markdown, { md: description || t('modal.rule.markdown.placeholder') })] })] })), tab === 'query' && (_jsxs(Card, { variant: "outlined", sx: { p: 1, overflow: 'auto', width: '100%', height: '100%' }, children: [_jsx(CardHeader, { sx: { py: 1, px: 0 }, title: t('modal.rule.file.title') }), _jsx(Divider, {}), _jsx(ThemedEditor, { height: "90%", width: "100%", theme: "howler", language: type, value: fileData, options: {
+                            minimap: { enabled: false },
+                            readOnly: true,
+                            overviewRulerBorder: false,
+                            renderLineHighlight: 'gutter',
+                            fontSize: 16,
+                            autoClosingBrackets: 'always'
+                        } })] })), _jsxs(Stack, { direction: "row", spacing: 1, alignSelf: "end", children: [_jsx(Button, { color: "error", variant: "outlined", onClick: close, children: t('cancel') }), _jsx(CustomButton, { startIcon: loading && _jsx(CircularProgress, { color: "success", size: 18 }), color: "success", variant: "outlined", onClick: handleSubmit, disabled: !name || !description || !crontab, tooltip: (!name || !description) && t(`modal.rule.disabled.${!name ? 'analytic' : 'description'}`), children: t('submit') })] })] }));
+};
+export default RuleModal;

package/components/routes/advanced/eqlCompletionProvider.d.ts

@@ -0,0 +1,3 @@
+import type { languages } from 'monaco-editor';
+declare const useEQLCompletionProvider: () => languages.CompletionItemProvider;
+export default useEQLCompletionProvider;