@cccsaurora/howler-ui 2.12.0-dev.30

package/dist/components/routes/settings/ProfileSection.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Add, Check, ChevronRight, Clear } from '@mui/icons-material';
+import { Chip, CircularProgress, Grid, TableCell, TableRow, Typography } from '@mui/material';
+import { ApiConfigContext } from 'components/app/providers/ApiConfigProvider';
+import howlerPluginStore from 'plugins/store';
+import { useCallback, useContext, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { usePluginStore } from 'react-pluggable';
+import { delay } from 'utils/utils';
+import EditRow from '../../elements/EditRow';
+import SettingsSection from './SettingsSection';
+const ProfileSection = ({ user, editName, addRole, removeRole, viewGroups }) => {
+    const { t } = useTranslation();
+    const { config } = useContext(ApiConfigContext);
+    const pluginStore = usePluginStore();
+    const [loading, setLoading] = useState({});
+    const [loadingGroups, setLoadingGroups] = useState(false);
+    const wrapChange = useCallback(async (r, fn) => {
+        const delayedLoad = delay(250);
+        delayedLoad.then(() => {
+            setLoading({
+                ...loading,
+                [r]: true
+            });
+        });
+        try {
+            await fn(r);
+        }
+        finally {
+            delayedLoad.cancel();
+            setLoading({
+                ...loading,
+                [r]: false
+            });
+        }
+    }, [loading]);
+    const onViewGroups = useCallback(async () => {
+        setLoadingGroups(true);
+        try {
+            await viewGroups();
+        }
+        finally {
+            setLoadingGroups(false);
+        }
+    }, [viewGroups]);
+    return (_jsxs(SettingsSection, { title: t('page.settings.profile.title'), colSpan: 3, children: [_jsxs(TableRow, { children: [_jsx(TableCell, { style: { whiteSpace: 'nowrap' }, children: t('page.settings.profile.table.username') }), _jsx(TableCell, { width: "100%", colSpan: 2, children: user?.username })] }), _jsx(EditRow, { titleKey: "page.settings.profile.table.name", value: user?.name, onEdit: editName }), _jsxs(TableRow, { children: [_jsx(TableCell, { style: { whiteSpace: 'nowrap' }, children: t('page.settings.profile.table.email') }), _jsx(TableCell, { width: "100%", colSpan: 2, children: user?.email })] }), viewGroups && (_jsxs(_Fragment, { children: [_jsxs(TableRow, { onClick: onViewGroups, sx: theme => ({
+                            cursor: 'pointer',
+                            transitionProperty: 'background-color',
+                            transitionDuration: theme.transitions.duration.shortest + 'ms',
+                            '&:hover': { backgroundColor: 'rgba(128, 128, 128, 0.25)' }
+                        }), children: [_jsx(TableCell, { sx: { borderBottom: 0 }, style: { whiteSpace: 'nowrap' }, children: t('page.settings.profile.table.groups') }), _jsx(TableCell, { sx: { borderBottom: 0 }, align: "right", width: "100%", colSpan: 2, children: loadingGroups ? _jsx(CircularProgress, { size: 20 }) : _jsx(ChevronRight, { fontSize: "small" }) })] }), _jsx(TableRow, { children: _jsx(TableCell, { colSpan: 3, sx: { paddingTop: '0 !important' }, children: _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('page.settings.profile.table.groups.description') }) }) })] })), _jsxs(TableRow, { children: [_jsx(TableCell, { style: { whiteSpace: 'nowrap' }, children: t('page.settings.profile.table.roles') }), _jsx(TableCell, { width: "100%", colSpan: 2, children: _jsx(Grid, { container: true, direction: "row", spacing: 1, children: config?.lookups?.roles?.map((r) => (_jsx(Grid, { item: true, children: _jsx(Chip, { label: r.toLocaleLowerCase(), color: user?.roles?.includes(r) ? 'primary' : 'default', icon: loading[r] ? (_jsx(CircularProgress, { size: 24 })) : addRole && !user?.roles?.includes(r) ? (_jsx(Add, {})) : user?.roles?.includes(r) ? (removeRole ? null : (_jsx(Check, {}))) : (_jsx(Clear, {})), onClick: addRole && !user?.roles?.includes(r) ? () => wrapChange(r, addRole) : null, onDelete: removeRole && user?.roles?.includes(r) ? () => wrapChange(r, removeRole) : null }) }, r))) }) })] }), howlerPluginStore.plugins.map(plugin => pluginStore.executeFunction(`${plugin}.settings`, 'profile'))] }));
+};
+export default ProfileSection;

