@cccsaurora/howler-ui 2.12.0-dev.30

package/dist/components/routes/home/AnalyticCard.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CenterFocusWeak, OpenInNew } from '@mui/icons-material';
+import { Box, Card, CardContent, IconButton, Skeleton, Stack, Tooltip, Typography } from '@mui/material';
+import { AnalyticContext } from 'components/app/providers/AnalyticProvider';
+import FlexOne from 'components/elements/addons/layout/FlexOne';
+import { useContext, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import Assessment from '../analytics/widgets/Assessment';
+import Created from '../analytics/widgets/Created';
+import Detection from '../analytics/widgets/Detection';
+import Escalation from '../analytics/widgets/Escalation';
+import Status from '../analytics/widgets/Status';
+const AnalyticCard = ({ analyticId, type }) => {
+    const { t } = useTranslation();
+    const [analytic, setAnalytic] = useState(null);
+    const { getAnalyticFromId } = useContext(AnalyticContext);
+    const chartRef = useRef();
+    useEffect(() => {
+        getAnalyticFromId(analyticId).then(setAnalytic);
+    }, [analyticId, getAnalyticFromId]);
+    return (_jsx(Card, { variant: "outlined", sx: { height: '100%' }, children: _jsxs(CardContent, { sx: { height: '100%' }, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Typography, { variant: "h6", children: analytic?.name ?? _jsx(Skeleton, { variant: "text", height: "2em", width: "100px" }) }), _jsx(IconButton, { size: "small", component: Link, to: `/analytics/${analytic?.analytic_id}`, children: _jsx(OpenInNew, { fontSize: "small" }) }), _jsx(FlexOne, {}), !['assessment', 'escalation'].includes(type) && (_jsx(Tooltip, { title: t('hit.summary.zoom.reset'), children: _jsx(IconButton, { onClick: () => chartRef.current?.resetZoom(), children: _jsx(CenterFocusWeak, {}) }) }))] }), {
+                    assessment: () => _jsx(Assessment, { ref: chartRef, analytic: analytic }),
+                    created: () => _jsx(Created, { ref: chartRef, analytic: analytic }),
+                    status: () => _jsx(Status, { ref: chartRef, analytic: analytic }),
+                    detection: () => _jsx(Detection, { ref: chartRef, analytic: analytic }),
+                    escalation: () => (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center' }, children: _jsx(Escalation, { analytic: analytic, maxWidth: "80%" }) }))
+                }[type]()] }) }));
+};
+export default AnalyticCard;

package/dist/components/routes/home/EntryWrapper.d.ts

@@ -0,0 +1,7 @@
+import type { FC, PropsWithChildren } from 'react';
+declare const EntryWrapper: FC<PropsWithChildren<{
+    editing: boolean;
+    id: string;
+    onDelete?: () => void;
+}>>;
+export default EntryWrapper;

package/dist/components/routes/home/EntryWrapper.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { Delete } from '@mui/icons-material';
+import { Box, Grid, IconButton } from '@mui/material';
+const EntryWrapper = ({ editing, id, children, onDelete }) => {
+    const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id, disabled: !editing });
+    return (_jsxs(Grid, { item: true, ref: setNodeRef, xs: 12, md: 6, sx: { position: 'relative' }, style: { transform: CSS.Translate.toString(transform), transition }, children: [editing && (_jsxs(_Fragment, { children: [_jsx(IconButton, { color: "error", sx: theme => ({ position: 'absolute', top: theme.spacing(2), right: theme.spacing(1), zIndex: 10 }), onClick: onDelete, children: _jsx(Delete, { fontSize: "small" }) }), _jsx(Box, { ...attributes, ...listeners, sx: {
+                            zIndex: 9,
+                            position: 'absolute',
+                            backgroundColor: 'background.paper',
+                            opacity: 0.5,
+                            top: 0,
+                            bottom: 0,
+                            left: 0,
+                            right: 0
+                        } })] })), children] }));
+};
+export default EntryWrapper;

