@cccsaurora/howler-ui 2.14.0-dev.269 → 2.14.0-dev.272

package/components/routes/hits/search/shared/SearchSpan.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Autocomplete, TextField } from '@mui/material';
+import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
+import { ViewContext } from '@cccsaurora/howler-ui/components/app/providers/ViewProvider';
+import { memo, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLocation } from 'react-router-dom';
+import { useContextSelector } from 'use-context-selector';
+import { convertLuceneToDate } from '@cccsaurora/howler-ui/utils/utils';
+const DATE_RANGES = [
+    'date.range.1.day',
+    'date.range.3.day',
+    'date.range.1.week',
+    'date.range.1.month',
+    'date.range.all',
+    'date.range.custom'
+];
+const SearchSpan = ({ omitCustom = false, size }) => {
+    const { t } = useTranslation();
+    const location = useLocation();
+    const span = useContextSelector(ParameterContext, ctx => ctx.span);
+    const setSpan = useContextSelector(ParameterContext, ctx => ctx.setSpan);
+    const getCurrentView = useContextSelector(ViewContext, ctx => ctx.getCurrentView);
+    useEffect(() => {
+        if (location.search.includes('span')) {
+            return;
+        }
+        (async () => {
+            const viewSpan = (await getCurrentView({ lazy: true }))?.span;
+            if (!viewSpan) {
+                return;
+            }
+            if (viewSpan.includes(':')) {
+                setSpan(convertLuceneToDate(viewSpan));
+            }
+            else {
+                setSpan(viewSpan);
+            }
+        })();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [getCurrentView]);
+    return (_jsx(Autocomplete, { fullWidth: true, sx: { minWidth: '200px', flex: 1 }, size: size ?? 'small', value: span, options: omitCustom ? DATE_RANGES.slice(0, DATE_RANGES.length - 1) : DATE_RANGES, renderInput: _params => _jsx(TextField, { ..._params, label: t('hit.search.span') }), getOptionLabel: option => t(option), onChange: (_, value) => setSpan(value), disableClearable: true }));
+};
+export default memo(SearchSpan);

package/components/routes/hits/view/HitViewer.d.ts

@@ -0,0 +1,7 @@
+import type { FC } from 'react';
+export declare enum Orientation {
+    VERTICAL = "vertical",
+    HORIZONTAL = "horizontal"
+}
+declare const HitViewer: FC;
+export default HitViewer;

package/components/routes/hits/view/HitViewer.js

@@ -0,0 +1,162 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from '@iconify/react/dist/iconify.js';
+import { Code, Comment, DataObject, History, LinkSharp, QueryStats, ViewAgenda } from '@mui/icons-material';
+import { Badge, Box, CardContent, Collapse, IconButton, Skeleton, Stack, Tab, Tabs, Tooltip, useMediaQuery, useTheme } from '@mui/material';
+import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
+import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
+import { HitContext } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
+import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';
+import HowlerCard from '@cccsaurora/howler-ui/components/elements/display/HowlerCard';
+import BundleButton from '@cccsaurora/howler-ui/components/elements/display/icons/BundleButton';
+import SocketBadge from '@cccsaurora/howler-ui/components/elements/display/icons/SocketBadge';
+import JSONViewer from '@cccsaurora/howler-ui/components/elements/display/json/JSONViewer';
+import HitActions from '@cccsaurora/howler-ui/components/elements/hit/HitActions';
+import HitBanner from '@cccsaurora/howler-ui/components/elements/hit/HitBanner';
+import HitComments from '@cccsaurora/howler-ui/components/elements/hit/HitComments';
+import HitDetails from '@cccsaurora/howler-ui/components/elements/hit/HitDetails';
+import HitLabels from '@cccsaurora/howler-ui/components/elements/hit/HitLabels';
+import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
+import HitNotebooks from '@cccsaurora/howler-ui/components/elements/hit/HitNotebooks';
+import HitOutline from '@cccsaurora/howler-ui/components/elements/hit/HitOutline';
+import HitOverview from '@cccsaurora/howler-ui/components/elements/hit/HitOverview';
+import HitRelated from '@cccsaurora/howler-ui/components/elements/hit/HitRelated';
+import HitWorklog from '@cccsaurora/howler-ui/components/elements/hit/HitWorklog';
+import PivotLink from '@cccsaurora/howler-ui/components/elements/hit/related/PivotLink';
+import RelatedLink from '@cccsaurora/howler-ui/components/elements/hit/related/RelatedLink';
+import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
+import useMyUserList from '@cccsaurora/howler-ui/components/hooks/useMyUserList';
+import uniqBy from 'lodash-es/uniqBy';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate, useParams } from 'react-router-dom';
+import { useContextSelector } from 'use-context-selector';
+import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
+import { getUserList } from '@cccsaurora/howler-ui/utils/hitFunctions';
+import { tryParse } from '@cccsaurora/howler-ui/utils/utils';
+import LeadRenderer from './LeadRenderer';
+export var Orientation;
+(function (Orientation) {
+    Orientation["VERTICAL"] = "vertical";
+    Orientation["HORIZONTAL"] = "horizontal";
+})(Orientation || (Orientation = {}));
+const HitViewer = () => {
+    const { t, i18n } = useTranslation();
+    const params = useParams();
+    const navigate = useNavigate();
+    const theme = useTheme();
+    const isUnderLg = useMediaQuery(theme.breakpoints.down('lg'));
+    const [orientation, setOrientation] = useMyLocalStorageItem(StorageKey.VIEWER_ORIENTATION, Orientation.VERTICAL);
+    const { getMatchingOverview, getMatchingDossiers, getMatchingAnalytic } = useMatchers();
+    const getHit = useContextSelector(HitContext, ctx => ctx.getHit);
+    const hit = useContextSelector(HitContext, ctx => ctx.hits[params.id]);
+    const [userIds, setUserIds] = useState(new Set());
+    const users = useMyUserList(userIds);
+    const [tab, setTab] = useState('details');
+    const [analytic, setAnalytic] = useState();
+    const [dossiers, setDossiers] = useState([]);
+    const [hasOverview, setHasOverview] = useState(false);
+    const fetchData = useCallback(async () => {
+        try {
+            if (!hit) {
+                await getHit(params.id, true);
+                return;
+            }
+            setUserIds(getUserList(hit));
+            setAnalytic(await getMatchingAnalytic(hit));
+        }
+        catch (err) {
+            if (err.cause?.api_status_code === 404) {
+                navigate('/404');
+            }
+        }
+    }, [hit, getMatchingAnalytic, getHit, params.id, navigate]);
+    useEffect(() => {
+        if (isUnderLg) {
+            setOrientation(Orientation.HORIZONTAL);
+        }
+    }, [isUnderLg, setOrientation]);
+    useEffect(() => {
+        fetchData();
+    }, [params.id, fetchData, hit]);
+    const onOrientationChange = useCallback(() => setOrientation(orientation === Orientation.VERTICAL ? Orientation.HORIZONTAL : Orientation.VERTICAL), [orientation, setOrientation]);
+    useEffect(() => {
+        getMatchingOverview(hit).then(_overview => setHasOverview(!!_overview));
+    }, [getMatchingOverview, hit]);
+    useEffect(() => {
+        if (hasOverview && tab === 'details') {
+            setTab('overview');
+        }
+        else if (!hasOverview && tab === 'overview') {
+            setTab('details');
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [hasOverview]);
+    const tabContent = useMemo(() => {
+        if (!tab || !hit) {
+            return;
+        }
+        return {
+            overview: () => _jsx(HitOverview, { hit: hit }),
+            details: () => _jsx(HitDetails, { hit: hit }),
+            hit_comments: () => _jsx(HitComments, { hit: hit, users: users }),
+            hit_raw: () => _jsx(JSONViewer, { data: hit }),
+            hit_data: () => _jsx(JSONViewer, { data: hit?.howler?.data?.map(entry => tryParse(entry)), collapse: false }),
+            hit_worklog: () => _jsx(HitWorklog, { hit: hit, users: users }),
+            hit_related: () => _jsx(HitRelated, { hit: hit }),
+            ...Object.fromEntries(hit?.howler.dossier?.map((lead, index) => ['lead:' + index, () => _jsx(LeadRenderer, { lead: lead, hit: hit })]) ?? []),
+            ...Object.fromEntries(dossiers.flatMap((_dossier, dossierIndex) => (_dossier.leads ?? []).map((_lead, leadIndex) => [
+                `external-lead:${dossierIndex}:${leadIndex}`,
+                () => _jsx(LeadRenderer, { lead: _lead, hit: hit })
+            ])))
+        }[tab]?.();
+    }, [dossiers, hit, tab, users]);
+    useEffect(() => {
+        if (!hit) {
+            return;
+        }
+        getMatchingDossiers(hit).then(setDossiers);
+    }, [getMatchingDossiers, hit]);
+    if (!hit) {
+        return (_jsx(PageCenter, { children: _jsx(Skeleton, { variant: "rounded", height: "520px" }) }));
+    }
+    return (_jsx(PageCenter, { maxWidth: "1500px", children: _jsxs(Box, { sx: {
+                display: 'grid',
+                position: 'relative',
+                gridTemplateColumns: `1fr ${orientation === 'vertical' ? '300px' : '0px'}`,
+                alignItems: 'stretch',
+                gap: theme.spacing(2),
+                transition: `${theme.transitions.duration.standard}ms`,
+                mb: 1
+            }, textAlign: "left", children: [_jsx(Collapse, { sx: { gridColumn: '1 / span 2', '& [class*=MuiStack-root]': { padding: '0 !important' } }, in: orientation === 'horizontal', children: _jsx(HitActions, { hit: hit, orientation: "horizontal" }) }), _jsxs(Box, { sx: {
+                        display: 'flex',
+                        '& > .MuiPaper-root': { flex: 1 },
+                        mr: orientation === 'vertical' ? 0 : -2
+                    }, children: [_jsx(HowlerCard, { tabIndex: 0, sx: { position: 'relative' }, children: _jsxs(CardContent, { children: [_jsx(HitBanner, { hit: hit, layout: HitLayout.COMFY, useListener: true }), _jsx(HitOutline, { hit: hit, layout: HitLayout.COMFY }), _jsx(HitLabels, { hit: hit }), (hit?.howler?.links?.length > 0 ||
+                                        analytic?.notebooks?.length > 0 ||
+                                        dossiers.filter(_dossier => _dossier.pivots?.length > 0).length > 0) && (_jsxs(Stack, { direction: "row", spacing: 1, pr: 2, children: [analytic?.notebooks?.length > 0 && _jsx(HitNotebooks, { analytic: analytic, hit: hit }), hit?.howler?.links?.length > 0 &&
+                                                uniqBy(hit.howler.links, 'href')
+                                                    .slice(0, 3)
+                                                    .map(l => _jsx(RelatedLink, { compact: true, ...l }, l.href)), dossiers.flatMap(_dossier => (_dossier.pivots ?? []).map((_pivot, index) => (
+                                            // eslint-disable-next-line react/no-array-index-key
+                                            _jsx(PivotLink, { pivot: _pivot, hit: hit, compact: true }, _dossier.dossier_id + index))))] }))] }) }), !isUnderLg && (_jsxs(Stack, { spacing: 1, sx: {
+                                position: 'absolute',
+                                top: theme.spacing(2),
+                                right: theme.spacing(-6)
+                            }, children: [_jsx(Tooltip, { title: t('page.hits.view.layout'), children: _jsx(IconButton, { onClick: onOrientationChange, children: _jsx(ViewAgenda, { sx: { transition: 'rotate 250ms', rotate: orientation === 'vertical' ? '90deg' : '0deg' } }) }) }), _jsx(SocketBadge, { size: "medium" }), analytic && (_jsx(Tooltip, { title: t('hit.panel.analytic.open'), children: _jsx(IconButton, { onClick: () => navigate(`/analytics/${analytic.analytic_id}`), children: _jsx(QueryStats, {}) }) })), hit?.howler.bundles?.length > 0 && _jsx(BundleButton, { ids: hit.howler.bundles })] }))] }), _jsx(HowlerCard, { sx: [orientation === 'horizontal' && { height: '0px' }], children: _jsx(CardContent, { sx: { padding: 1, position: 'relative' }, children: _jsx(HitActions, { hit: hit, orientation: "vertical" }) }) }), _jsx(Box, { sx: { gridColumn: '1 / span 2', mb: 1 }, children: _jsxs(Tabs, { value: tab === 'overview' && !hasOverview ? 'details' : tab, sx: { display: 'flex', flexDirection: 'row', pr: 2, alignItems: 'center' }, children: [hit?.howler?.is_bundle && (_jsx(Tab, { label: t('hit.viewer.aggregate'), value: "hit_aggregate", onClick: () => setTab('hit_aggregate') })), hasOverview && (_jsx(Tab, { label: t('hit.viewer.overview'), value: "overview", onClick: () => setTab('overview') })), _jsx(Tab, { label: t('hit.viewer.details'), value: "details", onClick: () => setTab('details') }), hit?.howler.dossier?.map((lead, index) => (_jsx(Tab
+                            // eslint-disable-next-line react/no-array-index-key
+                            , { label: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [lead.icon && _jsx(Icon, { icon: lead.icon }), _jsx("span", { children: i18n.language === 'en' ? lead.label.en : lead.label.fr })] }), value: 'lead:' + index, onClick: () => setTab('lead:' + index) }, 'lead:' + index))), dossiers.flatMap((_dossier, dossierIndex) => (_dossier.leads ?? []).map((_lead, leadIndex) => (_jsx(Tab
+                            // eslint-disable-next-line react/no-array-index-key
+                            , { label: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_lead.icon && _jsx(Icon, { icon: _lead.icon }), _jsx("span", { children: i18n.language === 'en' ? _lead.label.en : _lead.label.fr })] }), value: `external-lead:${dossierIndex}:${leadIndex}`, onClick: () => setTab(`external-lead:${dossierIndex}:${leadIndex}`) }, `external-lead:${dossierIndex}:${leadIndex}`)))), _jsx(FlexOne, {}), _jsx(Tab, { sx: { px: 2, minWidth: 0 }, label: _jsx(Tooltip, { title: t('hit.viewer.data'), children: _jsx(DataObject, {}) }), value: "hit_data", onClick: () => setTab('hit_data'), disabled: !hit?.howler?.data }), _jsx(Tab, { sx: { px: 2, minWidth: 0 }, label: _jsx(Tooltip, { title: t('hit.viewer.json'), children: _jsx(Code, {}) }), value: "hit_raw", onClick: () => setTab('hit_raw') }), _jsx(Tab, { sx: { px: 2, minWidth: 0 }, label: _jsx(Tooltip, { title: t('hit.viewer.comments'), children: _jsx(Badge, { sx: {
+                                            '& > .MuiBadge-badge': {
+                                                backgroundColor: theme.palette.divider,
+                                                zIndex: 1,
+                                                right: theme.spacing(-0.5)
+                                            },
+                                            '& > svg': { zIndex: 2 }
+                                        }, badgeContent: hit?.howler.comment?.length ?? 0, children: _jsx(Comment, {}) }) }), value: "hit_comments", onClick: () => setTab('hit_comments') }), _jsx(Tab, { sx: { px: 2, minWidth: 0 }, label: _jsx(Tooltip, { title: t('hit.viewer.worklog'), children: _jsx(History, {}) }), value: "hit_worklog", onClick: () => setTab('hit_worklog') }), _jsx(Tab, { sx: { px: 2, minWidth: 0 }, label: _jsx(Tooltip, { title: t('hit.viewer.related'), children: _jsx(LinkSharp, {}) }), value: "hit_related", onClick: () => setTab('hit_related') })] }) }), _jsx(Box, { sx: {
+                        gridColumn: '1 / span 2',
+                        '& > div': { padding: 0 },
+                        '& .react-json-view': { backgroundColor: 'transparent !important' }
+                    }, children: tabContent })] }) }));
+};
+export default HitViewer;