package/dist/components/routes/settings/SecuritySection.d.ts

@@ -0,0 +1,10 @@
+import type { HowlerUser } from 'models/entities/HowlerUser';
+import type { FC } from 'react';
+declare const SecuritySection: FC<{
+    user: HowlerUser;
+    editPassword?: (password: string) => Promise<void>;
+    addApiKey?: () => void;
+    removeApiKey?: (apiKey: [string, string[], string]) => Promise<void>;
+    editQuota?: (quote?: string) => Promise<void>;
+}>;
+export default SecuritySection;

package/dist/components/routes/settings/SecuritySection.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import AddIcon from '@mui/icons-material/Add';
+import { Chip, Grid, IconButton, TableCell, TableRow } from '@mui/material';
+import { ApiConfigContext } from 'components/app/providers/ApiConfigProvider';
+import useMyLocalStorage from 'components/hooks/useMyLocalStorage';
+import moment from 'moment';
+import howlerPluginStore from 'plugins/store';
+import { useContext, useMemo } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { usePluginStore } from 'react-pluggable';
+import { StorageKey } from 'utils/constants';
+import EditRow from '../../elements/EditRow';
+import SettingsSection from './SettingsSection';
+const APIKEY_LABELS = {
+    R: 'apikey.read',
+    W: 'apikey.write',
+    E: 'apikey.extended',
+    I: 'apikey.impersonate'
+};
+const SecuritySection = ({ user, editPassword, addApiKey, removeApiKey, editQuota }) => {
+    const { t } = useTranslation();
+    const { get } = useMyLocalStorage();
+    const { config } = useContext(ApiConfigContext);
+    const pluginStore = usePluginStore();
+    const isOAuth = useMemo(() => get(StorageKey.APP_TOKEN)?.includes('.'), [get]);
+    return (_jsxs(SettingsSection, { title: t('page.settings.security.title'), colSpan: 3, children: [!isOAuth && editPassword && (_jsx(EditRow, { titleKey: "page.settings.security.table.password", value: "\u25CF\u25CF\u25CF\u25CF\u25CF\u25CF\u25CF\u25CF\u25CF\u25CF\u25CF", onEdit: editPassword, type: "password" })), config?.configuration.auth.allow_apikeys && (_jsxs(TableRow, { sx: { cursor: 'pointer' }, children: [_jsx(TableCell, { style: { whiteSpace: 'nowrap' }, children: t('page.settings.security.table.apikeys') }), _jsx(TableCell, { width: "100%", children: _jsxs(Grid, { container: true, spacing: 1, children: [user?.apikeys?.map(apiKey => (_jsx(Grid, { item: true, children: _jsx(Chip, { label: apiKey[0].toLocaleLowerCase() +
+                                            (apiKey[1].length > 0
+                                                ? ` (${apiKey[1].map(permission => t(APIKEY_LABELS[permission])).join(', ')})`
+                                                : ''), style: { backgroundColor: moment.utc(apiKey[2]).isBefore(moment().utc()) ? 'orange' : 'default' }, onDelete: removeApiKey ? () => removeApiKey(apiKey) : null }) }, apiKey[0]))), user?.apikeys?.length < 1 && (_jsx(Grid, { item: true, children: _jsx(Trans, { i18nKey: "none" }) }))] }) }), _jsx(TableCell, { align: "right", children: addApiKey && (_jsx(IconButton, { onClick: addApiKey, children: _jsx(AddIcon, { fontSize: "small" }) })) })] })), _jsx(EditRow, { titleKey: "page.settings.security.table.apiquota", descriptionKey: "page.settings.security.table.apiquota.description", value: user?.api_quota, validate: value => value && /^[0-9]*$/m.test(value.toString()), type: "number", onEdit: editQuota }), howlerPluginStore.plugins.map(plugin => pluginStore.executeFunction(`${plugin}.settings`, 'security'))] }));
+};
+export default SecuritySection;

package/dist/components/routes/settings/Settings.d.ts

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