package/dist/components/routes/home/ViewCard.d.ts

@@ -0,0 +1,7 @@
+import type { FC } from 'react';
+export interface ViewSettings {
+    viewId: string;
+    limit: number;
+}
+declare const ViewCard: FC<ViewSettings>;
+export default ViewCard;

package/dist/components/routes/home/ViewCard.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import { Card, CardContent, IconButton, Skeleton, Stack, Typography } from '@mui/material';
+import api from 'api';
+import AppListEmpty from 'commons/components/display/AppListEmpty';
+import { ViewContext } from 'components/app/providers/ViewProvider';
+import HitBanner from 'components/elements/hit/HitBanner';
+import { HitLayout } from 'components/elements/hit/HitLayout';
+import useMyApi from 'components/hooks/useMyApi';
+import { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { useContextSelector } from 'use-context-selector';
+const ViewCard = ({ viewId, limit }) => {
+    const navigate = useNavigate();
+    const { t } = useTranslation();
+    const { dispatchApi } = useMyApi();
+    const [hits, setHits] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const view = useContextSelector(ViewContext, ctx => ctx.views?.find(_view => _view.view_id === viewId));
+    useEffect(() => {
+        if (!view?.query) {
+            return;
+        }
+        const timeout = setTimeout(() => setLoading(true), 200);
+        dispatchApi(api.search.hit.post({
+            query: view.query,
+            rows: limit
+        }))
+            .then(res => setHits(res.items ?? []))
+            .finally(() => {
+            clearTimeout(timeout);
+            setLoading(false);
+        });
+    }, [dispatchApi, limit, view?.query]);
+    const onClick = useCallback((query) => navigate('/hits?query=' + query), [navigate]);
+    return (_jsx(Card, { variant: "outlined", sx: { height: '100%' }, children: _jsxs(Stack, { spacing: 1, sx: { p: 1, minHeight: 100 }, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Typography, { variant: "h6", children: t(view?.title) || _jsx(Skeleton, { variant: "text", height: "2em", width: "100px" }) }), _jsx(IconButton, { size: "small", onClick: () => onClick(view.query), children: _jsx(OpenInNewIcon, { fontSize: "small" }) })] }), loading ? (_jsxs(_Fragment, { children: [_jsx(Skeleton, { height: 150, width: "100%", variant: "rounded" }), _jsx(Skeleton, { height: 160, width: "100%", variant: "rounded" }), _jsx(Skeleton, { height: 140, width: "100%", variant: "rounded" })] })) : hits.length > 0 ? (hits.map(h => (_jsx(Card, { variant: "outlined", sx: { cursor: 'pointer' }, onClick: () => navigate((h.howler.is_bundle ? '/bundles/' : '/hits/') + h.howler.id), children: _jsx(CardContent, { children: _jsx(HitBanner, { layout: HitLayout.DENSE, hit: h }) }) }, h.howler.id)))) : (_jsx(AppListEmpty, {}))] }) }));
+};
+export default ViewCard;

package/dist/components/routes/home/index.d.ts

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

package/dist/components/routes/home/index.js