package/components/routes/hits/view/LeadRenderer.d.ts

@@ -0,0 +1,7 @@
+import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+import type { Lead } from '@cccsaurora/howler-ui/models/entities/generated/Lead';
+declare const _default: import("react").NamedExoticComponent<{
+    lead: Lead;
+    hit?: Hit;
+}>;
+export default _default;

package/components/routes/hits/view/LeadRenderer.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Divider, Stack, Typography } from '@mui/material';
+import HandlebarsMarkdown from '@cccsaurora/howler-ui/components/elements/display/HandlebarsMarkdown';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { usePluginStore } from 'react-pluggable';
+const LeadRenderer = ({ lead, hit }) => {
+    const { t } = useTranslation();
+    const pluginStore = usePluginStore();
+    if (lead.format === 'markdown') {
+        return (_jsx(Box, { sx: {
+                mt: -2
+            }, children: _jsx(HandlebarsMarkdown, { disableLinks: true, md: lead.content, object: hit ?? lead }) }));
+    }
+    const pluginLead = pluginStore.executeFunction(`lead.${lead.format}`, lead.content, lead.metadata, hit);
+    if (pluginLead) {
+        return pluginLead;
+    }
+    return (_jsxs(Stack, { p: 3, direction: "column", spacing: 2, alignItems: "center", children: [_jsx(Typography, { variant: "h3", color: "error.light", children: t('lead.invalid') }), _jsx(Divider, { flexItem: true }), _jsx(Typography, { variant: "body1", children: t('lead.invalid.description') })] }));
+};
+export default memo(LeadRenderer);