package/dist/components/routes/settings/Settings.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAppUser } from 'commons/components/app/hooks';
+import UserPageWrapper from 'components/elements/display/UserPageWrapper';
+import useMyLocalStorage from 'components/hooks/useMyLocalStorage';
+import useMyUserFunctions from 'components/hooks/useMyUserFunctions';
+import { useCallback, useMemo } from 'react';
+import { StorageKey } from 'utils/constants';
+import AdminSection from './AdminSection';
+import LocalSection from './LocalSection';
+import ProfileSection from './ProfileSection';
+import SecuritySection from './SecuritySection';
+const Settings = () => {
+    const { user: currentUser, setUser } = useAppUser();
+    const { editName, editPassword, editQuota, addApiKey, removeApiKey, addRole, removeRole, viewGroups } = useMyUserFunctions();
+    const { get } = useMyLocalStorage();
+    const isOAuth = useMemo(() => get(StorageKey.APP_TOKEN)?.includes('.'), [get]);
+    const currentUserWrapper = useCallback((fn) => {
+        return async (value) => setUser(await fn(currentUser, value));
+    }, [currentUser, setUser]);
+    return (_jsxs(UserPageWrapper, { user: currentUser, children: [_jsx(ProfileSection, { user: currentUser, editName: !isOAuth && currentUserWrapper(editName), addRole: currentUser.is_admin && !isOAuth && currentUserWrapper(addRole), removeRole: currentUser.is_admin && !isOAuth && currentUserWrapper(removeRole), viewGroups: viewGroups }), _jsx(SecuritySection, { user: currentUser, editPassword: editPassword, addApiKey: addApiKey, removeApiKey: currentUserWrapper(removeApiKey), editQuota: currentUser.is_admin && currentUserWrapper(editQuota) }), _jsx(LocalSection, {}), currentUser.roles.includes('admin') && _jsx(AdminSection, {})] }));
+};
+export default Settings;

package/dist/components/routes/settings/SettingsSection.d.ts

@@ -0,0 +1,7 @@
+import type { FC, ReactNode } from 'react';
+declare const SettingsSection: FC<{
+    title: string;
+    colSpan: number;
+    children: ReactNode;
+}>;
+export default SettingsSection;

package/dist/components/routes/settings/SettingsSection.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Typography } from '@mui/material';
+const SettingsSection = ({ title, colSpan, children }) => {
+    return (_jsx(TableContainer, { sx: {
+            '& table tr:last-child td': {
+                borderBottom: 0
+            }
+        }, component: Paper, children: _jsxs(Table, { "aria-label": title, children: [_jsx(TableHead, { children: _jsx(TableRow, { children: _jsx(TableCell, { colSpan: colSpan, children: _jsx(Typography, { variant: "h6", children: title }) }) }) }), _jsx(TableBody, { children: children })] }) }));
+};
+export default SettingsSection;

package/dist/components/routes/templates/TemplateCard.d.ts

@@ -0,0 +1,7 @@
+import type { Template } from 'models/entities/generated/Template';
+import type { FC } from 'react';
+declare const TemplateCard: FC<{
+    template: Template;
+    className?: string;
+}>;
+export default TemplateCard;

package/dist/components/routes/templates/TemplateCard.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Language, Lock, Person } from '@mui/icons-material';
+import { Card, Divider, Stack, Tooltip, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+const TemplateCard = ({ template, className }) => {
+    const { t } = useTranslation();
+    return (_jsx(Card, { variant: "outlined", sx: { p: 1, mb: 1 }, className: className, children: _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Tooltip, { title: t(`route.templates.manager.${template.type}`), children: {
+                        readonly: _jsx(Lock, {}),
+                        global: _jsx(Language, {}),
+                        personal: _jsx(Person, {})
+                    }[template.type] }), _jsx(Divider, { orientation: "vertical", flexItem: true }), _jsxs(Stack, { children: [_jsxs(Typography, { variant: "body1", children: [t(template.analytic), " - ", t(template.detection ?? 'all')] }), template.keys.map(key => (_jsx(Typography, { variant: "caption", sx: { ml: 1 }, children: _jsx("code", { children: key }) }, template.template_id + key)))] })] }) }, template.template_id));
+};
+export default TemplateCard;

package/dist/components/routes/templates/TemplateDnD.d.ts