@@ -0,0 +1,121 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DndContext, KeyboardSensor, PointerSensor, closestCenter, useSensor, useSensors } from '@dnd-kit/core';
+import { SortableContext, arrayMove, sortableKeyboardCoordinates } from '@dnd-kit/sortable';
+import { Cancel, Check, Close, Edit, OpenInNew } from '@mui/icons-material';
+import { Alert, AlertTitle, CircularProgress, Grid, IconButton, Stack, Typography } from '@mui/material';
+import api from 'api';
+import { AppBrand } from 'branding/AppBrand';
+import { useAppUser } from 'commons/components/app/hooks';
+import PageCenter from 'commons/components/pages/PageCenter';
+import CustomButton from 'components/elements/addons/buttons/CustomButton';
+import { useMyLocalStorageItem } from 'components/hooks/useMyLocalStorage';
+import useMyUserFunctions from 'components/hooks/useMyUserFunctions';
+import isEqual from 'lodash-es/isEqual';
+import moment from 'moment';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import { StorageKey } from 'utils/constants';
+import AddNewCard from './AddNewCard';
+import AnalyticCard, {} from './AnalyticCard';
+import EntryWrapper from './EntryWrapper';
+import ViewCard, {} from './ViewCard';
+const LUCENE_DATE_FMT = 'YYYY-MM-DD[T]HH:mm:ss';
+const Home = () => {
+    const { t } = useTranslation();
+    const { user, setUser } = useAppUser();
+    const { setDashboard } = useMyUserFunctions();
+    const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+    const [lastViewed, setLastViewed] = useMyLocalStorageItem(StorageKey.LAST_VIEW, moment().utc().format(LUCENE_DATE_FMT));
+    const [loading, setLoading] = useState(false);
+    const [isEditing, setIsEditing] = useState(false);
+    const [updatedHitTotal, setUpdatedHitTotal] = useState(0);
+    const [dashboard, setStateDashboard] = useState(user.dashboard ?? []);
+    const updateQuery = useMemo(() => `(howler.log.user:${user.username} OR howler.assignment:${user.username}) AND howler.log.timestamp:{${lastViewed} TO now} AND -howler.status:resolved`, [lastViewed, user.username]);
+    const getIdFromEntry = useCallback((entry) => {
+        const settings = JSON.parse(entry.config);
+        if (entry.type === 'analytic') {
+            return `${settings.analyticId}-${settings.type}`;
+        }
+        else if (entry.type === 'view') {
+            return settings.viewId;
+        }
+        else {
+            return 'unknown';
+        }
+    }, []);
+    const setLocalDashboard = useCallback((_dashboard) => {
+        setStateDashboard(_dashboard);
+    }, []);
+    const saveChanges = useCallback(async () => {
+        setLoading(true);
+        try {
+            setUser({
+                ...user,
+                dashboard
+            });
+            await setDashboard(dashboard ?? []);
+            setIsEditing(false);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [dashboard, setDashboard, setUser, user]);
+    const discardChanges = useCallback(() => {
+        setStateDashboard(user.dashboard);
+        setIsEditing(false);
+    }, [user.dashboard]);
+    const handleDragEnd = useCallback((event) => {
+        const { active, over } = event;
+        if (active.id !== over.id) {
+            const oldIndex = (dashboard ?? []).findIndex(entry => getIdFromEntry(entry) === active.id);
+            const newIndex = (dashboard ?? []).findIndex(entry => getIdFromEntry(entry) === over.id);
+            setLocalDashboard(arrayMove(dashboard, oldIndex, newIndex));
+        }
+    }, [dashboard, getIdFromEntry, setLocalDashboard]);
+    useEffect(() => {
+        api.search.hit
+            .post({
+            query: updateQuery,
+            rows: 5
+        })
+            .then(result => setUpdatedHitTotal(result.total));
+    }, [updateQuery]);
+    return (_jsx(PageCenter, { maxWidth: "1800px", textAlign: "left", height: "100%", children: _jsxs(Stack, { direction: "column", spacing: 1, sx: { height: '100%' }, children: [_jsxs(Stack, { direction: "row", justifyContent: "end", spacing: 1, children: [isEditing && (_jsx(CustomButton, { variant: "outlined", size: "small", color: "error", startIcon: _jsx(Cancel, {}), onClick: discardChanges, children: t('cancel') })), _jsx(CustomButton, { variant: "outlined", size: "small", disabled: isEditing && isEqual(dashboard, user.dashboard), color: isEditing ? 'success' : 'primary', startIcon: isEditing ? loading ? _jsx(CircularProgress, { size: 20 }) : _jsx(Check, {}) : _jsx(Edit, {}), onClick: () => (!isEditing ? setIsEditing(true) : saveChanges()), children: t(isEditing ? 'save' : 'edit') })] }), updatedHitTotal > 0 && (_jsxs(Alert, { severity: "info", variant: "outlined", action: _jsxs(Stack, { spacing: 1, direction: "row", children: [_jsx(IconButton, { color: "info", component: Link, to: `/hits?query=${encodeURIComponent(updateQuery)}`, onClick: () => setLastViewed(moment().utc().format(LUCENE_DATE_FMT)), children: _jsx(OpenInNew, {}) }), _jsx(IconButton, { color: "info", onClick: () => {
+                                    setLastViewed(moment().utc().format(LUCENE_DATE_FMT));
+                                    setUpdatedHitTotal(0);
+                                }, children: _jsx(Close, {}) })] }), children: [_jsx(AlertTitle, { children: t('route.home.alert.updated.title') }), t('route.home.alert.updated.description', { count: updatedHitTotal })] })), _jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: (dashboard ?? []).map(entry => getIdFromEntry(entry)), children: _jsxs(Grid, { container: true, spacing: 1, alignItems: "stretch", sx: [
+                                theme => ({
+                                    marginLeft: `${theme.spacing(-1)} !important`
+                                }),
+                                !dashboard?.length &&
+                                    !isEditing && {
+                                    height: '100%',
+                                    display: 'flex',
+                                    alignItems: 'center'
+                                }
+                            ], children: [(dashboard ?? []).map(entry => {
+                                    if (entry.type === 'view') {
+                                        const settings = JSON.parse(entry.config);
+                                        return (_jsx(EntryWrapper, { editing: isEditing, id: settings.viewId, onDelete: () => setLocalDashboard((dashboard ?? []).filter(_entry => _entry.entry_id !== getIdFromEntry(entry))), children: _jsx(ViewCard, { ...settings }, entry.config) }, entry.entry_id));
+                                    }
+                                    else if (entry.type === 'analytic') {
+                                        const settings = JSON.parse(entry.config);
+                                        return (_jsx(EntryWrapper, { editing: isEditing, id: getIdFromEntry(entry), onDelete: () => setLocalDashboard((dashboard ?? []).filter(_entry => _entry.entry_id !== getIdFromEntry(entry))), children: _jsx(AnalyticCard, { ...settings }, entry.config) }, entry.entry_id));
+                                    }
+                                    else {
+                                        return null;
+                                    }
+                                }), isEditing && (_jsx(AddNewCard, { dashboard: dashboard, addCard: newCard => setStateDashboard(_dashboard => [...(_dashboard ?? []), newCard]) })), !dashboard?.length && !isEditing && (_jsx(Grid, { item: true, xs: 12, children: _jsxs(Stack, { direction: "column", spacing: 2, sx: theme => ({
+                                            height: '60vh',
+                                            borderStyle: 'dashed',
+                                            borderColor: theme.palette.text.secondary,
+                                            borderWidth: '1rem',
+                                            borderRadius: '1rem',
+                                            opacity: 0.3,
+                                            justifyContent: 'center',
+                                            alignItems: 'center',
+                                            padding: 3
+                                        }), children: [_jsx(Typography, { variant: "h1", sx: { display: 'flex', alignItems: 'center' }, children: _jsxs(Stack, { direction: "row", spacing: 2.5, children: [_jsx(AppBrand, { application: "howler", variant: "logo", size: "large" }), _jsx("span", { children: t('route.home.title') })] }) }), _jsx(Typography, { variant: "h4", sx: { textAlign: 'center' }, children: t('route.home.description') })] }) }))] }) }) })] }) }));
+};
+export default Home;

