@cccsaurora/howler-ui 2.19.0-dev.1181 → 2.19.0-dev.1264

package/components/routes/advanced/QueryBuilder.js

@@ -1,18 +1,16 @@
 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 { OpenInNew, PlayArrowOutlined } 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';
@@ -20,7 +18,6 @@ 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 = {
@@ -78,8 +75,6 @@ const QueryBuilder = () => {
     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);
@@ -168,16 +163,6 @@ const QueryBuilder = () => {
         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') {
@@ -195,18 +180,10 @@ const QueryBuilder = () => {
             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]);
+    }, [execute, monaco, t]);
     useEffect(() => {
         getHitFields();
     }, [getHitFields]);
@@ -233,8 +210,8 @@ const QueryBuilder = () => {
                                             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.lucene.type'), sx: { minWidth: '230px' } })), renderOption: (props, option) => (_jsx(ListItemText, { ...props, sx: { flexDirection: 'column', alignItems: 'start !important' }, primary: t(`route.advanced.query.type.${option}`), secondary: t(`route.advanced.query.type.${option}.description`) })) })), 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: {
+                                    ], 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.lucene.type'), sx: { minWidth: '230px' } })), renderOption: (props, option) => (_jsx(ListItemText, { ...props, sx: { flexDirection: 'column', alignItems: 'start !important' }, primary: t(`route.advanced.query.type.${option}`), secondary: t(`route.advanced.query.type.${option}.description`) })) })), 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, { label: _value }, _value))) })) : (_jsx(Tooltip, { title: _jsx(Stack, { spacing: 1, children: values.map(_value => (_jsx("span", { children: _value }, _value))) }), children: _jsx(Chip, { 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') })))] }), _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,

package/components/routes/advanced/QueryEditor.js

@@ -2,7 +2,7 @@ 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 { RecordSearchContext } from '@cccsaurora/howler-ui/components/app/providers/RecordSearchProvider';
 import ThemedEditor from '@cccsaurora/howler-ui/components/elements/ThemedEditor';
 import { memo, useCallback, useContext, useEffect, useMemo } from 'react';
 import { useContextSelector } from 'use-context-selector';
