@cccsaurora/howler-ui 2.14.0-dev.248 → 2.14.0-dev.254

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

@@ -1,124 +0,0 @@
-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

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

package/components/routes/advanced/QueryBuilder.js

@@ -1,264 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,90 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,83 +0,0 @@
-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

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