@cccsaurora/howler-ui 2.12.0-dev.168

package/components/routes/analytics/AnalyticDetails.js

@@ -0,0 +1,133 @@
+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 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 { 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 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 { 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);
+    }, [dispatchApi, params.id]);
+    const [filter, _setFilter] = useState(searchParams.get('filter') ?? null);
+    const setFilter = useCallback((detection) => {
+        if (filter === detection) {
+            _setFilter(null);
+        }
+        else {
+            _setFilter(detection);
+        }
+    }, [filter]);
+    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(async () => {
+        await dispatchApi(api.analytic.del(analytic?.analytic_id));
+        showSuccessMessage(t('route.analytics.deleted'));
+        navigate('/analytics');
+    }, [analytic?.analytic_id, dispatchApi, navigate, 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);
+        }
+        if (searchParams.get('filter') !== filter) {
+            if (filter) {
+                searchParams.set('filter', filter);
+            }
+            else {
+                searchParams.delete('filter');
+            }
+        }
+        setSearchParams(searchParams, { replace: true });
+    }, [filter, searchParams, setSearchParams, tab]);
+    useEffect(() => {
+        if (!analytic?.owner) {
+            return;
+        }
+        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: {
+                                                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: "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
+                        ? {
+                            notebooks: _jsx(AnalyticNotebooks, { analytic: analytic, setAnalytic: setAnalytic })
+                        }
+                        : {})
+                }[tab]] }) }));
+};
+export default AnalyticDetails;

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

@@ -0,0 +1,6 @@
+import type { Analytic } from '@cccsaurora/howler-ui/models/entities/generated/Analytic';
+import type { FC } from 'react';
+declare const AnalyticHitComments: FC<{
+    analytic: Analytic;
+}>;
+export default AnalyticHitComments;

package/components/routes/analytics/AnalyticHitComments.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Chip, Divider, LinearProgress, Stack } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
+import Comment from '@cccsaurora/howler-ui/components/elements/Comment';
+import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
+import useMyUserList from '@cccsaurora/howler-ui/components/hooks/useMyUserList';
+import { useEffect, useMemo, useState } from 'react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
+import { compareTimestamp } from '@cccsaurora/howler-ui/utils/utils';
+const AnalyticHitComments = ({ analytic }) => {
+    const [searchParams] = useSearchParams();
+    const navigate = useNavigate();
+    const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
+    const [comments, setComments] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [userIds, setUserIds] = useState(new Set());
+    const users = useMyUserList(userIds);
+    useEffect(() => {
+        setUserIds(new Set(comments.map(c => c.comment.user)));
+    }, [comments]);
+    useEffect(() => {
+        if (!analytic) {
+            return;
+        }
+        setLoading(true);
+        api.search.hit
+            .post({
+            query: `howler.analytic:${analytic.name} AND _exists_:howler.comment`,
+            rows: pageCount
+        })
+            .then(response => {
+            setComments(response.items.flatMap(h => h.howler.comment.map(comment => ({
+                hitId: h.howler.id,
+                detection: h.howler.detection,
+                comment
+            }))));
+        })
+            .finally(() => {
+            setLoading(false);
+        });
+    }, [analytic, pageCount]);
+    const commentEls = useMemo(() => loading ? (_jsx(LinearProgress, {})) : (comments
+        .filter(c => !searchParams.get('filter') || c.detection === searchParams.get('filter'))
+        .sort((a, b) => compareTimestamp(b.comment.timestamp, a.comment.timestamp))
+        .map(c => (_jsx(Comment, { comment: c.comment, users: users, onClick: () => navigate(`/hits/${c.hitId}`), extra: !searchParams.get('filter') && (_jsx(Chip, { size: "small", sx: theme => ({ marginLeft: '0 !important', mr: `${theme.spacing(2)} !important` }), label: c.detection ?? 'Analytic' })) }, c.comment.id)))), [loading, comments, searchParams, users, navigate]);
+    return (_jsxs(Stack, { direction: "column", py: 2, spacing: 1, children: [_jsx(Divider, { orientation: "horizontal", flexItem: true }), commentEls] }));
+};
+export default AnalyticHitComments;

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