@@ -0,0 +1,8 @@
+import type { FC } from 'react';
+declare const TemplateDnD: FC<{
+    field?: any;
+    data?: any;
+    onRemove: (field: string) => void;
+    tooltipTitle: any;
+}>;
+export default TemplateDnD;

package/dist/components/routes/templates/TemplateDnD.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { Delete, DragHandle } from '@mui/icons-material';
+import { IconButton, Stack, Tooltip, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+const TemplateDnD = ({ field, data, onRemove, tooltipTitle }) => {
+    const { t } = useTranslation();
+    const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: field });
+    return (_jsxs(Stack, { direction: "row", spacing: 1, ref: setNodeRef, style: { transition, transform: CSS.Transform.toString(transform) }, children: [_jsx(Tooltip, { title: t('button.drag'), ...attributes, ...listeners, children: _jsx(IconButton, { size: "medium", onClick: () => onRemove(field), children: _jsx(DragHandle, { fontSize: "medium" }) }) }), _jsx(Tooltip, { title: tooltipTitle, sx: { alignContent: 'center' }, children: _jsxs(Typography, { variant: "body1", fontWeight: "bold", children: [field, ":"] }) }), _jsx(Typography, { variant: "body1", whiteSpace: "normal", sx: { width: '100%', wordBreak: 'break-all', alignContent: 'center' }, children: data }), _jsx(Tooltip, { title: t('button.delete'), children: _jsx(IconButton, { size: "medium", onClick: () => onRemove(field), sx: { marginLeft: 'auto' }, children: _jsx(Delete, { fontSize: "medium" }) }) })] }));
+};
+export default TemplateDnD;

package/dist/components/routes/templates/TemplateEditor.d.ts

@@ -0,0 +1,9 @@
+import { type Hit } from 'models/entities/generated/Hit';
+declare const _default: import("react").MemoExoticComponent<({ hit, fields, setFields, onRemove, onAdd }: {
+    hit: Hit;
+    fields: string[];
+    setFields: (displayFields: string[]) => void;
+    onRemove: (field: string) => void;
+    onAdd: (field: string) => void;
+}) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/dist/components/routes/templates/TemplateEditor.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { closestCorners, DndContext } from '@dnd-kit/core';
+import { arrayMove, SortableContext } from '@dnd-kit/sortable';
+import { Add } from '@mui/icons-material';
+import { Button, Stack, Typography } from '@mui/material';
+import { ApiConfigContext } from 'components/app/providers/ApiConfigProvider';
+import { FieldContext } from 'components/app/providers/FieldProvider';
+import Phrase from 'components/elements/addons/search/phrase/Phrase';
+import { get, isObject } from 'lodash-es';
+import {} from 'models/entities/generated/Hit';
+import { memo, useCallback, useContext, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import TemplateDnD from './TemplateDnD';
+const TemplateEditor = ({ hit, fields, setFields, onRemove, onAdd }) => {
+    const { t } = useTranslation();
+    const { config } = useContext(ApiConfigContext);
+    const { getHitFields } = useContext(FieldContext);
+    const [phrase, setPhrase] = useState('');
+    const [suggestions, setSuggestions] = useState([]);
+    const tryAddField = useCallback(() => {
+        if (suggestions.includes(phrase)) {
+            if (!fields.includes(phrase)) {
+                onAdd(phrase);
+                setPhrase('');
+            }
+        }
+    }, [fields, onAdd, phrase, suggestions]);
+    const checkForActions = useCallback((e) => {
+        if (e.isEnter) {
+            tryAddField();
+        }
+    }, [tryAddField]);
+    useEffect(() => {
+        getHitFields().then(suggestionFields => setSuggestions(suggestionFields.map(f => f.key)));
+    }, [getHitFields]);
+    const handleDragEnd = useCallback((event) => {
+        const { active, over } = event;
+        if (active.id !== over.id) {
+            const oldIndex = (fields ?? []).findIndex(entry => entry === active.id);
+            const newIndex = (fields ?? []).findIndex(entry => entry === over.id);
+            setFields(arrayMove(fields, oldIndex, newIndex));
+        }
+    }, [fields, setFields]);
+    return (_jsxs(Stack, { spacing: 1, width: "100%", alignItems: "stretch", children: [_jsx(DndContext, { collisionDetection: closestCorners, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: (fields ?? []).map(entry => entry), children: fields.map(field => {
+                        let data = get(hit, field);
+                        if (!data) {
+                            data = 'N/A';
+                        }
+                        else if (isObject(data)) {
+                            data = JSON.stringify(data);
+                        }
+                        return (_jsx(TemplateDnD, { field: field, data: data, onRemove: onRemove, tooltipTitle: (config.indexes.hit[field].description ?? t('none')).split('\n')[0] }, field));
+                    }) }) }), _jsxs(Stack, { direction: "row", sx: { '& > div': { flex: 1 } }, spacing: 1, children: [_jsx(Phrase, { suggestions: suggestions, value: phrase, onChange: setPhrase, onKeyDown: checkForActions, size: "small" }), _jsx(Button, { variant: "outlined", size: "small", sx: { marginLeft: 'auto' }, startIcon: _jsx(Add, { fontSize: "small" }), disabled: !suggestions.includes(phrase) || fields.includes(phrase), onClick: tryAddField, children: t('button.add') })] }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('route.templates.prompt') })] }));
+};
+export default memo(TemplateEditor);

