@cccsaurora/howler-ui 2.12.0-dev.168

package/components/routes/overviews/startingTemplate.js

@@ -0,0 +1,183 @@
+import { useHelpers } from '@cccsaurora/howler-ui/components/elements/display/handlebars/helpers';
+import { useMemo } from 'react';
+export const useStartingTemplate = () => {
+    const helpers = useHelpers();
+    const helperText = useMemo(() => helpers
+        .map(helper => `
+### \`${helper.keyword}\`
+
+${helper.documentation}
+
+---
+`.trim())
+        .join('\n'), [helpers]);
+    return useMemo(() => `
+# Creating an Overview
+
+Overviews can be used to modify the way data is presented on alerts that match the overview's settings. Overviews are, by design, easy to create and quite flexible.
+
+## Getting Started
+
+The basic building blocks of overviews are:
+
+1. Markdown
+2. Handlebars
+
+We will quickly explain these.
+
+### Markdown
+
+Quoting from the excellent [markdownguide.org](https://www.markdownguide.org/getting-started/):
+
+> Markdown is a lightweight markup language that you can use to add formatting elements to plaintext text documents. Created by [John Gruber](https://daringfireball.net/projects/markdown/) in 2004, Markdown is now one of the world's most popular markup languages.
+>
+> Using Markdown is different than using a [WYSIWYG](https://en.wikipedia.org/wiki/WYSIWYG) editor. In an application like Microsoft Word, you click buttons to format words and phrases, and the changes are visible immediately. Markdown isn't like that. When you create a Markdown-formatted file, you add Markdown syntax to the text to indicate which words and phrases should look different.
+>
+> For example, to denote a heading, you add a number sign before it (e.g., \`# Heading One\`). Or to make a phrase bold, you add two asterisks before and after it (e.g., \`**this text is bold**\`). It may take a while to get used to seeing Markdown syntax in your text, especially if you're accustomed to WYSIWYG applications.
+
+---
+
+### Handlebars
+
+Quoting from [handlebarsjs.com](https://handlebarsjs.com/guide/):
+
+> Handlebars is a simple templating language.
+>
+> It uses a template and an input object to generate HTML or other text formats. Handlebars templates look like regular text with embedded Handlebars expressions.
+>
+>\`\`\`html
+> <p>{{curly "firstname"}} {{curly "lastname"}}</p>
+>\`\`\`
+>
+> A handlebars expression is a double curly bracket, some contents, followed by a set of closing double curly brackets. When the template is executed, these expressions are replaced with values from an input object.
+
+---
+
+For our cases, we use handlebars to replace specific parts of markdown with the values included in a given howler hit. For example:
+
+\`\`\`markdown
+This analytic is **{{curly "howler.analytic"}}**
+\`\`\`
+
+becomes:
+
+> This analytic is **{{howler.analytic}}**.
+
+For more information on handlebars, check out:
+
+- [What is Handlebars?](https://handlebarsjs.com/guide/#what-is-handlebars)
+- [Handlebars Expressions](https://handlebarsjs.com/guide/expressions.html)
+
+## Combining Markdown the Handlebars
+
+You can use handlebars for template replacement throughout your markdown. Below is an example table using handlebars and markdown:
+
+\`\`\`markdown
+| Source IP | Destination IP |
+| --- | --- |
+| {{curly "source.ip"}} |{{curly "destination.ip"}} |
+\`\`\`
+
+renders as:
+
+| Source IP | Destination IP |
+| --- | --- |
+| {{source.ip}} |{{destination.ip}} |
+
+## Advanced Handlebars
+
+Howler integrates a number of helper functions for you to work with.
+
+### Control Expressions
+
+For use as subexpressions, we expose a number of conditional checks:
+
+**Equality:**
+
+Given \`howler.status\` is {{howler.status}}:
+
+\`\`\`markdown
+{{curly '#if (equals howler.status "open")'}}
+Hit is open!
+{{curly "/if"}}
+{{curly '#if (equals howler.status "resolved")'}}
+Hit is resolved!
+{{curly "/if"}}
+\`\`\`
+
+{{#if (equals howler.status "open")}}
+Hit is open!
+{{/if}}
+{{#if (equals howler.status "resolved")}}
+Hit is resolved!
+{{/if}}
+
+**AND/OR/NOT:**
+
+Given \`howler.status\` is {{howler.status}}, and \`howler.escalation\` is {{howler.escalation}}:
+
+\`\`\`markdown
+{{curly '#if (and (equals howler.status "open") (equals howler.escalation "alert"))'}}
+This is correct!
+{{curly "/if"}}
+{{curly '#if (and (equals howler.status "resolved") (equals howler.escalation "hit"))'}}
+This is wrong!
+{{curly "/if"}}
+\`\`\`
+
+{{#if (and (equals howler.status "open") (equals howler.escalation "alert"))}}
+This is correct!
+{{/if}}
+{{#if (and (equals howler.status "resolved") (equals howler.escalation "hit"))}}
+This is wrong!
+{{/if}}
+
+\`\`\`markdown
+{{curly '#if (or howler.is_bundle (not howler.is_bundle))'}}
+Always shows!
+{{curly "/if"}}
+\`\`\`
+
+{{#if (or howler.is_bundle (not howler.is_bundle))}}
+Always shows!
+{{/if}}
+
+---
+
+### String Operations
+
+**String Concatenation:**
+\`\`\`markdown
+{{curly 'join "string one " "string two"'}}
+\`\`\`
+
+{{join "string one " "string two"}}
+
+**Uppercase/Lowercase:**
+
+\`\`\`markdown
+{{curly 'upper "make this uppercase"'}}
+{{curly 'lower "MAKE THIS LOWERCASE"'}}
+\`\`\`
+
+{{upper "make this uppercase"}}
+
+{{lower "MAKE THIS LOWERCASE"}}
+
+---
+
+### Fetching Data
+
+You can also make basic fetch requests for, and parse, JSON data from external sources:
+
+\`\`\`markdown
+{{curly 'fetch "/api/v1/configs" "api_response.c12nDef.UNRESTRICTED"'}}
+\`\`\`
+
+{{fetch "/api/v1/configs" "api_response.c12nDef.UNRESTRICTED"}}
+
+## Full Helper List
+
+${helperText}
+`, [helperText]);
+};