package/dist/components/routes/overviews/OverviewCard.d.ts

@@ -0,0 +1,8 @@
+import type { Overview } from 'models/entities/generated/Overview';
+import type { FC } from 'react';
+declare const OverviewCard: FC<{
+    overview: Overview;
+    className?: string;
+    onDelete?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, id: string) => void;
+}>;
+export default OverviewCard;

package/dist/components/routes/overviews/OverviewCard.js

@@ -0,0 +1,16 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Delete } from '@mui/icons-material';
+import { Card, IconButton, Stack, Tooltip, Typography } from '@mui/material';
+import FlexOne from 'components/elements/addons/layout/FlexOne';
+import HowlerAvatar from 'components/elements/display/HowlerAvatar';
+import { useTranslation } from 'react-i18next';
+const OverviewCard = ({ overview, className, onDelete }) => {
+    const { t } = useTranslation();
+    return (_jsx(Card, { variant: "outlined", sx: { p: 1, mb: 1 }, className: className, children: _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [_jsxs(Stack, { children: [_jsxs(Typography, { variant: "body1", children: [t(overview.analytic), " - ", t(overview.detection ?? 'all')] }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: _jsx("code", { children: _jsx("pre", { children: overview.content
+                                        .split('\n')
+                                        .filter(line => !!line)
+                                        .slice(0, 3)
+                                        .map(content => content.replace(/(.{,64}).+/, '$1'))
+                                        .join('\n') }) }) })] }), _jsx(FlexOne, {}), _jsx(HowlerAvatar, { sx: { height: '24px', width: '24px' }, userId: overview.owner }), onDelete && (_jsx(Tooltip, { title: t('route.overviews.manager.delete'), children: _jsx(IconButton, { onClick: e => onDelete(e, overview.overview_id), children: _jsx(Delete, {}) }) }))] }) }, overview.overview_id));
+};
+export default OverviewCard;

