@cccsaurora/howler-ui 2.13.0-dev.96 → 2.13.0

package/components/elements/hit/HitSummary.js

@@ -2,10 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Analytics, InfoOutlined } from '@mui/icons-material';
 import { Alert, AlertTitle, Autocomplete, Box, Button, Chip, CircularProgress, Divider, Fade, Grid, LinearProgress, Stack, TextField, Tooltip, Typography } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
+import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
 import { FieldContext } from '@cccsaurora/howler-ui/components/app/providers/FieldProvider';
 import { HitSearchContext } from '@cccsaurora/howler-ui/components/app/providers/HitSearchProvider';
 import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
-import { TemplateContext } from '@cccsaurora/howler-ui/components/app/providers/TemplateProvider';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
 import useMySnackbar from '@cccsaurora/howler-ui/components/hooks/useMySnackbar';
@@ -19,11 +19,11 @@ import PluginChip from '../PluginChip';
 import HitGraph from './aggregate/HitGraph';
 const HitSummary = ({ query, response, onStart, onComplete }) => {
     const { t } = useTranslation();
-    const getMatchingTemplate = useContextSelector(TemplateContext, ctx => ctx.getMatchingTemplate);
     const { dispatchApi } = useMyApi();
     const { hitFields } = useContext(FieldContext);
     const { showErrorMessage } = useMySnackbar();
     const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
+    const { getMatchingTemplate } = useMatchers();
     const setQuery = useContextSelector(ParameterContext, ctx => ctx.setQuery);
     const viewId = useContextSelector(HitSearchContext, ctx => ctx.viewId);
     const searching = useContextSelector(HitSearchContext, ctx => ctx.searching);
@@ -48,16 +48,17 @@ const HitSummary = ({ query, response, onStart, onComplete }) => {
         }
         try {
             // Get a list of every key in every template of the hits we're searching
-            const _keyCounts = (response?.items ?? [])
-                .flatMap(h => {
-                const matchingTemplate = getMatchingTemplate(h);
+            const rawCounts = await Promise.all((response?.items ?? []).map(async (h) => {
+                const matchingTemplate = await getMatchingTemplate(h);
                 return (matchingTemplate?.keys ?? [])
                     .filter(key => !['howler.id', 'howler.hash'].includes(key))
                     .map(key => ({
                     key,
                     source: `${matchingTemplate.analytic}: ${matchingTemplate.detection ?? t('any')}`
                 }));
-            })
+            }));
+            const _keyCounts = rawCounts
+                .flat()
                 .concat(customKeys.map(key => ({ key, source: 'custom' })))
                 // Take that array and reduce it to unique keys and the number of times we see it,
                 // as well as the templates we sourced this key from
@@ -142,7 +143,7 @@ const HitSummary = ({ query, response, onStart, onComplete }) => {
     return (_jsxs(Stack, { sx: { mx: 2, height: '100%' }, spacing: 1, children: [_jsx(Typography, { variant: "h6", children: t('hit.summary.aggregate.title') }), _jsx(Divider, { flexItem: true }), _jsx(HitGraph, { query: query }), _jsx(Divider, { flexItem: true }), _jsxs(Stack, { sx: { overflow: 'auto', marginTop: '0 !important' }, pt: 1, spacing: 1, children: [_jsxs(Stack, { direction: "row", spacing: 2, mb: 2, alignItems: "stretch", children: [_jsx(Autocomplete, { fullWidth: true, multiple: true, sx: { minWidth: '175px' }, size: "small", value: customKeys, options: hitFields.map(_field => _field.key), renderInput: _params => _jsx(TextField, { ..._params, label: t('hit.summary.adhoc') }), onChange: (_, value) => setCustomKeys(value) }), _jsx(Button, { variant: "outlined", startIcon: loading ? _jsx(CircularProgress, { size: 20, sx: { ml: 1 } }) : _jsx(Analytics, { sx: { ml: 1 } }), disabled: loading, onClick: () => performAggregation(), children: t('button.aggregate') })] }), isEmpty(aggregateResults) && (_jsxs(Alert, { severity: "info", variant: "outlined", children: [_jsx(AlertTitle, { children: t('hit.summary.aggregate.nokeys.title') }), t('hit.summary.aggregate.nokeys.description')] })), loading && _jsx(LinearProgress, { sx: { minHeight: '4px' } }), Object.keys(aggregateResults)
                         .filter(key => !isEmpty(aggregateResults[key]))
                         .flatMap(key => [
-                        _jsx(Fade, { in: true, children: _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [_jsx(Typography, { variant: "body1", children: key }, key + '-title'), keyCounts[key]?.count < 0 ? (_jsxs(Typography, { variant: "caption", color: "text.secondary", children: ["(", t('hit.summary.adhoc.custom'), ")"] })) : (_jsxs(Typography, { variant: "caption", color: "text.secondary", children: ["(", keyCounts[key]?.count, " ", t('references'), ")"] })), _jsx(Tooltip, { title: _jsxs(Stack, { children: [_jsx(Typography, { variant: "caption", children: t('hit.summary.aggregate.sources') }), keyCounts[key].sources.map(source => (_jsx(Typography, { variant: "caption", children: source }, source)))] }), children: _jsx(InfoOutlined, { fontSize: "inherit" }) })] }) }, key + '-refs'),
+                        _jsx(Fade, { in: true, children: _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [_jsx(Typography, { variant: "body1", children: key }, key + '-title'), keyCounts[key]?.count < 0 ? (_jsxs(Typography, { variant: "caption", color: "text.secondary", children: ["(", t('hit.summary.adhoc.custom'), ")"] })) : (_jsxs(Typography, { variant: "caption", color: "text.secondary", children: ["(", keyCounts[key]?.count ?? '?', " ", t('references'), ")"] })), _jsx(Tooltip, { title: _jsxs(Stack, { children: [_jsx(Typography, { variant: "caption", children: t('hit.summary.aggregate.sources') }), keyCounts[key]?.sources.map(source => (_jsx(Typography, { variant: "caption", children: source }, source))) ?? '?'] }), children: _jsx(InfoOutlined, { fontSize: "inherit" }) })] }) }, key + '-refs'),
                         _jsx(Fade, { in: true, children: hitFields.find(f => f.key === key)?.type !== 'date' ? (_jsx(Box, { sx: theme => ({ ml: `${theme.spacing(1)} !important`, alignSelf: 'start' }), children: _jsx(Grid, { container: true, sx: theme => ({ mr: 1, mt: theme.spacing(-1) }), spacing: 1, children: Object.keys(aggregateResults[key]).map(_key => (_jsx(Grid, { item: true, xs: "auto", children: _jsx(PluginChip, { context: "summary", size: "small", variant: "filled", value: _key, label: `${_key} (${aggregateResults[key][_key]})`, onClick: () => setSearch(key, `"${_key}"`) }) }, _key))) }, key + '-list') })) : (_jsx(Chip, { size: "small", sx: theme => ({ ml: `${theme.spacing(1)} !important`, alignSelf: 'start' }), label: getTimeRange(Object.keys(aggregateResults[key]))
                                     .map(d => new Date(d).toLocaleString())
                                     .join(' - '), onClick: () => setSearch(key, `[${getTimeRange(Object.keys(aggregateResults[key])).join(' TO ')}]`) })) }, key + '-results')

package/components/elements/hit/aggregate/HitGraph.d.ts

@@ -1,4 +1,4 @@
-import 'chartjs-adapter-moment';
+import 'chartjs-adapter-dayjs';
 import type { FC } from 'react';
 declare const HitGraph: FC<{
     query: string;

package/components/elements/hit/aggregate/HitGraph.js

@@ -2,15 +2,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CenterFocusWeak, Refresh } from '@mui/icons-material';
 import { Alert, AlertTitle, Autocomplete, Box, Button, CircularProgress, IconButton, Stack, TextField, Tooltip, alpha, useTheme } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
-import 'chartjs-adapter-moment';
+import 'chartjs-adapter-dayjs';
 import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
 import { HitContext } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
 import { HitSearchContext } from '@cccsaurora/howler-ui/components/app/providers/HitSearchProvider';
 import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import useMyChart from '@cccsaurora/howler-ui/components/hooks/useMyChart';
+import dayjs from 'dayjs';
 import { capitalize } from 'lodash-es';
-import moment from 'moment';
 import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { Scatter } from 'react-chartjs-2';
 import { useTranslation } from 'react-i18next';
@@ -96,10 +96,10 @@ const HitGraph = ({ query }) => {
                 return {
                     label: `${label} (${category.total})`,
                     data: category.items.map(hit => {
-                        const createdMoment = moment(hit.event?.created ?? hit.timestamp);
+                        const createdDate = dayjs(hit.event?.created ?? hit.timestamp);
                         return {
-                            x: createdMoment.clone().hour(0).minute(0).second(0).toISOString(),
-                            y: createdMoment.hour() + createdMoment.minute() / 60 + createdMoment.second() / 3600,
+                            x: createdDate.clone().hour(0).minute(0).second(0).toISOString(),
+                            y: createdDate.hour() + createdDate.minute() / 60 + createdDate.second() / 3600,
                             hit,
                             label
                         };
@@ -157,7 +157,7 @@ const HitGraph = ({ query }) => {
                 tooltip: {
                     callbacks: {
                         title: entries => `${entries.length} ${t('hits')}`,
-                        label: entry => `${entry.raw.hit.howler.analytic}: ${entry.raw.hit.howler.detection} (${moment(entry.raw.hit.event.created).format('MMM D HH:mm:ss')})`,
+                        label: entry => `${entry.raw.hit.howler.analytic}: ${entry.raw.hit.howler.detection} (${dayjs(entry.raw.hit.event.created).format('MMM D HH:mm:ss')})`,
                         afterLabel: entry => `${entry.raw.hit.howler.outline.threat} ${entry.raw.hit.howler.outline.target}`
                     }
                 },
@@ -183,7 +183,7 @@ const HitGraph = ({ query }) => {
                     ticks: {
                         callback: (value) => {
                             const [hour, minute] = [Math.floor(value), Math.floor((value - Math.floor(value)) * 60)];
-                            return moment().hour(hour).minute(minute).format('HH:mm');
+                            return dayjs().hour(hour).minute(minute).format('HH:mm');
                         }
                     }
                 }

package/components/elements/hit/elements/HitTimestamp.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Chip, Tooltip } from '@mui/material';
 import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import { useContext, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { formatDate } from '@cccsaurora/howler-ui/utils/utils';
@@ -14,31 +14,31 @@ const TIMESTAMP_MESSAGES = {
 const HitTimestamp = ({ hit, layout }) => {
     const { t } = useTranslation();
     const { config } = useContext(ApiConfigContext);
-    const threshold = useMemo(() => moment().subtract(config.configuration.system.retention?.limit_amount ?? 350, config.configuration.system.retention?.limit_unit ?? 'days'), [config.configuration.system.retention?.limit_amount, config.configuration.system.retention?.limit_unit]);
+    const threshold = useMemo(() => dayjs().subtract(config.configuration.system.retention?.limit_amount ?? 350, config.configuration.system.retention?.limit_unit ?? 'days'), [config.configuration.system.retention?.limit_amount, config.configuration.system.retention?.limit_unit]);
     const timestamp = useMemo(() => {
         const validFieldValues = [hit.howler?.expiry, hit.event?.created, hit.timestamp];
         const earliestDate = validFieldValues
             .filter(entry => !!entry)
             .reduce((earliest, current) => {
-            return moment(earliest).isBefore(current) ? earliest : current;
+            return dayjs(earliest).isBefore(current) ? earliest : current;
         });
         return earliestDate;
     }, [hit]);
     const color = useMemo(() => {
-        if (moment(timestamp).isBefore(threshold.clone().add(2, 'weeks'))) {
+        if (dayjs(timestamp).isBefore(threshold.clone().add(2, 'weeks'))) {
             return 'error';
         }
-        if (moment(timestamp).isBefore(threshold.clone().add(1, 'months'))) {
+        if (dayjs(timestamp).isBefore(threshold.clone().add(1, 'months'))) {
             return 'warning';
         }
         return 'default';
     }, [threshold, timestamp]);
     const duration = useMemo(() => {
-        if (moment(timestamp).isBefore(threshold)) {
+        if (dayjs(timestamp).isBefore(threshold)) {
             return t('retention.imminent');
         }
-        const diff = moment(timestamp).diff(threshold, 'seconds');
-        const _duration = moment.duration(diff, 'seconds');
+        const diff = dayjs(timestamp).diff(threshold, 'seconds');
+        const _duration = dayjs.duration(diff, 'seconds');
         return _duration.humanize();
     }, [t, threshold, timestamp]);
     return (_jsx(Tooltip, { title: t(TIMESTAMP_MESSAGES[color], {

package/components/elements/hit/related/PivotLink.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Icon } from '@iconify/react/dist/iconify.js';
 import { Skeleton } from '@mui/material';
 import Handlebars from 'handlebars';
 import { isEmpty } from 'lodash-es';
@@ -32,11 +31,18 @@ const PivotLink = ({ pivot, hit, compact = false }) => {
         return Handlebars.compile(pivot.value)(templateObject);
     }, [flatHit, pivot]);
     if (href) {
-        return (_jsx(RelatedLink, { title: pivot.label[i18n.language], href: href, compact: compact, children: _jsx(Icon, { fontSize: "1.5rem", icon: pivot.icon }) }));
+        return _jsx(RelatedLink, { title: pivot.label[i18n.language], href: href, compact: compact, icon: pivot.icon });
     }
-    const pluginPivot = pluginStore.executeFunction(`pivot.${pivot.format}`, { pivot, hit, compact });
-    if (pluginPivot) {
-        return pluginPivot;
+    try {
+        const pluginPivot = pluginStore.executeFunction(`pivot.${pivot.format}`, { pivot, hit, compact });
+        if (pluginPivot) {
+            return pluginPivot;
+        }
+    }
+    catch (e) {
+        // eslint-disable-next-line no-console
+        console.warn(`Pivot plugin for format ${pivot.format} does not exist, not rendering`);
+        return null;
     }
     return _jsx(Skeleton, { variant: "rounded" });
 };

package/components/elements/hit/related/RelatedIcon.d.ts

@@ -0,0 +1,8 @@
+import { type FC } from 'react';
+declare const RelatedIcon: FC<{
+    icon?: string;
+    title?: string;
+    href?: string;
+    compact?: boolean;
+}>;
+export default RelatedIcon;

package/components/elements/hit/related/RelatedIcon.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Icon, iconExists } from '@iconify/react/dist/iconify.js';
+import Avatar from '@mui/material/Avatar';
+import { useAppTheme } from '@cccsaurora/howler-ui/commons/components/app/hooks';
+import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import { useContext } from 'react';
+const RelatedIcon = ({ icon, title, href, compact = false }) => {
+    const { config } = useContext(ApiConfigContext);
+    const { isDark } = useAppTheme();
+    if (!icon) {
+        return null;
+    }
+    if (iconExists(icon)) {
+        return _jsx(Icon, { fontSize: "1.5rem", icon: icon });
+    }
+    const app = config.configuration.ui.apps.find(a => a.name.toLowerCase() === icon?.toLowerCase());
+    if (app) {
+        // use the image link for the configured related application instead
+        icon = app[`img_${isDark ? 'd' : 'l'}`];
+    }
+    return (_jsx(Avatar, { variant: "rounded", alt: title ?? href, src: icon, sx: [
+            theme => ({
+                width: theme.spacing(compact ? 4 : 6),
+                height: theme.spacing(compact ? 4 : 6),
+                '& img': {
+                    objectFit: 'contain'
+                }
+            }),
+            !icon && { backgroundColor: 'transparent' }
+        ], children: icon }));
+};
+export default RelatedIcon;

package/components/elements/hit/related/RelatedLink.js

@@ -1,22 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Avatar, Stack, Typography } from '@mui/material';
-import { useAppTheme } from '@cccsaurora/howler-ui/commons/components/app/hooks';
-import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import { Stack, Typography } from '@mui/material';
 import HowlerCard from '@cccsaurora/howler-ui/components/elements/display/HowlerCard';
-import React, { useContext, useMemo } from 'react';
+import React, {} from 'react';
 import { Link } from 'react-router-dom';
+import RelatedIcon from './RelatedIcon';
 const RelatedLink = ({ icon, title, href, compact = false, children }) => {
-    const { config } = useContext(ApiConfigContext);
-    const { isDark } = useAppTheme();
-    const _icon = useMemo(() => {
-        if (icon) {
-            const app = config.configuration.ui.apps.find(a => a.name.toLowerCase() === icon?.toLowerCase());
-            if (app) {
-                return app[`img_${isDark ? 'd' : 'l'}`];
-            }
-        }
-        return icon;
-    }, [config.configuration.ui.apps, icon, isDark]);
     return (_jsx(HowlerCard, { variant: compact ? 'outlined' : 'elevation', onClick: () => window.open(href), sx: [
             theme => ({
                 cursor: 'pointer',
@@ -29,15 +17,6 @@ const RelatedLink = ({ icon, title, href, compact = false, children }) => {
                 '& a': { textDecoration: 'none', color: 'text.primary' }
             }),
             !compact && { border: 'thin solid', borderColor: 'transparent' }
-        ], children: _jsxs(Stack, { direction: "row", p: compact ? 0.5 : 1, spacing: 1, alignItems: "center", children: [children || (_jsx(Avatar, { variant: "rounded", alt: title ?? href, src: _icon, sx: [
-                        theme => ({
-                            width: theme.spacing(compact ? 4 : 6),
-                            height: theme.spacing(compact ? 4 : 6),
-                            '& img': {
-                                objectFit: 'contain'
-                            }
-                        }),
-                        !_icon && { backgroundColor: 'transparent' }
-                    ], children: _icon })), _jsx(Typography, { component: Link, to: href, onClick: e => e.stopPropagation(), children: title ?? href })] }) }, href));
+        ], children: _jsxs(Stack, { direction: "row", p: compact ? 0.5 : 1, spacing: 1, alignItems: "center", children: [children || _jsx(RelatedIcon, { icon: icon, title: title, href: href, compact: compact }), _jsx(Typography, { component: Link, to: href, onClick: e => e.stopPropagation(), children: title ?? href })] }) }, href));
 };
 export default RelatedLink;

package/components/hooks/useMyChart.d.ts

@@ -1,4 +1,4 @@
-import 'chartjs-adapter-moment';
+import 'chartjs-adapter-dayjs';
 declare const useMyChart: () => {
     line: (titleKey: string, subtitleKey?: string) => {
         responsive: boolean;

package/components/hooks/useMyChart.js

@@ -1,6 +1,6 @@
 import { useTheme } from '@mui/material';
 import { ArcElement, BarElement, CategoryScale, Chart as ChartJS, Filler, Legend, LinearScale, LineElement, PointElement, SubTitle, TimeScale, Title, Tooltip } from 'chart.js';
-import 'chartjs-adapter-moment';
+import 'chartjs-adapter-dayjs';
 import zoomPlugin from 'chartjs-plugin-zoom';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';

package/components/routes/advanced/QueryBuilder.js

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

package/components/routes/advanced/QueryEditor.js

@@ -26,18 +26,6 @@ const QueryEditor = ({ query, setQuery, onMount, language = 'lucene', fontSize =
         _monaco.languages.register({ id: 'lucene' });
         _monaco.languages.register({ id: 'eql' });
     }, []);
-    useEffect(() => {
-        const handleKeyPress = event => {
-            if (setFzfSearch && event.ctrlKey && event.key == 'r') {
-                event.preventDefault();
-                setFzfSearch(!fzfSearch);
-            }
-        };
-        window.addEventListener('keydown', handleKeyPress);
-        return () => {
-            window.removeEventListener('keydown', handleKeyPress);
-        };
-    }, [fzfSearch, setFzfSearch]);
     useEffect(() => {
         if (!monaco) {
             return;
@@ -90,6 +78,13 @@ const QueryEditor = ({ query, setQuery, onMount, language = 'lucene', fontSize =
         fontSize,
         ...editorOptions
     }), [setQuery, fontSize, editorOptions]);
-    return (_jsx(Box, { sx: { flex: 1 }, 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 }) }));
+    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/analytics/AnalyticOverview.d.ts

@@ -1,4 +1,4 @@
-import 'chartjs-adapter-moment';
+import 'chartjs-adapter-dayjs';
 import type { Analytic } from '@cccsaurora/howler-ui/models/entities/generated/Analytic';
 import type { FC } from 'react';
 declare const AnalyticOverview: FC<{

package/components/routes/analytics/AnalyticOverview.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Check, Edit } from '@mui/icons-material';
 import { Alert, AlertTitle, Box, Card, CardContent, CircularProgress, Divider, IconButton, Skeleton, Stack, TextField, Typography, useMediaQuery, useTheme } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
-import 'chartjs-adapter-moment';
+import 'chartjs-adapter-dayjs';
 import Markdown from '@cccsaurora/howler-ui/components/elements/display/Markdown';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import useMySnackbar from '@cccsaurora/howler-ui/components/hooks/useMySnackbar';

package/components/routes/analytics/AnalyticOverviews.d.ts

@@ -1,4 +1,4 @@
-import 'chartjs-adapter-moment';
+import 'chartjs-adapter-dayjs';
 import type { Analytic } from '@cccsaurora/howler-ui/models/entities/generated/Analytic';
 import { type FC } from 'react';
 declare const AnalyticOverviews: FC<{

package/components/routes/analytics/AnalyticOverviews.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Article } from '@mui/icons-material';
 import { Box, Fab, Skeleton, Stack, Typography, useMediaQuery } from '@mui/material';
-import 'chartjs-adapter-moment';
+import 'chartjs-adapter-dayjs';
 import AppListEmpty from '@cccsaurora/howler-ui/commons/components/display/AppListEmpty';
 import { OverviewContext } from '@cccsaurora/howler-ui/components/app/providers/OverviewProvider';
 import { useContext, useEffect, useMemo, useState } from 'react';

package/components/routes/analytics/AnalyticSearch.js

@@ -4,7 +4,6 @@ import { AvatarGroup, Card, CardContent, CardHeader, Chip, Divider, Grid, IconBu
 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 { AnalyticContext } from '@cccsaurora/howler-ui/components/app/providers/AnalyticProvider';
 import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';
 import { TuiListProvider } from '@cccsaurora/howler-ui/components/elements/addons/lists';
 import { TuiListMethodContext } from '@cccsaurora/howler-ui/components/elements/addons/lists/TuiListProvider';
@@ -26,13 +25,26 @@ const AnalyticSearchBase = () => {
     const [searchParams, setSearchParams] = useSearchParams();
     const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
     const appUser = useAppUser();
-    const { addFavourite, removeFavourite } = useContext(AnalyticContext);
     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') || '');
     const [offset, setOffset] = useState(parseInt(searchParams.get('offset')) || 0);
     const [response, setResponse] = useState(null);
+    const addFavourite = useCallback(async (analytic) => {
+        await dispatchApi(api.analytic.favourite.post(analytic.analytic_id));
+        appUser.setUser({
+            ...appUser.user,
+            favourite_analytics: [...appUser.user.favourite_analytics, analytic.analytic_id]
+        });
+    }, [appUser, dispatchApi]);
+    const removeFavourite = useCallback(async (analytic) => {
+        await dispatchApi(api.analytic.favourite.del(analytic.analytic_id));
+        appUser.setUser({
+            ...appUser.user,
+            favourite_analytics: appUser.user.favourite_analytics.filter(v => v !== analytic.analytic_id)
+        });
+    }, [appUser, dispatchApi]);
     // Search Handler.
     const onSearch = useCallback(async () => {
         setSearching(true);

package/components/routes/analytics/AnalyticTemplates.d.ts

@@ -1,4 +1,4 @@
-import 'chartjs-adapter-moment';
+import 'chartjs-adapter-dayjs';
 import type { Analytic } from '@cccsaurora/howler-ui/models/entities/generated/Analytic';
 import { type FC } from 'react';
 declare const AnalyticTemplates: FC<{

package/components/routes/analytics/AnalyticTemplates.js

@@ -1,24 +1,27 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Article } from '@mui/icons-material';
 import { Box, Fab, Skeleton, Stack, Typography, useMediaQuery } from '@mui/material';
-import 'chartjs-adapter-moment';
+import api from '@cccsaurora/howler-ui/api';
+import 'chartjs-adapter-dayjs';
 import AppListEmpty from '@cccsaurora/howler-ui/commons/components/display/AppListEmpty';
-import { TemplateContext } from '@cccsaurora/howler-ui/components/app/providers/TemplateProvider';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
-import { useContextSelector } from 'use-context-selector';
 import TemplateCard from '../templates/TemplateCard';
 const AnalyticTemplates = ({ analytic }) => {
     const { t } = useTranslation();
     const isNarrow = useMediaQuery('(max-width: 1800px)');
-    const getTemplates = useContextSelector(TemplateContext, ctx => ctx.getTemplates);
-    const templates = useContextSelector(TemplateContext, ctx => ctx.templates.filter(_template => _template.analytic === analytic?.name));
+    const { dispatchApi } = useMyApi();
+    const [templates, setTemplates] = useState([]);
     const [loading, setLoading] = useState(false);
     useEffect(() => {
         setLoading(true);
-        getTemplates().finally(() => setLoading(false));
-    }, [getTemplates]);
+        dispatchApi(api.template.get())
+            .then(_templates => _templates.filter(_template => _template.analytic === analytic?.name))
+            .then(setTemplates)
+            .finally(() => setLoading(false));
+    }, [analytic?.name, dispatchApi]);
     if (!analytic) {
         return _jsx(Skeleton, { variant: "rounded", width: "100%", sx: { minHeight: '300px', mt: 2 } });
     }

package/components/routes/analytics/RuleView.d.ts

@@ -1,4 +1,4 @@
-import 'chartjs-adapter-moment';
+import 'chartjs-adapter-dayjs';
 import type { Analytic } from '@cccsaurora/howler-ui/models/entities/generated/Analytic';
 import type { FC } from 'react';
 declare const RuleView: FC<{

package/components/routes/analytics/RuleView.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check, Edit } from '@mui/icons-material';
 import { Box, CircularProgress, IconButton, Stack, Typography, useTheme } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
-import 'chartjs-adapter-moment';
+import 'chartjs-adapter-dayjs';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import useMySnackbar from '@cccsaurora/howler-ui/components/hooks/useMySnackbar';
 import { useCallback, useState } from 'react';

package/components/routes/analytics/TriageSettings.d.ts

@@ -1,4 +1,4 @@
-import 'chartjs-adapter-moment';
+import 'chartjs-adapter-dayjs';
 import type { Analytic } from '@cccsaurora/howler-ui/models/entities/generated/Analytic';
 import type { FC } from 'react';
 declare const TriageSettings: FC<{