package/components/routes/settings/AdminSection.d.ts

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

package/components/routes/settings/AdminSection.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
+import { useTranslation } from 'react-i18next';
+import { usePluginStore } from 'react-pluggable';
+import SettingsSection from './SettingsSection';
+const AdminSection = () => {
+    const { t } = useTranslation();
+    const pluginStore = usePluginStore();
+    return (_jsx(SettingsSection, { title: t('page.settings.admin.title'), colSpan: 2, children: howlerPluginStore.plugins.map(plugin => pluginStore.executeFunction(`${plugin}.settings`, 'admin')) }));
+};
+export default AdminSection;

package/components/routes/settings/LocalSection.d.ts

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

package/components/routes/settings/LocalSection.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable react/jsx-no-literals */
+import { List, TableChart, ViewComfy, ViewCompact, ViewModule } from '@mui/icons-material';
+import { MenuItem, Select, Stack, TableCell, TableRow, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material';
+import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
+import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
+import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
+import { useTranslation } from 'react-i18next';
+import { usePluginStore } from 'react-pluggable';
+import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
+import EditRow from '../../elements/EditRow';
+import SettingsSection from './SettingsSection';
+const CELL_SX = { borderBottom: 0, paddingBottom: 0.5 };
+const LocalSection = () => {
+    const { t } = useTranslation();
+    const pluginStore = usePluginStore();
+    const [compactJson, setCompactJson] = useMyLocalStorageItem(StorageKey.COMPACT_JSON, true);
+    const [flattenJson, setFlattenJson] = useMyLocalStorageItem(StorageKey.FLATTEN_JSON, false);
+    const [forceDrawer, setForceDrawer] = useMyLocalStorageItem(StorageKey.FORCE_DRAWER, false);
+    const [hitLayout, setHitLayout] = useMyLocalStorageItem(StorageKey.HIT_LAYOUT, false);
+    const [displayType, setDisplayType] = useMyLocalStorageItem(StorageKey.DISPLAY_TYPE, 'list');
+    const [pageCount, setPageCount] = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25);
+    const [searchWidth, setSearchWidth] = useMyLocalStorageItem(StorageKey.SEARCH_PANE_WIDTH, null);
+    return (_jsxs(SettingsSection, { title: t('page.settings.local.title'), colSpan: 3, children: [_jsx(EditRow, { titleKey: "page.settings.local.compact.json", descriptionKey: "page.settings.local.compact.json.description", value: compactJson, type: "checkbox", onEdit: async (value) => setCompactJson(JSON.parse(value)) }), _jsx(EditRow, { titleKey: "page.settings.local.flatten.json", descriptionKey: "page.settings.local.flatten.json.description", value: flattenJson, type: "checkbox", onEdit: async (value) => setFlattenJson(JSON.parse(value)) }), _jsx(EditRow, { titleKey: "page.settings.local.details.drawer", descriptionKey: "page.settings.local.details.drawer.description", value: forceDrawer, type: "checkbox", onEdit: async (value) => setForceDrawer(JSON.parse(value)) }), _jsx(EditRow, { titleKey: "page.settings.local.search.width", descriptionKey: "page.settings.local.search.width.description", value: searchWidth, type: "range", min: 400, max: Math.floor(window.innerWidth / 100) * 100, optional: true, onEdit: async (value) => setSearchWidth(value ? parseInt(value) : null) }), _jsxs(TableRow, { children: [_jsx(TableCell, { sx: CELL_SX, style: { whiteSpace: 'nowrap' }, children: t('page.settings.local.hits.layout') }), _jsx(TableCell, { sx: CELL_SX, colSpan: 2, align: "right", children: _jsxs(ToggleButtonGroup, { size: "small", value: hitLayout, exclusive: true, onChange: (_, value) => setHitLayout(value), children: [_jsx(ToggleButton, { value: HitLayout.DENSE, children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(ViewCompact, {}), _jsx("span", { children: t('page.settings.local.hits.layout.dense') })] }) }), _jsx(ToggleButton, { value: HitLayout.NORMAL, children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(ViewModule, {}), _jsx("span", { children: t('page.settings.local.hits.layout.normal') })] }) }), _jsx(ToggleButton, { value: HitLayout.COMFY, children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(ViewComfy, {}), _jsx("span", { children: t('page.settings.local.hits.layout.comfy') })] }) })] }) })] }), _jsx(TableRow, { children: _jsx(TableCell, { colSpan: 3, sx: { paddingTop: '0 !important' }, children: _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('page.settings.local.hits.layout.description') }) }) }), _jsxs(TableRow, { children: [_jsx(TableCell, { sx: CELL_SX, style: { whiteSpace: 'nowrap' }, children: t('page.settings.local.hits.display_type') }), _jsx(TableCell, { sx: CELL_SX, colSpan: 2, align: "right", children: _jsxs(ToggleButtonGroup, { size: "small", value: displayType, exclusive: true, onChange: (_, value) => setDisplayType(value), children: [_jsx(ToggleButton, { value: "list", children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(List, {}), _jsx("span", { children: t('page.settings.local.hits.display_type.list') })] }) }), _jsx(ToggleButton, { value: "grid", children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(TableChart, {}), _jsx("span", { children: t('page.settings.local.hits.display_type.grid') })] }) })] }) })] }), _jsx(TableRow, { children: _jsx(TableCell, { colSpan: 3, sx: { paddingTop: '0 !important' }, children: _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('page.settings.local.hits.display_type.description') }) }) }), _jsxs(TableRow, { children: [_jsx(TableCell, { sx: CELL_SX, style: { whiteSpace: 'nowrap' }, children: t('page.settings.local.results.count') }), _jsx(TableCell, { sx: CELL_SX, colSpan: 2, align: "right", children: _jsxs(Select, { size: "small", sx: { minWidth: '75px', textAlign: 'left' }, value: pageCount, onChange: event => setPageCount(typeof event.target.value === 'string' ? parseInt(event.target.value) : event.target.value), children: [_jsx(MenuItem, { value: 5, children: "5" }), _jsx(MenuItem, { value: 10, children: "10" }), _jsx(MenuItem, { value: 25, children: "25" }), _jsx(MenuItem, { value: 50, children: "50" }), _jsx(MenuItem, { value: 75, children: "75" }), _jsx(MenuItem, { value: 100, children: "100" }), _jsx(MenuItem, { value: 150, children: "150" }), _jsx(MenuItem, { value: 250, children: "250" })] }) })] }), _jsx(TableRow, { children: _jsx(TableCell, { colSpan: 3, sx: { paddingTop: '0 !important' }, children: _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('page.settings.local.results.count.description') }) }) }), howlerPluginStore.plugins.map(plugin => pluginStore.executeFunction(`${plugin}.settings`, 'local'))] }));
+};
+export default LocalSection;