package/dist/components/routes/overviews/OverviewEditor.d.ts

@@ -0,0 +1,12 @@
+import type { editor } from 'monaco-editor';
+interface OverviewEditorProps {
+    content: string;
+    setContent: (content: string) => void;
+    onMount?: () => void;
+    fontSize?: number;
+    height?: string;
+    width?: string;
+    editorOptions?: editor.IStandaloneEditorConstructionOptions;
+}
+declare const _default: import("react").NamedExoticComponent<OverviewEditorProps>;
+export default _default;

package/dist/components/routes/overviews/OverviewEditor.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMonaco } from '@monaco-editor/react';
+import { useTheme } from '@mui/material';
+import { ApiConfigContext } from 'components/app/providers/ApiConfigProvider';
+import ThemedEditor from 'components/elements/ThemedEditor';
+import { memo, useCallback, useContext, useEffect, useMemo } from 'react';
+import { conf, language } from './markdownExtendedTokenProvider';
+const OverviewEditor = ({ content, setContent, onMount, fontSize = 16, height = '100%', width = '100%', editorOptions = {} }) => {
+    const theme = useTheme();
+    const monaco = useMonaco();
+    const { config } = useContext(ApiConfigContext);
+    const beforeEditorMount = useCallback((_monaco) => {
+        _monaco.languages.register({ id: 'markdown-extended' });
+        _monaco.languages.setLanguageConfiguration('markdown-extended', conf);
+        _monaco.languages.setMonarchTokensProvider('markdown-extended', language);
+    }, []);
+    useEffect(() => {
+        if (!monaco) {
+            return;
+        }
+        monaco.editor.getModels().forEach(model => model.setEOL(monaco.editor.EndOfLineSequence.LF));
+        if (monaco.languages.getLanguages().some(lang => lang.id === 'markdown-extended')) {
+            // Set the parsers
+            const confDisposable = monaco.languages.setLanguageConfiguration('markdown-extended', conf);
+            const languageDisposable = monaco.languages.setMonarchTokensProvider('markdown-extended', language);
+            return () => {
+                confDisposable?.dispose();
+                languageDisposable?.dispose();
+            };
+        }
+    }, [config.lookups, monaco]);
+    useEffect(() => {
+        if (!monaco) {
+            return;
+        }
+        const disposable = monaco.editor.onDidCreateModel(model => {
+            monaco.editor.setModelLanguage(model, 'markdown-extended');
+        });
+        monaco.editor.getModels().forEach(model => {
+            monaco.editor.setModelLanguage(model, 'markdown-extended');
+        });
+        return disposable.dispose;
+    }, [monaco]);
+    const options = useMemo(() => ({
+        fontSize,
+        bracketPairColorization: {
+            enabled: false
+        },
+        scrollbar: {
+            horizontal: 'auto'
+        },
+        ...editorOptions
+    }), [fontSize, editorOptions]);
+    return (_jsx(ThemedEditor, { height: height, width: width, theme: theme.palette.mode === 'light' ? 'howler' : 'howler-dark', value: content, onChange: value => setContent(value), beforeMount: beforeEditorMount, onMount: onMount, options: options }));
+};
+export default memo(OverviewEditor);