package/components/routes/home/AddNewCard.d.ts

@@ -0,0 +1,7 @@
+import type { HowlerUser } from '@cccsaurora/howler-ui/models/entities/HowlerUser';
+import type { FC } from 'react';
+declare const AddNewCard: FC<{
+    dashboard: HowlerUser['dashboard'];
+    addCard: (newCard: any) => void;
+}>;
+export default AddNewCard;

package/components/routes/home/AddNewCard.js

@@ -0,0 +1,103 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Check } from '@mui/icons-material';
+import { Autocomplete, Box, Card, CardContent, CardHeader, Divider, FormControl, Grid, InputLabel, MenuItem, Select, Slider, Stack, TextField, Typography } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
+import { ViewContext } from '@cccsaurora/howler-ui/components/app/providers/ViewProvider';
+import CustomButton from '@cccsaurora/howler-ui/components/elements/addons/buttons/CustomButton';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useContextSelector } from 'use-context-selector';
+const TYPES = {
+    view: ['viewId', 'limit'],
+    analytic: ['analyticId', 'type']
+};
+const VISUALIZATIONS = ['assessment', 'created', 'escalation', 'status', 'detection'];
+const AddNewCard = ({ dashboard, addCard }) => {
+    const { t } = useTranslation();
+    const views = useContextSelector(ViewContext, ctx => ctx.views ?? {});
+    const fetchViews = useContextSelector(ViewContext, ctx => ctx.fetchViews);
+    const [selectedType, setSelectedType] = useState('');
+    const [analytics, setAnalytics] = useState([]);
+    const [analyticsLoading, setAnalyticsLoading] = useState(false);
+    const [config, _setConfig] = useState({});
+    const [viewOpen, setViewOpen] = useState(false);
+    const [viewLoading, setViewLoading] = useState(false);
+    const setConfig = useCallback((key, value) => _setConfig(_config => ({ ..._config, [key]: value })), []);
+    const _addCard = useCallback(() => {
+        if (!selectedType) {
+            return;
+        }
+        addCard({
+            entry_id: selectedType === 'view' ? config.viewId : `${config.analyticId}-${config.type}`,
+            type: selectedType,
+            config: JSON.stringify(config)
+        });
+        // Zero the config so we don't prep the user to add the same card
+        // We can leave the analyticId, because it is allowed to be duplicated across viz types
+        ['type', 'viewId'].forEach(key => {
+            if (key in config) {
+                setConfig(key, '');
+            }
+        });
+    }, [selectedType, addCard, config, setConfig]);
+    const fetchAllAnalytics = async () => {
+        setAnalyticsLoading(true);
+        const batchSize = 150;
+        let offset = 0;
+        let allAnalytics = [];
+        let total = 0;
+        do {
+            const response = await api.search.analytic.post({
+                query: '*:*',
+                rows: batchSize,
+                offset
+            });
+            allAnalytics = [...allAnalytics, ...(response.items ?? [])];
+            total = response.total ?? 0;
+            offset += batchSize;
+        } while (offset < total);
+        setAnalytics(allAnalytics);
+        setAnalyticsLoading(false);
+    };
+    useEffect(() => {
+        fetchAllAnalytics();
+    }, []);
+    const filteredAnalyticVisualizations = useMemo(() => {
+        const existingAnalyticCards = dashboard.filter(_card => _card.type === "analytic");
+        return VISUALIZATIONS.filter(viz => {
+            return !existingAnalyticCards.some(_card => {
+                const parsedConfig = JSON.parse(_card.config);
+                return parsedConfig.analyticId === config.analyticId && parsedConfig.type === viz;
+            });
+        });
+    }, [dashboard, config.analyticId]);
+    useEffect(() => {
+        if (selectedType === 'view') {
+            _setConfig({
+                limit: 3
+            });
+        }
+        else {
+            _setConfig({});
+        }
+    }, [selectedType]);
+    const onViewOpen = useCallback(async () => {
+        setViewOpen(true);
+        setViewLoading(true);
+        try {
+            await fetchViews();
+        }
+        finally {
+            setViewLoading(false);
+        }
+    }, [fetchViews]);
+    return (_jsx(Grid, { item: true, xs: 12, md: 6, children: _jsxs(Card, { variant: "outlined", sx: { height: '100%' }, children: [_jsx(CardHeader, { title: t('route.home.add'), subheader: _jsx(Typography, { variant: "body2", color: "text.secondary", children: t('route.home.add.description') }) }), _jsx(CardContent, { children: _jsxs(Stack, { spacing: 1, children: [_jsxs(FormControl, { sx: theme => ({ mt: `${theme.spacing(2)} !important` }), children: [_jsx(InputLabel, { children: t('route.home.add.type') }), _jsx(Select, { value: selectedType, onChange: event => setSelectedType(event.target.value), label: t('route.home.add.type'), children: Object.keys(TYPES).map(type => (_jsx(MenuItem, { value: type, children: _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", children: t(`route.home.add.type.${type}`) }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: t(`route.home.add.type.${type}.description`) })] }) }, type))) })] }), selectedType && _jsx(Divider, { flexItem: true }), selectedType === 'analytic' && (_jsxs(_Fragment, { children: [_jsx(Typography, { variant: "body1", children: t('route.home.add.analytic.title') }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('route.home.add.analytic.description') }), _jsx(Autocomplete, { sx: { pt: 1 }, onChange: (__, opt) => setConfig('analyticId', opt.analytic_id), loading: analyticsLoading, options: analytics, filterOptions: (options, state) => options.filter(opt => opt.name.toLowerCase().includes(state.inputValue.toLowerCase()) ||
+                                            opt.description?.split('\n')[0]?.toLowerCase().includes(state.inputValue.toLowerCase())), renderOption: (props, option) => (_createElement("li", { ...props, key: option.analytic_id },
+                                            _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", children: option.name }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: option.description?.split('\n')[0] })] }))), getOptionLabel: option => option.name, renderInput: params => _jsx(TextField, { ...params, label: t('route.home.add.analytic') }) }), _jsxs(FormControl, { sx: theme => ({ mt: `${theme.spacing(2)} !important` }), children: [_jsx(InputLabel, { children: t('route.home.add.visualization') }), _jsx(Select, { value: config.type ?? '', onChange: event => setConfig('type', event.target.value), label: t('route.home.add.visualization'), children: filteredAnalyticVisualizations.length > 0 ? (filteredAnalyticVisualizations.map(viz => (_jsx(MenuItem, { value: viz, children: _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", children: t(`route.home.add.visualization.${viz}`) }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: t(`route.home.add.visualization.${viz}.description`) })] }) }, viz)))) : (_jsx(MenuItem, { disabled: true, children: _jsx(Typography, { variant: "body1", color: "text.secondary", children: t('route.home.add.visualization.unavailable') }) })) })] })] })), selectedType === 'view' && (_jsxs(_Fragment, { children: [_jsx(Autocomplete, { sx: { pt: 1 }, value: views[config.viewId] || null, onChange: (__, opt) => setConfig('viewId', opt.view_id), onOpen: onViewOpen, onClose: () => setViewOpen(false), open: viewOpen, loading: viewLoading, options: Object.values(views), filterOptions: (options, state) => options.filter(opt => !!opt &&
+                                            !dashboard?.find(entry => entry.type === 'view' && JSON.parse(entry.config).viewId === opt.view_id) &&
+                                            (opt.title.toLowerCase().includes(state.inputValue.toLowerCase()) ||
+                                                opt.query.toLowerCase().includes(state.inputValue.toLowerCase()))), renderOption: (props, option) => (_createElement("li", { ...props, key: option.view_id },
+                                            _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", children: t(option.title) }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: option.query })] }))), getOptionLabel: option => t(option.title), renderInput: params => _jsx(TextField, { ...params, label: t('route.home.add.view') }) }), _jsx(Typography, { variant: "body1", sx: { pt: 1 }, children: t('route.home.add.limit') }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('route.home.add.limit.description') }), _jsx(Box, { sx: { px: 0.5 }, children: _jsx(Slider, { value: config.limit ?? 3, valueLabelDisplay: "auto", onChange: (_, value) => setConfig('limit', value), min: 1, max: 10, step: 1, marks: true }) })] })), _jsx(Stack, { direction: "row", justifyContent: "end", children: _jsx(CustomButton, { variant: "outlined", size: "small", color: "primary", startIcon: _jsx(Check, {}), disabled: !selectedType || TYPES[selectedType]?.filter(field => !config[field])?.length > 0, onClick: _addCard, children: t('create') }) })] }) })] }) }));
+};
+export default AddNewCard;

package/components/routes/home/AnalyticCard.d.ts

@@ -0,0 +1,7 @@
+import type { FC } from 'react';
+export interface AnalyticSettings {
+    analyticId: string;
+    type: 'assessment' | 'created' | 'escalation';
+}
+declare const AnalyticCard: FC<AnalyticSettings>;
+export default AnalyticCard;

package/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 '@cccsaurora/howler-ui/components/app/providers/AnalyticProvider';
+import FlexOne from '@cccsaurora/howler-ui/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/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/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/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/components/routes/home/ViewCard.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { OpenInNew } from '@mui/icons-material';
+import { Card, CardContent, IconButton, Skeleton, Stack, Typography } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
+import AppListEmpty from '@cccsaurora/howler-ui/commons/components/display/AppListEmpty';
+import { ViewContext } from '@cccsaurora/howler-ui/components/app/providers/ViewProvider';
+import HitBanner from '@cccsaurora/howler-ui/components/elements/hit/HitBanner';
+import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
+import useMyApi from '@cccsaurora/howler-ui/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[viewId]);
+    const fetchViews = useContextSelector(ViewContext, ctx => ctx.fetchViews);
+    useEffect(() => {
+        fetchViews([viewId]);
+    }, [fetchViews, 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(OpenInNew, { 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/components/routes/home/index.d.ts

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

package/components/routes/home/index.js

@@ -0,0 +1,122 @@
+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 '@cccsaurora/howler-ui/api';
+import { AppBrand } from '@cccsaurora/howler-ui/branding/AppBrand';
+import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
+import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
+import CustomButton from '@cccsaurora/howler-ui/components/elements/addons/buttons/CustomButton';
+import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
+import useMyUserFunctions from '@cccsaurora/howler-ui/components/hooks/useMyUserFunctions';
+import dayjs from 'dayjs';
+import isEqual from 'lodash-es/isEqual';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
+import ErrorBoundary from '../ErrorBoundary';
+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, dayjs().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: 0
+        })
+            .then(result => setUpdatedHitTotal(result.total));
+    }, [updateQuery]);
+    return (_jsx(PageCenter, { maxWidth: "1800px", textAlign: "left", height: "100%", children: _jsx(ErrorBoundary, { 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(dayjs().utc().format(LUCENE_DATE_FMT)), children: _jsx(OpenInNew, {}) }), _jsx(IconButton, { color: "info", onClick: () => {
+                                        setLastViewed(dayjs().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;