@@ -0,0 +1,7 @@
+import type { Analytic } from '@cccsaurora/howler-ui/models/entities/generated/Analytic';
+import { type FC } from 'react';
+declare const AnalyticNotebooks: FC<{
+    analytic: Analytic;
+    setAnalytic: (a: Analytic) => void;
+}>;
+export default AnalyticNotebooks;

package/components/routes/analytics/AnalyticNotebooks.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Add, Delete, Label, LinkRounded, Plagiarism } from '@mui/icons-material';
+import { Box, Card, CircularProgress, Divider, FormControl, Grid, IconButton, InputAdornment, InputLabel, MenuItem, Select, Stack, TextField, Tooltip, Typography } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
+import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
+import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';
+import HowlerAvatar from '@cccsaurora/howler-ui/components/elements/display/HowlerAvatar';
+import HitNotebooks from '@cccsaurora/howler-ui/components/elements/hit/HitNotebooks';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { safeStringPropertyCompare } from '@cccsaurora/howler-ui/utils/stringUtils';
+const AnalyticNotebooks = ({ analytic, setAnalytic }) => {
+    const { t } = useTranslation();
+    const { dispatchApi } = useMyApi();
+    const { user } = useAppUser();
+    const [loading, setLoading] = useState(false);
+    const [formState, setFormState] = useState({
+        name: '',
+        link: '',
+        detection: ''
+    });
+    const onSubmit = useCallback(async () => {
+        setLoading(true);
+        try {
+            const result = await dispatchApi(api.analytic.notebooks.post(analytic.analytic_id, { ...formState, value: formState.link }), {
+                showError: true,
+                throwError: false,
+                logError: false
+            });
+            if (result) {
+                setFormState({
+                    name: '',
+                    link: '',
+                    detection: ''
+                });
+                setAnalytic(result);
+            }
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [analytic, dispatchApi, formState, setAnalytic]);
+    const onDelete = useCallback(async (id) => {
+        await dispatchApi(api.analytic.notebooks.del(analytic.analytic_id, [id]));
+        setAnalytic({ ...analytic, notebooks: analytic.notebooks.filter(n => n.id !== id) });
+    }, [analytic, dispatchApi, setAnalytic]);
+    return (_jsxs(Stack, { direction: "column", py: 2, spacing: 1, children: [_jsx(Box, { sx: { flexGrow: 1 }, children: _jsxs(Grid, { container: true, spacing: 1, children: [_jsx(Grid, { item: true, xs: 6, md: 2, children: _jsxs(FormControl, { fullWidth: true, children: [_jsx(InputLabel, { id: "select-label", children: 'Detection' }), _jsxs(Select, { labelId: "select-label", label: "Detection", value: formState.detection, onChange: ev => {
+                                            setFormState({ ...formState, detection: ev.target.value });
+                                        }, startAdornment: _jsx(InputAdornment, { position: "start", children: _jsx(Plagiarism, {}) }), children: [_jsx(MenuItem, { value: "", children: t('analytic.notebook.dropdown.none') }), analytic?.detections?.map(d => (_jsx(MenuItem, { value: d, children: d }, d)))] })] }) }), _jsx(Grid, { item: true, xs: 6, md: 2, children: _jsx(TextField, { fullWidth: true, label: t('analytic.notebook.name'), value: formState.name, onChange: ev => {
+                                    setFormState({ ...formState, name: ev.currentTarget.value });
+                                }, InputProps: {
+                                    startAdornment: (_jsx(InputAdornment, { position: "start", children: _jsx(Label, {}) }))
+                                } }) }), _jsx(Grid, { item: true, xs: 12, md: 8, children: _jsxs(Box, { sx: { display: 'flex', alignItems: 'center' }, children: [_jsx(TextField, { fullWidth: true, label: t('analytic.notebook.link'), value: formState.link, onChange: ev => {
+                                            setFormState({ ...formState, link: ev.currentTarget.value });
+                                        }, InputProps: {
+                                            startAdornment: (_jsx(InputAdornment, { position: "start", children: _jsx(LinkRounded, {}) }))
+                                        } }), _jsx(IconButton, { disabled: !formState.link || !formState.name, onClick: () => !loading && onSubmit(), children: loading ? _jsx(CircularProgress, {}) : _jsx(Add, {}) })] }) })] }) }), _jsx(Divider, { orientation: "horizontal", flexItem: true }), analytic?.notebooks?.sort(safeStringPropertyCompare('detection')).map(n => (_jsx(Card, { variant: "outlined", sx: { p: 1, mb: 1 }, children: _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [_jsx(HowlerAvatar, { sx: { width: 24, height: 24, marginRight: '8px !important', marginLeft: '8px !important' }, userId: n.user }), _jsxs(Stack, { children: [_jsx(Stack, { direction: "row", alignItems: "center", spacing: 1, children: _jsx(Typography, { variant: "body1", children: n.name }) }), _jsx(Typography, { variant: "caption", children: _jsx("code", { children: n.value }) })] }), _jsx(FlexOne, {}), _jsx(Typography, { variant: "caption", children: n.detection ?? '' }), _jsx(HitNotebooks, { analytic: analytic, selectedNotebook: n.name }), (n?.user === user.username || user.roles?.includes('admin')) && (_jsx(Tooltip, { title: 'Remove', children: _jsx(IconButton, { onClick: () => onDelete(n.id), children: _jsx(Delete, {}) }) }))] }) }, n.id)))] }));
+};
+export default AnalyticNotebooks;

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