package/dist/components/routes/overviews/OverviewViewer.d.ts

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

package/dist/components/routes/overviews/OverviewViewer.js

@@ -0,0 +1,217 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Autocomplete, Box, Button, CircularProgress, Divider, FormControl, LinearProgress, Stack, TextField, Tooltip, useTheme } from '@mui/material';
+import api from 'api';
+import PageCenter from 'commons/components/pages/PageCenter';
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Check, Delete, SsidChart } from '@mui/icons-material';
+import AppInfoPanel from 'commons/components/display/AppInfoPanel';
+import { AnalyticContext } from 'components/app/providers/AnalyticProvider';
+import { OverviewContext } from 'components/app/providers/OverviewProvider';
+import HitOverview from 'components/elements/hit/HitOverview';
+import useMyApi from 'components/hooks/useMyApi';
+import { useSearchParams } from 'react-router-dom';
+import hitsData from 'utils/hit.json';
+import { sanitizeLuceneQuery } from 'utils/stringUtils';
+import OverviewEditor from './OverviewEditor';
+import { startingTemplate } from './startingTemplate';
+const OverviewViewer = () => {
+    const theme = useTheme();
+    const { t } = useTranslation();
+    const [params, setParams] = useSearchParams();
+    const { getOverviews } = useContext(OverviewContext);
+    const { dispatchApi } = useMyApi();
+    const [overviewList, setOverviewList] = useState([]);
+    const [selectedOverview, setSelectedOverview] = useState(null);
+    const [content, setContent] = useState('');
+    const [analytics, setAnalytics] = useState([]);
+    const [detections, setDetections] = useState([]);
+    const [analytic, setAnalytic] = useState(params.get('analytic') ?? '');
+    const [detection, setDetection] = useState(params.get('detection') ?? 'ANY');
+    const [loading, setLoading] = useState(false);
+    const [overviewLoading, setOverviewLoading] = useState(false);
+    const [exampleHit, setExampleHit] = useState(null);
+    const [x, setX] = useState(0);
+    const analyticContext = useContext(AnalyticContext);
+    const wrapper = useRef();
+    useEffect(() => {
+        (async () => {
+            setLoading(true);
+            try {
+                setOverviewList(await getOverviews(true));
+                const analyticsResult = await dispatchApi(api.search.analytic.post({ query: 'analytic_id:*', rows: 1000 }), {
+                    logError: false,
+                    showError: true,
+                    throwError: true
+                });
+                const _analytics = analyticsResult.items;
+                if (!_analytics.some(_analytic => _analytic.name.toLowerCase() === analytic.toLowerCase())) {
+                    setAnalytic('');
+                }
+                setAnalytics(_analytics);
+            }
+            finally {
+                setLoading(false);
+            }
+        })();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [analytic, dispatchApi]);
+    useEffect(() => {
+        if (analytic) {
+            setLoading(true);
+            analyticContext
+                .getAnalyticFromName(analytic)
+                .then(foundAnalytic => {
+                setDetections(foundAnalytic.detections);
+            })
+                .catch(() => {
+                setDetection('ANY');
+            })
+                .finally(() => setLoading(false));
+        }
+    }, [analytic, analyticContext, detection, dispatchApi, params, setParams]);
+    useEffect(() => {
+        (async () => {
+            const result = await dispatchApi(api.search.hit.post({
+                query: `howler.analytic:"${sanitizeLuceneQuery(analytic)}"` +
+                    (!!detection && detection !== 'ANY' ? ` AND howler.detection:"${sanitizeLuceneQuery(detection)}"` : ''),
+                rows: 1,
+                fl: '*'
+            }), { throwError: false, showError: false, logError: false });
+            if (result?.items[0]) {
+                setExampleHit(result.items[0]);
+                return;
+            }
+            const _hit = hitsData.GET[Object.keys(hitsData.GET)[0]];
+            if (analytic) {
+                _hit.howler.analytic = analytic;
+            }
+            if (detection) {
+                _hit.howler.detection = detection;
+            }
+            setExampleHit(_hit);
+        })();
+    }, [analytic, detection, dispatchApi]);
+    useEffect(() => {
+        if (analytic && detection) {
+            const overview = overviewList.find(_overview => _overview.analytic === analytic &&
+                ((detection === 'ANY' && !_overview.detection) || _overview.detection === detection));
+            if (overview) {
+                setSelectedOverview(overview);
+                setContent(overview.content);
+            }
+            else {
+                setSelectedOverview(null);
+                setContent('');
+            }
+        }
+    }, [analytic, detection, overviewList]);
+    useEffect(() => {
+        if (analytic) {
+            params.set('analytic', analytic);
+        }
+        else {
+            params.delete('analytic');
+        }
+        if (detection && detection !== 'ANY') {
+            params.set('detection', detection);
+        }
+        else {
+            params.delete('detection');
+        }
+        params.sort();
+        setParams(params, {
+            replace: true
+        });
+    }, [analytic, detection, params, setParams]);
+    const onDelete = useCallback(async () => {
+        await dispatchApi(api.overview.del(selectedOverview.overview_id), {
+            logError: false,
+            showError: true,
+            throwError: false
+        });
+        setSelectedOverview(null);
+        setContent('');
+    }, [dispatchApi, selectedOverview?.overview_id]);
+    const onSave = useCallback(async () => {
+        if (analytic && detection) {
+            try {
+                setOverviewLoading(true);
+                const result = await dispatchApi(selectedOverview
+                    ? api.overview.put(selectedOverview.overview_id, content)
+                    : api.overview.post({
+                        analytic,
+                        detection: detection !== 'ANY' ? detection : null,
+                        content
+                    }), {
+                    logError: false,
+                    showError: true,
+                    throwError: true
+                });
+                setSelectedOverview(result);
+                const newList = [result, ...overviewList];
+                setOverviewList(newList.filter((v1, i) => newList.findIndex(v2 => v1.overview_id === v2.overview_id) === i));
+            }
+            finally {
+                setOverviewLoading(false);
+            }
+        }
+    }, [analytic, detection, dispatchApi, selectedOverview, content, overviewList]);
+    const onMouseMove = useCallback((event) => {
+        const wrapperRect = wrapper.current?.getBoundingClientRect();
+        const offset = event.clientX - (wrapperRect.left + wrapperRect.width / 2);
+        setX(offset);
+    }, []);
+    const onMouseUp = useCallback(() => {
+        window.removeEventListener('mousemove', onMouseMove);
+        window.removeEventListener('mouseup', onMouseUp);
+    }, [onMouseMove]);
+    const onMouseDown = useCallback(() => {
+        window.addEventListener('mousemove', onMouseMove);
+        window.addEventListener('mouseup', onMouseUp);
+    }, [onMouseMove, onMouseUp]);
+    const analyticOrDetectionMissing = useMemo(() => !analytic || !detection, [analytic, detection]);
+    const noChange = useMemo(() => selectedOverview?.content === content, [content, selectedOverview?.content]);
+    return (_jsxs(PageCenter, { maxWidth: "100%", width: "100%", textAlign: "left", height: "100%", children: [_jsx(LinearProgress, { sx: { mb: 1, opacity: +loading } }), _jsxs(Stack, { direction: "column", spacing: 2, divider: _jsx(Divider, { orientation: "horizontal", flexItem: true }), height: "100%", children: [_jsxs(Stack, { direction: "row", spacing: 2, mb: 2, alignItems: "stretch", children: [_jsx(FormControl, { sx: { maxWidth: { sm: '300px', lg: '450px' }, width: '100%' }, children: _jsx(Autocomplete, { id: "analytic", options: analytics.sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase())), getOptionLabel: option => option.name, value: analytics.find(a => a.name === analytic) || null, onChange: (_event, newValue) => setAnalytic(newValue ? newValue.name : ''), renderInput: autocompleteAnalyticParams => (_jsx(TextField, { ...autocompleteAnalyticParams, label: t('route.overviews.analytic'), size: "small" })) }) }), !analytics.find(_analytic => _analytic.name === analytic)?.rule ? (_jsx(FormControl, { sx: { minWidth: { sm: '200px' } }, disabled: !analytic, children: _jsx(Autocomplete, { id: "detection", options: ['ANY', ...detections.sort()], getOptionLabel: option => option, value: detection ?? '', onChange: (_event, newValue) => setDetection(newValue), renderInput: autocompleteDetectionParams => (_jsx(TextField, { ...autocompleteDetectionParams, label: t('route.overviews.detection'), size: "small" })) }) })) : (_jsx(Tooltip, { title: t('route.overviews.rule.explanation'), children: _jsx(SsidChart, { color: "info", sx: { alignSelf: 'center' } }) })), selectedOverview && (_jsx(Button, { variant: "outlined", startIcon: _jsx(Delete, {}), onClick: onDelete, children: t('button.delete') })), _jsx(Button, { variant: "outlined", disabled: analyticOrDetectionMissing || noChange, startIcon: overviewLoading ? _jsx(CircularProgress, { size: 16 }) : _jsx(Check, {}), onClick: onSave, children: t(!analyticOrDetectionMissing && !noChange ? 'button.save' : 'button.saved') })] }), analyticOrDetectionMissing ? (_jsx(AppInfoPanel, { i18nKey: "route.overviews.select", sx: { width: '100%', alignSelf: 'start' } })) : (_jsxs(Stack, { ref: wrapper, direction: "row", spacing: 1, height: "100%", onKeyDown: e => {
+                            if (e.ctrlKey && e.key === 's') {
+                                if (!noChange) {
+                                    onSave();
+                                }
+                                e.preventDefault();
+                            }
+                        }, sx: { position: 'relative' }, children: [_jsx(Box, { flex: 1, position: "relative", height: "100%", children: _jsx(Box, { flex: 1, sx: {
+                                        position: 'absolute',
+                                        top: 0,
+                                        left: 0,
+                                        bottom: 0,
+                                        right: `calc(50% + 7px - ${x}px)`,
+                                        mr: -2.4,
+                                        pr: 1.5
+                                    }, children: _jsx(OverviewEditor, { height: "100%", content: content, setContent: setContent }) }) }), _jsx(Box, { sx: {
+                                    position: 'absolute',
+                                    top: 0,
+                                    bottom: 0,
+                                    left: 'calc(50% - 5px)',
+                                    width: '10px',
+                                    backgroundColor: theme.palette.divider,
+                                    cursor: 'col-resize',
+                                    transform: `translateX(${x}px)`,
+                                    zIndex: 1000,
+                                    borderRadius: theme.shape.borderRadius
+                                }, onMouseDown: onMouseDown }), _jsx(Box, { flex: 1, px: 2, sx: {
+                                    position: 'absolute',
+                                    top: 0,
+                                    left: `calc(50% + 7px + ${x}px)`,
+                                    bottom: 0,
+                                    right: 0,
+                                    display: 'flex',
+                                    alignItems: 'stretch',
+                                    justifyContent: 'stretch',
+                                    px: 1,
+                                    pt: 1,
+                                    mt: -1,
+                                    '& > *': { width: '100%' },
+                                    '& > div > :first-child': { mt: 0 }
+                                }, children: _jsx(HitOverview, { content: content || startingTemplate(), hit: exampleHit }) })] }))] })] }));
+};
+export default OverviewViewer;

package/dist/components/routes/overviews/Overviews.d.ts

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