package/dist/components/routes/templates/TemplateViewer.d.ts

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

package/dist/components/routes/templates/TemplateViewer.js

@@ -0,0 +1,165 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Autocomplete, Button, CircularProgress, Divider, FormControl, LinearProgress, Stack, TextField, ToggleButton, ToggleButtonGroup, Tooltip } from '@mui/material';
+import api from 'api';
+import PageCenter from 'commons/components/pages/PageCenter';
+import TemplateEditor from 'components/routes/templates/TemplateEditor';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Check, Delete, Remove, SsidChart } from '@mui/icons-material';
+import AppInfoPanel from 'commons/components/display/AppInfoPanel';
+import { TemplateContext } from 'components/app/providers/TemplateProvider';
+import { HitLayout } from 'components/elements/hit/HitLayout';
+import HitOutline, { DEFAULT_FIELDS } from 'components/elements/hit/HitOutline';
+import useMyApi from 'components/hooks/useMyApi';
+import isEqual from 'lodash-es/isEqual';
+import { useSearchParams } from 'react-router-dom';
+import { useContextSelector } from 'use-context-selector';
+import hitsData from 'utils/hit.json';
+import { sanitizeLuceneQuery } from 'utils/stringUtils';
+const CUSTOM_OUTLINES = ['cmt.aws.sigma.rules', 'assemblyline', '6tailphish'];
+const TemplateViewer = () => {
+    const { t } = useTranslation();
+    const [params, setParams] = useSearchParams();
+    const getTemplates = useContextSelector(TemplateContext, ctx => ctx.getTemplates);
+    const { dispatchApi } = useMyApi();
+    const [templateList, setTemplateList] = useState([]);
+    const [selectedTemplate, setSelectedTemplate] = useState(null);
+    const [displayFields, setDisplayFields] = 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 [type, setType] = useState((params.get('type') ?? 'personal').replace('readonly', 'global'));
+    const [loading, setLoading] = useState(false);
+    const [templateLoading, setTemplateLoading] = useState(false);
+    useEffect(() => {
+        setLoading(true);
+        dispatchApi(api.search.analytic.post({ query: 'analytic_id:*', rows: 1000 }), {
+            logError: false,
+            showError: true,
+            throwError: true
+        })
+            .finally(() => setLoading(false))
+            .then(result => result.items)
+            .then(_analytics => {
+            if (!_analytics.some(_analytic => _analytic.name.toLowerCase() === analytic.toLowerCase())) {
+                setAnalytic('');
+            }
+            setAnalytics(_analytics);
+        });
+        getTemplates(true).then(setTemplateList);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [analytic, dispatchApi]);
+    useEffect(() => {
+        if (analytic) {
+            setLoading(true);
+            dispatchApi(api.search.grouped.hit.post('howler.detection', {
+                limit: 0,
+                query: `howler.analytic:"${sanitizeLuceneQuery(analytic)}"`
+            }), {
+                logError: false,
+                showError: true,
+                throwError: true
+            })
+                .finally(() => setLoading(false))
+                .then(result => result.items.map(i => i.value))
+                .then(_detections => {
+                if (_detections.length < 1 || (type === 'global' && CUSTOM_OUTLINES.includes(analytic.toLowerCase()))) {
+                    setDetection('ANY');
+                }
+                if (detection && !_detections.includes(detection)) {
+                    setDetection('ANY');
+                }
+                setDetections(_detections);
+            });
+        }
+    }, [analytic, detection, dispatchApi, params, setParams, type]);
+    useEffect(() => {
+        if (analytic && detection) {
+            const template = (templateList ?? []).find(_template => _template.analytic === analytic &&
+                ((detection === 'ANY' && !_template.detection) || _template.detection === detection) &&
+                _template.type === type);
+            if (template) {
+                setSelectedTemplate(template);
+                setDisplayFields(template.keys);
+            }
+            else {
+                setSelectedTemplate(null);
+                setDisplayFields(DEFAULT_FIELDS);
+            }
+        }
+    }, [analytic, detection, templateList, type]);
+    useEffect(() => {
+        if (analytic) {
+            params.set('analytic', analytic);
+        }
+        else {
+            params.delete('analytic');
+        }
+        if (detection && detection !== 'ANY') {
+            params.set('detection', detection);
+        }
+        else {
+            params.delete('detection');
+        }
+        params.set('type', type);
+        params.sort();
+        setParams(params, {
+            replace: true
+        });
+    }, [analytic, detection, params, setParams, type]);
+    const exampleHit = useMemo(() => {
+        const _hit = hitsData.GET[Object.keys(hitsData.GET)[0]];
+        if (analytic) {
+            _hit.howler.analytic = analytic;
+        }
+        return { ..._hit };
+    }, [analytic]);
+    const onDelete = useCallback(async () => {
+        await dispatchApi(api.template.del(selectedTemplate.template_id), {
+            logError: false,
+            showError: true,
+            throwError: false
+        });
+        setSelectedTemplate(null);
+        setDisplayFields(DEFAULT_FIELDS);
+    }, [dispatchApi, selectedTemplate?.template_id]);
+    const onSave = useCallback(async () => {
+        if (analytic && detection) {
+            try {
+                setTemplateLoading(true);
+                const result = await dispatchApi(selectedTemplate
+                    ? api.template.put(selectedTemplate.template_id, displayFields)
+                    : api.template.post({
+                        analytic,
+                        detection: detection !== 'ANY' ? detection : null,
+                        type,
+                        keys: displayFields
+                    }), {
+                    logError: false,
+                    showError: true,
+                    throwError: true
+                });
+                setSelectedTemplate(result);
+                const newList = [result, ...templateList];
+                setTemplateList(newList.filter((v1, i) => newList.findIndex(v2 => v1.template_id === v2.template_id) === i));
+            }
+            finally {
+                setTemplateLoading(false);
+            }
+        }
+    }, [analytic, detection, dispatchApi, displayFields, selectedTemplate, templateList, type]);
+    const isCustomOutline = useMemo(() => CUSTOM_OUTLINES.includes(analytic.toLowerCase()), [analytic]);
+    const analyticOrDetectionMissing = useMemo(() => !analytic || !detection, [analytic, detection]);
+    const noFieldChange = useMemo(() => displayFields.length < 1 || isEqual(selectedTemplate?.keys ?? DEFAULT_FIELDS, displayFields), [displayFields, selectedTemplate?.keys]);
+    return (_jsxs(PageCenter, { maxWidth: "1500px", 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: { flex: 1, maxWidth: '450px' }, 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: (__, newValue) => setAnalytic(newValue ? newValue.name : ''), renderInput: autocompleteAnalyticParams => (_jsx(TextField, { ...autocompleteAnalyticParams, label: t('route.templates.analytic'), size: "small" })) }) }), !(detections?.length < 2 && detections[0]?.toLowerCase() === 'rule') ? (_jsx(FormControl, { sx: { flex: 1, maxWidth: '300px' }, disabled: !analytic || (isCustomOutline && type === 'global'), children: _jsx(Autocomplete, { id: "detection", options: ['ANY', ...detections.sort()], getOptionLabel: option => option, value: isCustomOutline && type === 'global' ? 'any' : (detection ?? ''), onChange: (__, newValue) => setDetection(newValue), renderInput: autocompleteDetectionParams => (_jsx(TextField, { ...autocompleteDetectionParams, label: t('route.templates.detection'), size: "small" })) }) })) : (_jsx(Tooltip, { title: t('route.templates.rule.explanation'), children: _jsx(SsidChart, { color: "info", sx: { alignSelf: 'center' } }) })), _jsxs(ToggleButtonGroup, { sx: { display: 'grid', gridTemplateColumns: '1fr 1fr' }, size: "small", exclusive: true, value: type, disabled: analyticOrDetectionMissing, onChange: (__, _type) => {
+                                    if (_type) {
+                                        setType(_type);
+                                    }
+                                }, children: [_jsx(ToggleButton, { sx: { flex: 1 }, value: "personal", "aria-label": "personal", children: t('route.templates.personal') }), _jsx(ToggleButton, { sx: { flex: 1 }, value: "global", "aria-label": "global", children: t('route.templates.global') })] }), selectedTemplate && (_jsx(Button, { variant: "outlined", startIcon: _jsx(Delete, {}), onClick: onDelete, children: t('button.delete') })), _jsx(Button, { variant: "outlined", disabled: analyticOrDetectionMissing || (isCustomOutline && type === 'global') || noFieldChange, startIcon: templateLoading ? (_jsx(CircularProgress, { size: 16 })) : isCustomOutline && type === 'global' ? (_jsx(Remove, {})) : (_jsx(Check, {})), onClick: onSave, children: t(isCustomOutline && type === 'global'
+                                    ? 'button.readonly'
+                                    : !analyticOrDetectionMissing && !noFieldChange
+                                        ? 'button.save'
+                                        : 'button.saved') })] }), isCustomOutline && type === 'global' ? (_jsx(HitOutline, { hit: exampleHit, layout: HitLayout.COMFY, type: "global" })) : analyticOrDetectionMissing ? (_jsx(AppInfoPanel, { i18nKey: "route.templates.select", sx: { width: '100%', alignSelf: 'start' } })) : (_jsx(TemplateEditor, { hit: exampleHit, fields: displayFields, setFields: setDisplayFields, onAdd: field => setDisplayFields([...displayFields, field]), onRemove: field => setDisplayFields(displayFields.filter(f => f !== field)) }))] })] }));
+};
+export default TemplateViewer;