@@ -20,8 +20,8 @@ const QueryEditor = ({ query, setQuery, onMount, language = 'lucene', fontSize =
     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 fzfSearch = useContextSelector(RecordSearchContext, ctx => ctx?.fzfSearch ?? false);
+    const setFzfSearch = useContextSelector(RecordSearchContext, ctx => ctx?.setFzfSearch);
     const beforeEditorMount = useCallback((_monaco) => {
         _monaco.languages.register({ id: 'lucene' });
         _monaco.languages.register({ id: 'eql' });

package/components/routes/advanced/historyCompletionProvider.js

@@ -1,13 +1,13 @@
 import { useMonaco } from '@monaco-editor/react';
-import { HitSearchContext } from '@cccsaurora/howler-ui/components/app/providers/HitSearchProvider';
+import { RecordSearchContext } from '@cccsaurora/howler-ui/components/app/providers/RecordSearchProvider';
 import Fuse from 'fuse.js';
 import { useMemo } from 'react';
 import { useContextSelector } from 'use-context-selector';
 import { twitterShort } from '@cccsaurora/howler-ui/utils/utils';
 const useHistoryCompletionProvider = () => {
     const monaco = useMonaco();
-    const fzfSearch = useContextSelector(HitSearchContext, ctx => ctx?.fzfSearch);
-    const queryHistory = useContextSelector(HitSearchContext, ctx => ctx?.queryHistory ?? {});
+    const fzfSearch = useContextSelector(RecordSearchContext, ctx => ctx?.fzfSearch);
+    const queryHistory = useContextSelector(RecordSearchContext, ctx => ctx?.queryHistory ?? {});
     // Using fuse for fuzzy searching
     const fuse = useMemo(() => new Fuse(Object.keys(queryHistory), { keys: ['key'], threshold: 0.4 }), [queryHistory]);
     return {

package/components/routes/analytics/AnalyticDetails.js

@@ -1,45 +1,33 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Check, Delete, Edit, OpenInNew, SsidChart } from '@mui/icons-material';
-import { Autocomplete, CircularProgress, Divider, FormControl, Grid, IconButton, InputLabel, MenuItem, Select, Skeleton, Stack, Tab, Tabs, TextField, Tooltip, Typography, useTheme } from '@mui/material';
+import { OpenInNew } from '@mui/icons-material';
+import { Autocomplete, Divider, Grid, IconButton, Skeleton, Stack, Tab, Tabs, TextField, Typography, useTheme } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
-import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
 import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
 import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
-import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
 import { UserListContext } from '@cccsaurora/howler-ui/components/app/providers/UserListProvider';
 import UserList from '@cccsaurora/howler-ui/components/elements/UserList';
 import HowlerAvatar from '@cccsaurora/howler-ui/components/elements/display/HowlerAvatar';
 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 { Link, useNavigate, useParams, useSearchParams } from 'react-router-dom';
-import { RULE_INTERVALS } from '@cccsaurora/howler-ui/utils/constants';
+import { Link, useParams, useSearchParams } from 'react-router-dom';
 import AnalyticComments from './AnalyticComments';
 import AnalyticHitComments from './AnalyticHitComments';
 import AnalyticNotebooks from './AnalyticNotebooks';
 import AnalyticOverview from './AnalyticOverview';
 import AnalyticOverviews from './AnalyticOverviews';
 import AnalyticTemplates from './AnalyticTemplates';
-import RuleView from './RuleView';
 import TriageSettings from './TriageSettings';
 const AnalyticDetails = () => {
     const { t } = useTranslation();
     const params = useParams();
-    const navigate = useNavigate();
-    const { user } = useAppUser();
     const [searchParams, setSearchParams] = useSearchParams();
     const { dispatchApi } = useMyApi();
     const theme = useTheme();
-    const { showSuccessMessage } = useMySnackbar();
-    const { withConfirmDeleteModal } = useContext(ModalContext);
     const { users, searchUsers } = useContext(UserListContext);
     const { config } = useContext(ApiConfigContext);
     const [analytic, setAnalytic] = useState(null);
     const [tab, setTab] = useState(searchParams.get('tab') ?? 'overview');
-    const [editingInterval, setEditingInterval] = useState(false);
-    const [intervalLoading, setIntervalLoading] = useState(false);
-    const [crontab, setCrontab] = useState(RULE_INTERVALS[3].crontab);
     const filteredContributors = useMemo(() => (analytic?.contributors ?? []).filter(_user => _user !== analytic?.owner), [analytic?.contributors, analytic?.owner]);
     useEffect(() => {
         dispatchApi(api.analytic.get(params.id)).then(setAnalytic);
@@ -53,41 +41,13 @@ const AnalyticDetails = () => {
             _setFilter(detection);
         }
     }, [filter]);
-    const onOwnerChange = useCallback(async (ownerId) => {
+    const onOwnerChange = useCallback(async ([ownerId]) => {
         const result = await dispatchApi(api.analytic.owner.post(analytic.analytic_id, { username: ownerId }), {
             throwError: true,
             showError: true
         });
         setAnalytic(result);
     }, [analytic?.analytic_id, dispatchApi]);
-    const onDelete = useCallback(() => {
-        withConfirmDeleteModal(async () => {
-            await dispatchApi(api.analytic.del(analytic?.analytic_id, 'wait_for'));
-            showSuccessMessage(t('route.analytics.deleted'));
-            navigate('/analytics');
-        });
-    }, [analytic?.analytic_id, dispatchApi, navigate, withConfirmDeleteModal, showSuccessMessage, t]);
-    const onEdit = useCallback(async () => {
-        if (editingInterval) {
-            setIntervalLoading(true);
-            try {
-                await dispatchApi(api.analytic.put(analytic?.analytic_id, {
-                    rule_crontab: crontab
-                }));
-                setAnalytic(_analytic => ({
-                    ..._analytic,
-                    rule_crontab: crontab
-                }));
-                setEditingInterval(false);
-            }
-            finally {
-                setIntervalLoading(false);
-            }
-        }
-        else {
-            setEditingInterval(true);
-        }
-    }, [analytic?.analytic_id, crontab, dispatchApi, editingInterval]);
     useEffect(() => {
         if (searchParams.get('tab') !== tab) {
             searchParams.set('tab', tab);
@@ -108,23 +68,15 @@ const AnalyticDetails = () => {
         }
         searchUsers(`uname:"${analytic?.owner}"`);
     }, [analytic?.owner, searchUsers]);
-    return (_jsx(PageCenter, { maxWidth: "1500px", textAlign: "left", height: "100%", children: _jsxs("div", { style: { height: '100%', display: 'flex', flexDirection: 'column' }, children: [_jsx(Typography, { variant: "h3", mb: 2, children: _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [analytic ? (_jsx("span", { children: analytic.name })) : (_jsxs(Stack, { children: [_jsx(Skeleton, { variant: "text", width: "170px", height: "28px" }), _jsx(Skeleton, { variant: "text", width: "140px", height: "28px" })] })), analytic?.rule && (_jsxs(_Fragment, { children: [_jsx(Tooltip, { title: t('route.analytics.rule'), children: _jsx(SsidChart, { fontSize: "large", color: "info" }) }), (analytic?.owner === user.username || user.roles.includes('admin')) && (_jsx(IconButton, { onClick: onDelete, children: _jsx(Delete, {}) }))] })), _jsx(IconButton, { component: Link, to: `/hits?query=howler.analytic:"${analytic?.name}"`, children: _jsx(OpenInNew, {}) })] }) }), _jsxs(Stack, { direction: "row", spacing: 1, divider: _jsx(Divider, { flexItem: true, orientation: "vertical", sx: { marginLeft: `${theme.spacing(2)} !important`, marginRight: `${theme.spacing(1)} !important` } }), mb: 2, children: [_jsxs(Stack, { spacing: 1, alignItems: "start", children: [_jsx(Typography, { variant: "body1", color: "text.secondary", children: t('owner') }), _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [!analytic?.rule ? (_jsx(UserList, { buttonSx: {
+    return (_jsx(PageCenter, { maxWidth: "1500px", textAlign: "left", height: "100%", children: _jsxs("div", { style: { height: '100%', display: 'flex', flexDirection: 'column' }, children: [_jsx(Typography, { variant: "h3", mb: 2, children: _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [analytic ? (_jsx("span", { children: analytic.name })) : (_jsxs(Stack, { children: [_jsx(Skeleton, { variant: "text", width: "170px", height: "28px" }), _jsx(Skeleton, { variant: "text", width: "140px", height: "28px" })] })), _jsx(IconButton, { component: Link, to: `/hits?query=howler.analytic:"${analytic?.name}"`, children: _jsx(OpenInNew, {}) })] }) }), _jsxs(Stack, { direction: "row", spacing: 1, divider: _jsx(Divider, { flexItem: true, orientation: "vertical", sx: { marginLeft: `${theme.spacing(2)} !important`, marginRight: `${theme.spacing(1)} !important` } }), mb: 2, children: [_jsxs(Stack, { spacing: 1, alignItems: "start", children: [_jsx(Typography, { variant: "body1", color: "text.secondary", children: t('owner') }), _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(UserList, { buttonSx: {
                                                 marginTop: '0 !important',
                                                 marginLeft: `${theme.spacing(-1)} !important`,
                                                 marginRight: `${theme.spacing(-1)} !important`
-                                            }, userId: analytic?.owner, onChange: onOwnerChange, i18nLabel: "route.analytics.set.owner" })) : (_jsx(HowlerAvatar, { userId: analytic?.owner })), _jsx(Stack, { children: users[analytic?.owner] ? (_jsxs(_Fragment, { children: [_jsx(Typography, { variant: "body1", children: users[analytic?.owner].name }), _jsx(Typography, { component: "a", href: `mailto:${users[analytic?.owner].email}`, variant: "caption", color: "text.secondary", children: users[analytic?.owner].email })] })) : (_jsxs(_Fragment, { children: [_jsx(Skeleton, { variant: "text", width: "70px" }), _jsx(Skeleton, { variant: "text", width: "60px" })] })) })] })] }), filteredContributors.length > 0 && (_jsxs(Stack, { spacing: 1, children: [_jsx(Typography, { variant: "body1", color: "text.secondary", children: t('route.analytics.contributors') }), _jsx(Stack, { direction: "row", alignItems: "center", spacing: 1, children: filteredContributors.map(_user => (_jsx(HowlerAvatar, { userId: _user }, _user))) })] })), analytic?.rule_crontab && (_jsxs(Stack, { direction: "row", spacing: 1, children: [_jsxs(Stack, { spacing: 1, justifyContent: "space-between", children: [_jsx(Typography, { variant: "body1", color: "text.secondary", children: t('rule.interval') }), editingInterval ? (_jsxs(FormControl, { sx: { minWidth: '200px' }, children: [_jsx(InputLabel, { children: t('rule.interval') }), _jsx(Select, { size: "small", label: t('rule.interval'), onChange: event => setCrontab(event.target.value), value: crontab, children: RULE_INTERVALS.map(interval => (_jsx(MenuItem, { value: interval.crontab, children: t(interval.key) }, interval.key))) })] })) : (_jsx("code", { style: {
-                                                backgroundColor: theme.palette.background.paper,
-                                                padding: theme.spacing(0.5),
-                                                alignSelf: 'start',
-                                                borderRadius: theme.shape.borderRadius,
-                                                border: `thin solid ${theme.palette.divider}`,
-                                                width: '100%'
-                                            }, children: analytic.rule_crontab }))] }), (analytic?.owner === user.username || user.roles.includes('admin')) && (_jsx(Tooltip, { title: editingInterval ? t('rule.interval.save') : t('rule.interval.edit'), children: _jsx(IconButton, { disabled: intervalLoading, sx: { alignSelf: 'end' }, onClick: onEdit, children: intervalLoading ? _jsx(CircularProgress, { size: 20 }) : editingInterval ? _jsx(Check, {}) : _jsx(Edit, {}) }) }))] }))] }), _jsxs(Grid, { container: true, children: [_jsx(Grid, { item: true, xs: 12, md: 9, children: _jsxs(Tabs, { value: tab, onChange: (_, _tab) => setTab(_tab), children: [_jsx(Tab, { label: t('route.analytics.tab.overview'), value: "overview" }), _jsx(Tab, { label: t('route.analytics.tab.comments'), value: "comments" }), _jsx(Tab, { label: t('route.analytics.tab.hit_comments'), value: "hit_comments" }), _jsx(Tab, { label: t('route.analytics.tab.templates'), value: "templates" }), _jsx(Tab, { label: t('route.analytics.tab.overviews'), value: "overviews" }), analytic?.rule && _jsx(Tab, { label: t('route.analytics.tab.rule'), value: "rule" }), config?.configuration.features.notebook && (_jsx(Tab, { label: t('route.analytics.tab.notebooks'), value: "notebooks" })), _jsx(Tab, { label: t('route.analytics.tab.triage'), value: "triage" })] }) }), ['comments', 'hit_comments'].includes(tab) && (_jsx(Grid, { item: true, xs: 12, md: 3, children: _jsx(Autocomplete, { options: analytic?.detections ?? [], renderInput: param => _jsx(TextField, { ...param, label: t('route.analytics.dropdown.detection') }), value: filter, onChange: (_, v) => setFilter(v) }) }))] }), {
+                                            }, userIds: [analytic?.owner], onChange: onOwnerChange, i18nLabel: "route.analytics.set.owner" }), _jsx(Stack, { children: users[analytic?.owner] ? (_jsxs(_Fragment, { children: [_jsx(Typography, { variant: "body1", children: users[analytic?.owner].name }), _jsx(Typography, { component: "a", href: `mailto:${users[analytic?.owner].email}`, variant: "caption", color: "text.secondary", children: users[analytic?.owner].email })] })) : (_jsxs(_Fragment, { children: [_jsx(Skeleton, { variant: "text", width: "70px" }), _jsx(Skeleton, { variant: "text", width: "60px" })] })) })] })] }), filteredContributors.length > 0 && (_jsxs(Stack, { spacing: 1, children: [_jsx(Typography, { variant: "body1", color: "text.secondary", children: t('route.analytics.contributors') }), _jsx(Stack, { direction: "row", alignItems: "center", spacing: 1, children: filteredContributors.map(_user => (_jsx(HowlerAvatar, { userId: _user }, _user))) })] }))] }), _jsxs(Grid, { container: true, children: [_jsx(Grid, { item: true, xs: 12, md: 9, children: _jsxs(Tabs, { value: tab, onChange: (_, _tab) => setTab(_tab), children: [_jsx(Tab, { label: t('route.analytics.tab.overview'), value: "overview" }), _jsx(Tab, { label: t('route.analytics.tab.comments'), value: "comments" }), _jsx(Tab, { label: t('route.analytics.tab.hit_comments'), value: "hit_comments" }), _jsx(Tab, { label: t('route.analytics.tab.templates'), value: "templates" }), _jsx(Tab, { label: t('route.analytics.tab.overviews'), value: "overviews" }), config?.configuration.features.notebook && (_jsx(Tab, { label: t('route.analytics.tab.notebooks'), value: "notebooks" })), _jsx(Tab, { label: t('route.analytics.tab.triage'), value: "triage" })] }) }), ['comments', 'hit_comments'].includes(tab) && (_jsx(Grid, { item: true, xs: 12, md: 3, children: _jsx(Autocomplete, { options: analytic?.detections ?? [], renderInput: param => _jsx(TextField, { ...param, label: t('route.analytics.dropdown.detection') }), value: filter, onChange: (_, v) => setFilter(v) }) }))] }), {
                     comments: _jsx(AnalyticComments, { analytic: analytic, setAnalytic: setAnalytic }),
                     hit_comments: _jsx(AnalyticHitComments, { analytic: analytic }),
                     overview: _jsx(AnalyticOverview, { analytic: analytic, setAnalytic: setAnalytic }),
                     overviews: _jsx(AnalyticOverviews, { analytic: analytic }),
-                    rule: _jsx(RuleView, { analytic: analytic, setAnalytic: setAnalytic }),
                     templates: _jsx(AnalyticTemplates, { analytic: analytic }),
                     triage: _jsx(TriageSettings, { analytic: analytic, setAnalytic: setAnalytic }),
                     ...(config?.configuration.features.notebook

package/components/routes/analytics/AnalyticSearch.js

@@ -1,9 +1,8 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { SsidChart, Star, StarBorder } from '@mui/icons-material';
-import { AvatarGroup, Card, CardContent, CardHeader, Chip, Divider, Grid, IconButton, InputAdornment, Stack, Tooltip, Typography, useTheme } from '@mui/material';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Star, StarBorder } from '@mui/icons-material';
+import { AvatarGroup, Card, CardContent, CardHeader, Chip, Divider, Grid, IconButton, Stack, Tooltip, Typography, useTheme } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
 import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
-import useLocalStorageItem from '@cccsaurora/howler-ui/commons/components/utils/hooks/useLocalStorageItem';
 import SearchResponseProvider, { SearchResponseContext } from '@cccsaurora/howler-ui/components/app/providers/SearchResponseProvider';
 import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';
 import { TuiListProvider } from '@cccsaurora/howler-ui/components/elements/addons/lists';
@@ -27,7 +26,6 @@ const AnalyticSearchBase = () => {
     const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
     const appUser = useAppUser();
     const { response, request } = useContext(SearchResponseContext);
-    const [onlyRules, setOnlyRules] = useLocalStorageItem(StorageKey.ONLY_RULES, 0);
     const [searching, setSearching] = useState(false);
     const [hasError, setHasError] = useState(false);
     const [phrase, setPhrase] = useState(searchParams.get('phrase') || '');
@@ -60,20 +58,19 @@ const AnalyticSearchBase = () => {
         try {
             const sanitizedPhrase = sanitizeLuceneQuery(phrase);
             const _response = await request(api.search.analytic.post, {
-                query: `name:*${sanitizedPhrase}* OR detections:*${sanitizedPhrase}*` +
-                    (onlyRules > 0 ? ' AND _exists_:rule_type' : onlyRules < 0 ? ' AND -_exists_:rule_type' : ''),
+                query: `name:*${sanitizedPhrase}* OR detections:*${sanitizedPhrase}*`,
                 rows: pageCount,
                 offset
             });
             load(_response.items.map(u => ({ id: u.analytic_id, item: u })));
         }
-        catch (e) {
+        catch {
             setHasError(true);
         }
         finally {
             setSearching(false);
         }
-    }, [request, load, offset, onlyRules, pageCount, phrase, searchParams, setSearchParams]);
+    }, [request, load, offset, pageCount, phrase, searchParams, setSearchParams]);
     const onPageChange = useCallback((_offset) => {
         if (_offset !== offset) {
             searchParams.set('offset', _offset.toString());
@@ -100,7 +97,7 @@ const AnalyticSearchBase = () => {
         }
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [onlyRules]);
+    []);
     useEffect(() => {
         if (response?.total <= offset) {
             setOffset(0);
@@ -122,15 +119,9 @@ const AnalyticSearchBase = () => {
                 transitionProperty: 'border-color',
                 cursor: 'pointer',
                 mt: 1
-            }, children: [_jsx(CardHeader, { title: _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx("span", { children: item.item.name }), item.item.rule_type && (_jsxs(_Fragment, { children: [_jsx(Tooltip, { title: t('route.analytics.rule'), children: _jsx(SsidChart, { color: "info" }) }), _jsx("code", { style: {
-                                            fontSize: '.55em',
-                                            backgroundColor: theme.palette.background.paper,
-                                            padding: theme.spacing(0.5),
-                                            borderRadius: theme.shape.borderRadius,
-                                            border: `thin solid ${theme.palette.divider}`
-                                        }, children: item.item.rule_type })] })), _jsx(FlexOne, {}), _jsxs(Stack, { direction: "row", spacing: 1, sx: { mt: 1 }, children: [item.item.owner && _jsx(HowlerAvatar, { sx: { width: 24, height: 24 }, userId: item.item.owner }), filteredContributors.length > 0 && _jsx(Divider, { orientation: "vertical", flexItem: true }), _jsx(AvatarGroup, { children: filteredContributors.map(contributor => (_jsx(HowlerAvatar, { sx: { width: 24, height: 24 }, userId: contributor }, contributor))) })] }), _jsx(Tooltip, { title: t('button.pin'), children: _jsx(IconButton, { size: "small", onClick: e => onFavourite(e, item.item), children: appUser.user?.favourite_analytics?.includes(item.item.analytic_id) ? _jsx(Star, {}) : _jsx(StarBorder, {}) }) })] }) }), item.item.detections?.length > 0 && (_jsx(CardContent, { sx: { paddingTop: 0 }, children: _jsxs(Grid, { container: true, spacing: 0.5, sx: { marginTop: `${theme.spacing(-0.5)} !important` }, children: [item.item.detections.slice(0, 5).map(d => (_jsx(Grid, { item: true, children: _jsx(Chip, { size: "small", variant: "outlined", label: d }) }, d))), item.item.detections.length > 5 && (_jsx(Grid, { item: true, children: _jsx(Tooltip, { title: _jsx(Stack, { children: item.item.detections.slice(5).map(d => (_jsx("span", { children: d }, d))) }), children: _jsx(Chip, { size: "small", variant: "outlined", label: `+ ${item.item.detections.length - 5}` }) }) }))] }) }))] }, item.item.name));
+            }, children: [_jsx(CardHeader, { title: _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx("span", { children: item.item.name }), _jsx(FlexOne, {}), _jsxs(Stack, { direction: "row", spacing: 1, sx: { mt: 1 }, children: [item.item.owner && _jsx(HowlerAvatar, { sx: { width: 24, height: 24 }, userId: item.item.owner }), filteredContributors.length > 0 && _jsx(Divider, { orientation: "vertical", flexItem: true }), _jsx(AvatarGroup, { children: filteredContributors.map(contributor => (_jsx(HowlerAvatar, { sx: { width: 24, height: 24 }, userId: contributor }, contributor))) })] }), _jsx(Tooltip, { title: t('button.pin'), children: _jsx(IconButton, { size: "small", onClick: e => onFavourite(e, item.item), children: appUser.user?.favourite_analytics?.includes(item.item.analytic_id) ? _jsx(Star, {}) : _jsx(StarBorder, {}) }) })] }) }), item.item.detections?.length > 0 && (_jsx(CardContent, { sx: { paddingTop: 0 }, children: _jsxs(Grid, { container: true, spacing: 0.5, sx: { marginTop: `${theme.spacing(-0.5)} !important` }, children: [item.item.detections.slice(0, 5).map(d => (_jsx(Grid, { item: true, children: _jsx(Chip, { variant: "outlined", label: d }) }, d))), item.item.detections.length > 5 && (_jsx(Grid, { item: true, children: _jsx(Tooltip, { title: _jsx(Stack, { children: item.item.detections.slice(5).map(d => (_jsx("span", { children: d }, d))) }), children: _jsx(Chip, { variant: "outlined", label: `+ ${item.item.detections.length - 5}` }) }) }))] }) }))] }, item.item.name));
     }, [appUser.user?.favourite_analytics, navigate, onFavourite, t, theme]);
-    return (_jsx(ItemManager, { onSearch: onSearch, onPageChange: onPageChange, phrase: phrase, setPhrase: setPhrase, hasError: hasError, searching: searching, searchAdornment: _jsx(InputAdornment, { position: "end", children: _jsx(Tooltip, { title: t(`route.analytics.search.filter.rules.${onlyRules < 0 ? 'hide' : onlyRules > 0 ? 'show' : 'toggle'}`), children: _jsx(IconButton, { onClick: () => setOnlyRules((((onlyRules + 2) % 3) - 1)), children: _jsx(SsidChart, { color: onlyRules < 0 ? 'error' : onlyRules > 0 ? 'info' : 'inherit', sx: { transition: theme.transitions.create(['color']) } }) }) }) }), aboveSearch: _jsx(Typography, { sx: { fontStyle: 'italic', color: theme.palette.text.disabled, mb: 0.5 }, variant: "body2", children: t('route.analytics.search.prompt') }), renderer: renderer, response: response, searchPrompt: "route.analytics.manager.search" }));
+    return (_jsx(ItemManager, { onSearch: onSearch, onPageChange: onPageChange, phrase: phrase, setPhrase: setPhrase, hasError: hasError, searching: searching, aboveSearch: _jsx(Typography, { sx: { fontStyle: 'italic', color: theme.palette.text.disabled, mb: 0.5 }, variant: "body2", children: t('route.analytics.search.prompt') }), renderer: renderer, response: response, searchPrompt: "route.analytics.manager.search" }));
 };
 const AnalyticSearch = () => {
     return (_jsx(TuiListProvider, { children: _jsx(SearchResponseProvider, { idField: "analytic_id", children: _jsx(AnalyticSearchBase, {}) }) }));

package/components/routes/cases/CaseViewer.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("react").NamedExoticComponent<{}>;
+export default _default;

package/components/routes/cases/CaseViewer.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Stack } from '@mui/material';
+import { SocketContext } from '@cccsaurora/howler-ui/components/app/providers/SocketProvider';
+import { memo, useContext, useEffect } from 'react';
+import { Outlet, useParams } from 'react-router-dom';
+import NotFoundPage from '../404';
+import ErrorBoundary from '../ErrorBoundary';
+import CaseDetails from './detail/CaseDetails';
+import CaseSidebar from './detail/CaseSidebar';
+import useCase from './hooks/useCase';
+const CaseViewer = () => {
+    const params = useParams();
+    const { case: _case, missing, update } = useCase({ caseId: params.id });
+    const { emit, open, fetchViewers } = useContext(SocketContext);
+    useEffect(() => {
+        if (!params.id) {
+            return;
+        }
+        fetchViewers(params.id);
+        if (open) {
+            emit({
+                broadcast: false,
+                action: 'viewing',
+                id: params.id
+            });
+            return () => {
+                emit({
+                    broadcast: false,
+                    action: 'stop_viewing',
+                    id: params.id
+                });
+            };
+        }
+    }, [emit, params.id, open, fetchViewers]);
+    if (missing) {
+        return _jsx(NotFoundPage, {});
+    }
+    return (_jsx(ErrorBoundary, { children: _jsxs(Stack, { direction: "row", height: "100%", children: [_jsx(CaseSidebar, { case: _case, update: updatedCase => update(updatedCase, false) }), _jsx(Box, { sx: {
+                        maxHeight: 'calc(100vh - 64px)',
+                        flex: 1,
+                        overflow: 'auto'
+                    }, children: _jsx(ErrorBoundary, { children: _jsx(Outlet, { context: _case }) }) }), _jsx(CaseDetails, { case: _case })] }) }));
+};
+export default memo(CaseViewer);

package/components/routes/cases/CaseViewer.test.d.ts

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

package/components/routes/cases/CaseViewer.test.js

@@ -0,0 +1,133 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, waitFor } from '@testing-library/react';
+import { SocketContext } from '@cccsaurora/howler-ui/components/app/providers/SocketProvider';
+import { createMockCase } from '@cccsaurora/howler-ui/tests/utils';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+// ---------------------------------------------------------------------------
+// Hoisted mocks
+// ---------------------------------------------------------------------------
+const mockEmit = vi.hoisted(() => vi.fn());
+const mockFetchViewers = vi.hoisted(() => vi.fn().mockResolvedValue(undefined));
+const mockOpen = vi.hoisted(() => ({ current: true }));
+const mockAddListener = vi.hoisted(() => vi.fn());
+const mockRemoveListener = vi.hoisted(() => vi.fn());
+const mockParams = vi.hoisted(() => ({ id: 'case-1' }));
+const mockDispatchApi = vi.hoisted(() => vi.fn());
+// ---------------------------------------------------------------------------
+// Module-level mocks
+// ---------------------------------------------------------------------------
+vi.mock('components/hooks/useMyApi', () => ({
+    default: () => ({ dispatchApi: mockDispatchApi })
+}));
+vi.mock('react-router-dom', async () => {
+    const actual = await vi.importActual('react-router-dom');
+    return {
+        ...actual,
+        useParams: () => mockParams,
+        Outlet: () => _jsx("div", { id: "outlet" }),
+        useLocation: vi.fn(() => ({ pathname: '/', search: '' })),
+        useNavigate: () => vi.fn()
+    };
+});
+vi.mock('api', () => ({
+    default: {
+        v2: {
+            case: {
+                get: vi.fn(),
+                put: vi.fn()
+            }
+        }
+    }
+}));
+vi.mock('./detail/CaseDetails', () => ({
+    default: () => _jsx("div", { id: "case-details" })
+}));
+vi.mock('./detail/CaseSidebar', () => ({
+    default: () => _jsx("div", { id: "case-sidebar" })
+}));
+// ---------------------------------------------------------------------------
+// Import after mocks
+// ---------------------------------------------------------------------------
+import CaseViewer from './CaseViewer';
+// ---------------------------------------------------------------------------
+// Provider wrapper – uses the real SocketContext so both CaseViewer and its
+// useCase hook share the same context value provided here.
+// ---------------------------------------------------------------------------
+const createWrapper = () => {
+    const Wrapper = ({ children }) => (_jsx(SocketContext.Provider, { value: {
+            emit: mockEmit,
+            open: mockOpen.current,
+            fetchViewers: mockFetchViewers,
+            addListener: mockAddListener,
+            removeListener: mockRemoveListener,
+            status: 1,
+            reconnect: vi.fn(),
+            viewers: {}
+        }, children: children }));
+    return Wrapper;
+};
+// ---------------------------------------------------------------------------
+// Setup
+// ---------------------------------------------------------------------------
+beforeEach(() => {
+    mockEmit.mockClear();
+    mockOpen.current = true;
+    mockFetchViewers.mockClear().mockResolvedValue(undefined);
+    mockAddListener.mockClear();
+    mockRemoveListener.mockClear();
+    mockDispatchApi.mockReset().mockResolvedValue(createMockCase({ case_id: 'case-1' }));
+    mockParams.id = 'case-1';
+});
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+describe('CaseViewer', () => {
+    it('fetches viewers on mount', async () => {
+        render(_jsx(CaseViewer, {}), { wrapper: createWrapper() });
+        await waitFor(() => {
+            expect(mockFetchViewers).toHaveBeenCalledWith('case-1');
+        });
+    });
+    it('emits viewing action when socket is open', async () => {
+        render(_jsx(CaseViewer, {}), { wrapper: createWrapper() });
+        await waitFor(() => {
+            expect(mockEmit).toHaveBeenCalledWith({
+                broadcast: false,
+                action: 'viewing',
+                id: 'case-1'
+            });
+        });
+    });
+    it('emits stop_viewing on unmount', async () => {
+        const { unmount } = render(_jsx(CaseViewer, {}), { wrapper: createWrapper() });
+        await waitFor(() => {
+            expect(mockEmit).toHaveBeenCalledWith({
+                broadcast: false,
+                action: 'viewing',
+                id: 'case-1'
+            });
+        });
+        mockEmit.mockClear();
+        unmount();
+        expect(mockEmit).toHaveBeenCalledWith({
+            broadcast: false,
+            action: 'stop_viewing',
+            id: 'case-1'
+        });
+    });
+    it('does not emit viewing when socket is closed', async () => {
+        mockOpen.current = false;
+        render(_jsx(CaseViewer, {}), { wrapper: createWrapper() });
+        await waitFor(() => {
+            expect(mockFetchViewers).toHaveBeenCalledWith('case-1');
+        });
+        expect(mockEmit).not.toHaveBeenCalled();
+    });
+    it('still fetches viewers when socket is closed', async () => {
+        mockOpen.current = false;
+        render(_jsx(CaseViewer, {}), { wrapper: createWrapper() });
+        await waitFor(() => {
+            expect(mockFetchViewers).toHaveBeenCalledWith('case-1');
+        });
+    });
+});

package/components/routes/cases/Cases.d.ts

@@ -0,0 +1,2 @@
+declare const Cases: () => import("react/jsx-runtime").JSX.Element;
+export default Cases;