@@ -0,0 +1,8 @@
+import 'chartjs-adapter-moment';
+import type { Analytic } from '@cccsaurora/howler-ui/models/entities/generated/Analytic';
+import type { FC } from 'react';
+declare const AnalyticOverview: FC<{
+    analytic: Analytic;
+    setAnalytic: (a: Analytic) => void;
+}>;
+export default AnalyticOverview;

package/components/routes/analytics/AnalyticOverview.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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 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';
+import { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { sanitizeLuceneQuery } from '@cccsaurora/howler-ui/utils/stringUtils';
+import Assessment from './widgets/Assessment';
+import Created from './widgets/Created';
+import Detection from './widgets/Detection';
+import Escalation from './widgets/Escalation';
+import Status from './widgets/Status';
+const AnalyticOverview = ({ analytic, setAnalytic }) => {
+    const { t } = useTranslation();
+    const theme = useTheme();
+    const { dispatchApi } = useMyApi();
+    const isMd = useMediaQuery(theme.breakpoints.down('md'));
+    const { showSuccessMessage } = useMySnackbar();
+    const [loading, setLoading] = useState(true);
+    const [markdownLoading, setMarkdownLoading] = useState(false);
+    const [editing, setEditing] = useState(false);
+    const [empty, setEmpty] = useState(false);
+    const [editValue, setEditValue] = useState('');
+    useEffect(() => {
+        if (!analytic) {
+            return;
+        }
+        setLoading(true);
+        api.search.count.hit
+            .post({ query: `howler.analytic:"${sanitizeLuceneQuery(analytic.name)}"` })
+            .then(({ count }) => setEmpty(!count))
+            .finally(() => setLoading(false));
+    }, [analytic]);
+    const onEdit = useCallback(async () => {
+        try {
+            if (editing) {
+                setMarkdownLoading(true);
+                const result = await dispatchApi(api.analytic.put(analytic.analytic_id, { description: editValue }), {
+                    showError: true,
+                    throwError: true
+                });
+                setAnalytic(result);
+                showSuccessMessage(t('route.analytics.updated'));
+            }
+            else {
+                setEditValue(analytic.description);
+            }
+        }
+        finally {
+            setEditing(!editing);
+            setMarkdownLoading(false);
+        }
+    }, [analytic, dispatchApi, editValue, editing, setAnalytic, showSuccessMessage, t]);
+    return (_jsxs(_Fragment, { children: [_jsx(Divider, { flexItem: true, sx: { mt: 1 } }), _jsxs(Stack, { spacing: 2, direction: isMd ? 'column' : 'row', divider: _jsx(Divider, { orientation: isMd ? 'horizontal' : 'vertical', flexItem: true }), sx: { flex: 1, '& > div': { flex: 1 } }, children: [_jsxs(Box, { sx: { maxWidth: '50%', overflow: 'auto' }, children: [_jsxs(Typography, { variant: "h5", sx: { mt: 2, mb: 1, display: 'flex', flexDirection: 'row' }, children: [t('route.analytics.overview.description'), _jsx(IconButton, { sx: { marginLeft: 'auto' }, disabled: markdownLoading, onClick: onEdit, children: markdownLoading ? (_jsx(CircularProgress, { size: 20 })) : editing ? (_jsx(Check, { fontSize: "small" })) : (_jsx(Edit, { fontSize: "small" })) })] }), editing ? (_jsx(TextField, { value: editValue, onChange: e => setEditValue(e.target.value), fullWidth: true, multiline: true, minRows: 30, sx: { '& textarea': { fontFamily: 'monospace', fontSize: 13 } } })) : (_jsx(Markdown, { md: analytic?.description }))] }), _jsxs(Stack, { direction: "column", spacing: 2, children: [_jsx(Typography, { variant: "h5", sx: { mt: `${theme.spacing(2)} !important` }, children: t('route.analytics.overview.statistics') }), loading ? (_jsx(Skeleton, { variant: "rounded", width: "100%", height: "90px" })) : empty ? (_jsxs(Alert, { variant: "outlined", severity: "warning", children: [_jsx(AlertTitle, { children: t('route.analytics.overview.empty.title') }), t('route.analytics.overview.empty.description')] })) : (_jsxs(_Fragment, { children: [_jsx(Card, { children: _jsx(CardContent, { children: _jsx(Created, { analytic: analytic }) }) }), _jsx(Card, { children: _jsx(CardContent, { sx: { display: 'flex', justifyContent: 'center' }, children: _jsx(Escalation, { analytic: analytic }) }) }), _jsx(Card, { children: _jsx(CardContent, { children: _jsx(Assessment, { analytic: analytic }) }) }), _jsx(Card, { children: _jsx(CardContent, { children: _jsx(Status, { analytic: analytic }) }) }), _jsx(Card, { children: _jsx(CardContent, { children: _jsx(Detection, { analytic: analytic }) }) })] }))] })] })] }));
+};
+export default AnalyticOverview;

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

@@ -0,0 +1,7 @@
+import 'chartjs-adapter-moment';
+import type { Analytic } from '@cccsaurora/howler-ui/models/entities/generated/Analytic';
+import { type FC } from 'react';
+declare const AnalyticOverviews: FC<{
+    analytic: Analytic;
+}>;
+export default AnalyticOverviews;

package/components/routes/analytics/AnalyticOverviews.js

@@ -0,0 +1,39 @@
+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 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';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import OverviewCard from '../overviews/OverviewCard';
+const AnalyticOverviews = ({ analytic }) => {
+    const { t } = useTranslation();
+    const isNarrow = useMediaQuery('(max-width: 1800px)');
+    const { getOverviews, overviews } = useContext(OverviewContext);
+    const matchingOverviews = useMemo(() => overviews.filter(_overview => _overview.analytic === analytic?.name), [analytic?.name, overviews]);
+    const [loading, setLoading] = useState(false);
+    useEffect(() => {
+        setLoading(true);
+        getOverviews().finally(() => setLoading(false));
+    }, [getOverviews]);
+    if (!analytic) {
+        return _jsx(Skeleton, { variant: "rounded", width: "100%", sx: { minHeight: '300px', mt: 2 } });
+    }
+    return (_jsxs(Stack, { spacing: 1, position: "relative", children: [_jsxs(Fab, { component: Link, to: `/overviews/view?analytic=${analytic.name}`, variant: "extended", size: "large", color: "primary", sx: theme => ({
+                    textTransform: 'none',
+                    position: isNarrow ? 'fixed' : 'absolute',
+                    right: isNarrow ? theme.spacing(2) : `calc(100% + ${theme.spacing(5)})`,
+                    whiteSpace: 'nowrap',
+                    ...(isNarrow ? { bottom: theme.spacing(1) } : { top: theme.spacing(2) })
+                }), children: [_jsx(Article, { sx: { mr: 1 } }), _jsx(Typography, { children: t('route.overviews.create') })] }), loading && _jsx(Skeleton, { width: "100%", height: "175px" }), !loading && matchingOverviews.length < 1 && _jsx(AppListEmpty, {}), matchingOverviews.map(overview => (_jsx(Box, { component: Link, to: `/overviews/view?analytic=${overview.analytic}${overview.detection ? '&template=' + overview.detection : ''}`, sx: theme => ({
+                    textDecoration: 'none',
+                    '& > .MuiCard-root': {
+                        cursor: 'pointer',
+                        transition: theme.transitions.create('border-color'),
+                        '&:hover': { borderColor: 'primary.main' }
+                    }
+                }), children: _jsx(OverviewCard, { overview: overview }) }, overview.overview_id)))] }));
+};
+export default AnalyticOverviews;

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

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

package/components/routes/analytics/AnalyticSearch.js

@@ -0,0 +1,126 @@
+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 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';
+import HowlerAvatar from '@cccsaurora/howler-ui/components/elements/display/HowlerAvatar';
+import ItemManager from '@cccsaurora/howler-ui/components/elements/display/ItemManager';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
+import { useCallback, useContext, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
+import { sanitizeLuceneQuery } from '@cccsaurora/howler-ui/utils/stringUtils';
+const AnalyticSearchBase = () => {
+    const theme = useTheme();
+    const navigate = useNavigate();
+    const { t } = useTranslation();
+    const { dispatchApi } = useMyApi();
+    const { load } = useContext(TuiListMethodContext);
+    const [searchParams, setSearchParams] = useSearchParams();
+    const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
+    const 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);
+    // Search Handler.
+    const onSearch = useCallback(async () => {
+        setSearching(true);
+        setHasError(false);
+        if (phrase) {
+            searchParams.set('phrase', phrase);
+        }
+        else {
+            searchParams.delete('phrase');
+        }
+        setSearchParams(searchParams, { replace: true });
+        try {
+            const sanitizedPhrase = sanitizeLuceneQuery(phrase);
+            const _response = await dispatchApi(api.search.analytic.post({
+                query: `name:*${sanitizedPhrase}* OR detections:*${sanitizedPhrase}*` +
+                    (onlyRules > 0 ? ' AND _exists_:rule_type' : onlyRules < 0 ? ' AND -_exists_:rule_type' : ''),
+                rows: pageCount,
+                offset
+            }));
+            setResponse(_response);
+            load(_response.items.map(u => ({ id: u.analytic_id, item: u })));
+        }
+        catch (e) {
+            setHasError(true);
+        }
+        finally {
+            setSearching(false);
+        }
+    }, [dispatchApi, load, offset, onlyRules, pageCount, phrase, searchParams, setSearchParams]);
+    const onPageChange = useCallback((_offset) => {
+        if (_offset !== offset) {
+            searchParams.set('offset', _offset.toString());
+            setSearchParams(searchParams, { replace: true });
+            setOffset(_offset);
+        }
+    }, [offset, searchParams, setSearchParams]);
+    const onFavourite = useCallback(async (event, analytic) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (appUser.user?.favourite_analytics.includes(analytic.analytic_id)) {
+            await dispatchApi(removeFavourite(analytic));
+        }
+        else {
+            await dispatchApi(addFavourite(analytic));
+        }
+    }, [addFavourite, appUser.user?.favourite_analytics, dispatchApi, removeFavourite]);
+    // Effect to initialize list of users.
+    useEffect(() => {
+        onSearch();
+        if (!searchParams.has('offset')) {
+            searchParams.set('offset', '0');
+            setSearchParams(searchParams, { replace: true });
+        }
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [onlyRules]);
+    useEffect(() => {
+        if (response?.total <= offset) {
+            setOffset(0);
+            searchParams.set('offset', '0');
+            setSearchParams(searchParams, { replace: true });
+        }
+    }, [offset, response?.total, searchParams, setSearchParams]);
+    useEffect(() => {
+        if (!searching) {
+            onSearch();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [offset]);
+    // Search result list item renderer.
+    const renderer = useCallback(({ item }, classRenderer) => {
+        const filteredContributors = (item.item.contributors ?? []).filter(contributor => contributor !== item.item.owner);
+        return (_jsxs(Card, { onClick: () => navigate(`/analytics/${item.item.analytic_id}`), variant: "outlined", className: classRenderer(), sx: {
+                '&:hover': { borderColor: 'primary.main' },
+                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));
+    }, [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" }));
+};
+const AnalyticSearch = () => {
+    return (_jsx(TuiListProvider, { children: _jsx(AnalyticSearchBase, {}) }));
+};
+export default AnalyticSearch;

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

@@ -0,0 +1,7 @@
+import 'chartjs-adapter-moment';
+import type { Analytic } from '@cccsaurora/howler-ui/models/entities/generated/Analytic';
+import { type FC } from 'react';
+declare const AnalyticTemplates: FC<{
+    analytic: Analytic;
+}>;
+export default AnalyticTemplates;

package/components/routes/analytics/AnalyticTemplates.js

@@ -0,0 +1,40 @@
+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 AppListEmpty from '@cccsaurora/howler-ui/commons/components/display/AppListEmpty';
+import { TemplateContext } from '@cccsaurora/howler-ui/components/app/providers/TemplateProvider';
+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 [loading, setLoading] = useState(false);
+    useEffect(() => {
+        setLoading(true);
+        getTemplates().finally(() => setLoading(false));
+    }, [getTemplates]);
+    if (!analytic) {
+        return _jsx(Skeleton, { variant: "rounded", width: "100%", sx: { minHeight: '300px', mt: 2 } });
+    }
+    return (_jsxs(Stack, { spacing: 1, position: "relative", children: [_jsxs(Fab, { component: Link, to: `/templates/view?analytic=${analytic.name}`, variant: "extended", size: "large", color: "primary", sx: theme => ({
+                    textTransform: 'none',
+                    position: isNarrow ? 'fixed' : 'absolute',
+                    right: isNarrow ? theme.spacing(2) : `calc(100% + ${theme.spacing(5)})`,
+                    whiteSpace: 'nowrap',
+                    ...(isNarrow ? { bottom: theme.spacing(1) } : { top: theme.spacing(2) })
+                }), children: [_jsx(Article, { sx: { mr: 1 } }), _jsx(Typography, { children: t('route.templates.create') })] }), loading && _jsx(Skeleton, { width: "100%", height: "175px" }), !loading && templates.length < 1 && _jsx(AppListEmpty, {}), templates.map(template => (_jsx(Box, { component: Link, to: `/templates/view?analytic=${template.analytic}${template.detection ? '&template=' + template.detection : ''}&type=${template.type}`, sx: theme => ({
+                    textDecoration: 'none',
+                    '& > .MuiCard-root': {
+                        cursor: 'pointer',
+                        transition: theme.transitions.create('border-color'),
+                        '&:hover': { borderColor: 'primary.main' }
+                    }
+                }), children: _jsx(TemplateCard, { template: template }) }, template.template_id)))] }));
+};
+export default AnalyticTemplates;

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

@@ -0,0 +1,8 @@
+import 'chartjs-adapter-moment';
+import type { Analytic } from '@cccsaurora/howler-ui/models/entities/generated/Analytic';
+import type { FC } from 'react';
+declare const RuleView: FC<{
+    analytic: Analytic;
+    setAnalytic: (a: Analytic) => void;
+}>;
+export default RuleView;