package/dist/components/routes/templates/Templates.d.ts

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

package/dist/components/routes/templates/Templates.js

@@ -0,0 +1,116 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Article, KeyboardArrowDown } from '@mui/icons-material';
+import { Box, Card, Collapse, IconButton, Stack, ToggleButton, ToggleButtonGroup, Tooltip, Typography } from '@mui/material';
+import api from 'api';
+import { useAppUser } from 'commons/components/app/hooks';
+import { TemplateContext } from 'components/app/providers/TemplateProvider';
+import { TuiListProvider } from 'components/elements/addons/lists';
+import { TuiListMethodContext } from 'components/elements/addons/lists/TuiListProvider';
+import ItemManager from 'components/elements/display/ItemManager';
+import useMyApi from 'components/hooks/useMyApi';
+import { useMyLocalStorageItem } from 'components/hooks/useMyLocalStorage';
+import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useContextSelector } from 'use-context-selector';
+import { StorageKey } from 'utils/constants';
+import TemplateCard from './TemplateCard';
+const TemplatesBase = () => {
+    const { t } = useTranslation();
+    const { user } = useAppUser();
+    const navigate = useNavigate();
+    const { dispatchApi } = useMyApi();
+    const [searchParams, setSearchParams] = useSearchParams();
+    const { load } = useContext(TuiListMethodContext);
+    const templates = useContextSelector(TemplateContext, ctx => ctx.templates);
+    const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
+    const [phrase, setPhrase] = useState('');
+    const [offset, setOffset] = useState(parseInt(searchParams.get('offset')) || 0);
+    const [showBuiltins, setShowBuiltins] = useState(true);
+    const [response, setResponse] = useState(null);
+    const [types, setTypes] = useState([]);
+    const [hasError, setHasError] = useState(false);
+    const [searching, setSearching] = useState(false);
+    const onSearch = useCallback(async () => {
+        try {
+            setSearching(true);
+            setHasError(false);
+            if (phrase) {
+                searchParams.set('phrase', phrase);
+            }
+            else {
+                searchParams.delete('phrase');
+            }
+            setSearchParams(searchParams, { replace: true });
+            // Check for the actual search query
+            const phraseQuery = phrase ? `*:*${phrase}*` : '*:*';
+            // Ensure the template should be visible and/or matches the type we are filtering for
+            const typeQuery = `(type:global OR owner:(${user.username} OR none)) AND type:(${types.join(' ') || '*'})`;
+            setResponse(await dispatchApi(api.search.template.post({
+                query: `${phraseQuery} AND ${typeQuery}`,
+                rows: pageCount,
+                offset
+            })));
+        }
+        catch (e) {
+            setHasError(true);
+        }
+        finally {
+            setSearching(false);
+        }
+    }, [phrase, setSearchParams, searchParams, user.username, types, dispatchApi, pageCount, offset]);
+    // Load the items into list when response changes.
+    // This hook should only trigger when the 'response' changes.
+    useEffect(() => {
+        if (response) {
+            load(response.items.map((item) => ({
+                id: item.template_id,
+                item,
+                selected: false,
+                cursor: false
+            })));
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [response, load]);
+    const onPageChange = useCallback((_offset) => {
+        if (_offset !== offset) {
+            searchParams.set('offset', _offset.toString());
+            setSearchParams(searchParams, { replace: true });
+            setOffset(_offset);
+        }
+    }, [offset, searchParams, setSearchParams]);
+    useEffect(() => {
+        onSearch();
+        if (!searchParams.has('offset')) {
+            searchParams.set('offset', '0');
+            setSearchParams(searchParams, { replace: true });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [dispatchApi, types]);
+    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]);
+    const builtInTemplates = useMemo(() => templates.filter(template => template.type === 'readonly'), [templates]);
+    const renderer = useCallback((item, className) => _jsx(TemplateCard, { template: item, className: className }), []);
+    return (_jsx(ItemManager, { onSearch: onSearch, onPageChange: onPageChange, phrase: phrase, setPhrase: setPhrase, hasError: hasError, searching: searching, searchFilters: _jsx(Stack, { direction: "row", spacing: 1, alignItems: "center", children: _jsxs(ToggleButtonGroup, { sx: { display: 'grid', gridTemplateColumns: '1fr 1fr', alignSelf: 'start' }, size: "small", value: types, onChange: (__, _types) => {
+                    if (_types) {
+                        setTypes(_types.length < 2 ? _types : []);
+                    }
+                }, children: [_jsx(ToggleButton, { value: "personal", "aria-label": "personal", children: t('route.templates.manager.personal') }), _jsx(ToggleButton, { value: "global", "aria-label": "global", children: t('route.templates.manager.global') })] }) }), aboveSearch: _jsx(Typography, { sx: theme => ({ fontStyle: 'italic', color: theme.palette.text.disabled, mb: 0.5 }), variant: "body2", children: t('route.templates.search.prompt') }), belowSearch: types.length !== 1 &&
+            offset < 1 &&
+            builtInTemplates.length > 0 && (_jsx(Card, { sx: { p: 1, mb: 1 }, children: _jsxs(Stack, { children: [_jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [_jsx(Typography, { children: t('route.templates.builtin.show') }), _jsx(Tooltip, { title: t(`route.templates.builtin.${showBuiltins ? 'hide' : 'show'}`), children: _jsx(IconButton, { size: "small", onClick: () => setShowBuiltins(!showBuiltins), children: _jsx(KeyboardArrowDown, { fontSize: "small", sx: { transition: 'rotate 250ms', rotate: showBuiltins ? '180deg' : '0deg' } }) }) })] }), _jsxs(Collapse, { in: showBuiltins, children: [_jsx(Box, { sx: { mt: 1 } }), builtInTemplates.map(template => renderer(template))] })] }) })), renderer: ({ item }, classRenderer) => renderer(item.item, classRenderer()), response: response, onSelect: (item) => navigate(`/templates/view?type=${item.item.type}&analytic=${item.item.analytic}${item.item.detection ? '&detection=' + item.item.detection : ''}`), onCreate: () => navigate('/templates/view'), createPrompt: "route.templates.create", searchPrompt: "route.templates.manager.search", createIcon: _jsx(Article, { sx: { mr: 1 } }) }));
+};
+const Templates = () => {
+    return (_jsx(TuiListProvider, { children: _jsx(TemplatesBase, {}) }));
+};
+export default Templates;

package/dist/components/routes/views/ViewComposer.d.ts

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