package/components/routes/settings/ProfileSection.d.ts

@@ -0,0 +1,10 @@
+import type { HowlerUser } from '@cccsaurora/howler-ui/models/entities/HowlerUser';
+import type { FC } from 'react';
+declare const ProfileSection: FC<{
+    user: HowlerUser;
+    editName?: (value: string) => Promise<void>;
+    addRole?: (role: string) => Promise<void>;
+    removeRole?: (role: string) => Promise<void>;
+    viewGroups: () => Promise<void>;
+}>;
+export default ProfileSection;

package/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 '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
+import { useCallback, useContext, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { usePluginStore } from 'react-pluggable';
+import { delay } from '@cccsaurora/howler-ui/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/components/routes/settings/SecuritySection.d.ts

@@ -0,0 +1,10 @@
+import type { HowlerUser } from '@cccsaurora/howler-ui/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/components/routes/settings/SecuritySection.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Add } from '@mui/icons-material';
+import { Chip, Grid, IconButton, TableCell, TableRow } from '@mui/material';
+import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import useMyLocalStorage from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
+import moment from 'moment';
+import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
+import { useContext, useMemo } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { usePluginStore } from 'react-pluggable';
+import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
+import EditRow from '../../elements/EditRow';
+import SettingsSection from './SettingsSection';
+const APIKEY_LABELS = {
+    R: '@cccsaurora/howler-ui/apikey.read',
+    W: '@cccsaurora/howler-ui/apikey.write',
+    E: '@cccsaurora/howler-ui/apikey.extended',
+    I: '@cccsaurora/howler-ui/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(Add, { 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/components/routes/settings/Settings.d.ts

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

package/components/routes/settings/Settings.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
+import UserPageWrapper from '@cccsaurora/howler-ui/components/elements/display/UserPageWrapper';
+import useMyLocalStorage from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
+import useMyUserFunctions from '@cccsaurora/howler-ui/components/hooks/useMyUserFunctions';
+import { useCallback, useMemo } from 'react';
+import { StorageKey } from '@cccsaurora/howler-ui/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/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/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/components/routes/templates/TemplateCard.d.ts

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

package/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/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/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/components/routes/templates/TemplateEditor.d.ts

@@ -0,0 +1,9 @@
+import { type Hit } from '@cccsaurora/howler-ui/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/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 '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import { FieldContext } from '@cccsaurora/howler-ui/components/app/providers/FieldProvider';
+import Phrase from '@cccsaurora/howler-ui/components/elements/addons/search/phrase/Phrase';
+import { get, isObject } from 'lodash-es';
+import {} from '@cccsaurora/howler-ui/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/components/routes/templates/TemplateViewer.d.ts

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