@cccsaurora/howler-ui 2.14.0-dev.268 → 2.14.0-dev.271

package/components/routes/overviews/markdownExtendedTokenProvider.js

@@ -0,0 +1,254 @@
+/**
+ * Adapted from https://github.com/microsoft/monaco-editor/blob/main/src/basic-languages/markdown/markdown.ts
+ */
+export const conf = {
+    comments: {
+        blockComment: ['<!--', '-->']
+    },
+    colorizedBracketPairs: [],
+    brackets: [
+        ['{', '}'],
+        ['[', ']'],
+        ['(', ')']
+    ],
+    autoClosingPairs: [
+        { open: '{', close: '}' },
+        { open: '[', close: ']' },
+        { open: '(', close: ')' },
+        { open: '<', close: '>', notIn: ['string'] }
+    ],
+    surroundingPairs: [
+        { open: '(', close: ')' },
+        { open: '[', close: ']' },
+        { open: '`', close: '`' }
+    ],
+    folding: {
+        markers: {
+            start: new RegExp('^\\s*<!--\\s*#?region\\b.*-->'),
+            end: new RegExp('^\\s*<!--\\s*#?endregion\\b.*-->')
+        }
+    }
+};
+export const language = {
+    defaultToken: '',
+    tokenPostfix: '.md',
+    // escape codes
+    control: /[\\`*_\[\]{}()#+\-\.!]/,
+    noncontrol: /[^\\`*_\[\]{}()#+\-\.!]/,
+    escapes: /\\(?:@control)/,
+    // escape codes for javascript/CSS strings
+    jsescapes: /\\(?:[btnfr\\"']|[0-7][0-7]?|[0-3][0-7]{2})/,
+    // non matched elements
+    empty: ['area', 'base', 'basefont', 'br', 'col', 'frame', 'hr', 'img', 'input', 'isindex', 'link', 'meta', 'param'],
+    // CCCS MODIFICATION START
+    handlebars_operators: [
+        '#if',
+        '/if',
+        '#unless',
+        '/unless',
+        '#each',
+        '/each',
+        '#with',
+        '/with',
+        'lookup',
+        'log',
+        'equals',
+        'and',
+        'or',
+        'not',
+        'join',
+        'fetch',
+        'upper',
+        'lower'
+        // TODO: Handle plugin-based operators as well
+    ],
+    // CCCS MODIFICATION END
+    tokenizer: {
+        root: [
+            // markdown tables
+            [/^\s*\|/, '@rematch', '@table_header'],
+            // headers (with #)
+            [/^(\s{0,3})(#+)((?:[^\\#]|@escapes)+)((?:#+)?)/, ['white', 'keyword', 'keyword', 'keyword']],
+            // headers (with =)
+            [/^\s*(=+|\-+)\s*$/, 'keyword'],
+            // headers (with ***)
+            [/^\s*((\*[ ]?)+)\s*$/, 'meta.separator'],
+            // quote
+            [/^\s*>+/, 'comment'],
+            // list (starting with * or number)
+            [/^\s*([\*\-+:]|\d+\.)\s/, 'keyword'],
+            // code block (4 spaces indent)
+            [/^(\t|[ ]{4})[^ ].*$/, 'string'],
+            // code block (3 tilde)
+            [/^\s*~~~\s*((?:\w|[\/\-#])+)?\s*$/, { token: 'string', next: '@codeblock' }],
+            // github style code blocks (with backticks and language)
+            [/^\s*```\s*((?:\w|[\/\-#])+).*$/, { token: 'string', next: '@codeblockgh', nextEmbedded: '$1' }],
+            // github style code blocks (with backticks but no language)
+            [/^\s*```\s*$/, { token: 'string', next: '@codeblock' }],
+            // CCCS MODIFICATION
+            [/{{/, { token: 'handlebars', next: '@handlebars' }],
+            // markup within lines
+            { include: '@linecontent' }
+        ],
+        // CCCS MODIFICATION START
+        handlebars: [
+            [/"[^"]+"/, 'string'],
+            [/[()]/, 'handlebars'],
+            [/[\w\d\.]+/, 'variable'],
+            [
+                /[#/\w]+/,
+                {
+                    cases: {
+                        '@handlebars_operators': { token: 'operator' },
+                        '@default': { token: 'variable' }
+                    }
+                }
+            ],
+            [/}}/, { token: 'handlebars', next: '@pop' }]
+        ],
+        // CCCS MODIFICATION END
+        table_header: [
+            { include: '@table_common' },
+            [/[^\|]+/, 'keyword.table.header'] // table header
+        ],
+        table_body: [{ include: '@table_common' }, { include: '@linecontent' }],
+        table_common: [
+            [/\s*[\-:]+\s*/, { token: 'keyword', switchTo: 'table_body' }], // header-divider
+            [/^\s*\|/, 'keyword.table.left'], // opening |
+            [/^\s*[^\|]/, '@rematch', '@pop'], // exiting
+            [/^\s*$/, '@rematch', '@pop'], // exiting
+            [
+                /\|/,
+                {
+                    cases: {
+                        '@eos': 'keyword.table.right', // closing |
+                        '@default': 'keyword.table.middle' // inner |
+                    }
+                }
+            ]
+        ],
+        codeblock: [
+            [/^\s*~~~\s*$/, { token: 'string', next: '@pop' }],
+            [/^\s*```\s*$/, { token: 'string', next: '@pop' }],
+            [/.*$/, 'variable.source']
+        ],
+        // github style code blocks
+        codeblockgh: [
+            [/```\s*$/, { token: 'string', next: '@pop', nextEmbedded: '@pop' }],
+            [/[^`]+/, 'variable.source']
+        ],
+        linecontent: [
+            // escapes
+            [/&\w+;/, 'string.escape'],
+            [/@escapes/, 'escape'],
+            // various markup
+            [/\b__([^\\_]|@escapes|_(?!_))+__\b/, 'strong'],
+            [/\*\*([^\\*]|@escapes|\*(?!\*))+\*\*/, 'strong'],
+            [/\b_[^_]+_\b/, 'emphasis'],
+            [/\*([^\\*]|@escapes)+\*/, 'emphasis'],
+            [/`/, { token: 'variable', next: '@codecontent' }],
+            // links
+            [/\{+[^}]+\}+/, 'string.target'],
+            [/(!?\[)((?:[^\]\\]|@escapes)*)(\]\([^\)]+\))/, ['string.link', '', 'string.link']],
+            [/(!?\[)((?:[^\]\\]|@escapes)*)(\])/, 'string.link'],
+            // or html
+            { include: 'html' }
+        ],
+        codecontent: [
+            // CCCS MODIFICATION
+            [/{{/, { token: 'handlebars', next: '@handlebars' }],
+            [/([^\\`]|@escapes)+/, 'variable'],
+            [/`/, { token: 'variable', next: '@pop' }]
+        ],
+        // Note: it is tempting to rather switch to the real HTML mode instead of building our own here
+        // but currently there is a limitation in Monarch that prevents us from doing it: The opening
+        // '<' would start the HTML mode, however there is no way to jump 1 character back to let the
+        // HTML mode also tokenize the opening angle bracket. Thus, even though we could jump to HTML,
+        // we cannot correctly tokenize it in that mode yet.
+        html: [
+            // html tags
+            [/<(\w+)\/>/, 'tag'],
+            [
+                /<(\w+)(\-|\w)*/,
+                {
+                    cases: {
+                        '@empty': { token: 'tag', next: '@tag.$1' },
+                        '@default': { token: 'tag', next: '@tag.$1' }
+                    }
+                }
+            ],
+            [/<\/(\w+)(\-|\w)*\s*>/, { token: 'tag' }],
+            [/<!--/, 'comment', '@comment']
+        ],
+        comment: [
+            [/[^<\-]+/, 'comment.content'],
+            [/-->/, 'comment', '@pop'],
+            [/<!--/, 'comment.content.invalid'],
+            [/[<\-]/, 'comment.content']
+        ],
+        // Almost full HTML tag matching, complete with embedded scripts & styles
+        tag: [
+            [/[ \t\r\n]+/, 'white'],
+            [
+                /(type)(\s*=\s*)(")([^"]+)(")/,
+                [
+                    'attribute.name.html',
+                    'delimiter.html',
+                    'string.html',
+                    { token: 'string.html', switchTo: '@tag.$S2.$4' },
+                    'string.html'
+                ]
+            ],
+            [
+                /(type)(\s*=\s*)(')([^']+)(')/,
+                [
+                    'attribute.name.html',
+                    'delimiter.html',
+                    'string.html',
+                    { token: 'string.html', switchTo: '@tag.$S2.$4' },
+                    'string.html'
+                ]
+            ],
+            [/(\w+)(\s*=\s*)("[^"]*"|'[^']*')/, ['attribute.name.html', 'delimiter.html', 'string.html']],
+            [/\w+/, 'attribute.name.html'],
+            [/\/>/, 'tag', '@pop'],
+            [
+                />/,
+                {
+                    cases: {
+                        '$S2==style': {
+                            token: 'tag',
+                            switchTo: 'embeddedStyle',
+                            nextEmbedded: 'text/css'
+                        },
+                        '$S2==script': {
+                            cases: {
+                                $S3: {
+                                    token: 'tag',
+                                    switchTo: 'embeddedScript',
+                                    nextEmbedded: '$S3'
+                                },
+                                '@default': {
+                                    token: 'tag',
+                                    switchTo: 'embeddedScript',
+                                    nextEmbedded: 'text/javascript'
+                                }
+                            }
+                        },
+                        '@default': { token: 'tag', next: '@pop' }
+                    }
+                }
+            ]
+        ],
+        embeddedStyle: [
+            [/[^<]+/, ''],
+            [/<\/style\s*>/, { token: '@rematch', next: '@pop', nextEmbedded: '@pop' }],
+            [/</, '']
+        ],
+        embeddedScript: [
+            [/[^<]+/, ''],
+            [/<\/script\s*>/, { token: '@rematch', next: '@pop', nextEmbedded: '@pop' }],
+            [/</, '']
+        ]
+    }
+};

package/components/routes/overviews/startingTemplate.d.ts

@@ -0,0 +1 @@
+export declare const useStartingTemplate: () => string;

package/components/routes/overviews/startingTemplate.js

@@ -0,0 +1,27 @@
+import { useHelpers } from '@cccsaurora/howler-ui/components/elements/display/handlebars/helpers';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import TEMPLATE_EN from './template/en.md';
+import TEMPLATE_FR from './template/fr.md';
+const TEMPLATES = {
+    en: TEMPLATE_EN,
+    fr: TEMPLATE_FR
+};
+export const useStartingTemplate = () => {
+    const helpers = useHelpers();
+    const { i18n } = useTranslation();
+    const helperText = useMemo(() => helpers
+        .map(helper => `
+### \`${helper.keyword}\`
+
+${helper.documentation[i18n.language]}
+
+---
+`.trim())
+        .join('\n'), [helpers, i18n.language]);
+    return useMemo(() => `
+${TEMPLATES[i18n.language] ?? TEMPLATES.en}
+
+${helperText}
+`, [helperText, i18n.language]);
+};

package/components/routes/overviews/template/en.md.js

@@ -0,0 +1 @@
+export default "# Creating an Overview\n\nOverviews 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.\n\n## Getting Started\n\nThe basic building blocks of overviews are:\n\n1. Markdown\n2. Handlebars\n\nWe will quickly explain these.\n\n### Markdown\n\nQuoting from the excellent [markdownguide.org](https://www.markdownguide.org/getting-started/):\n\n> 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.\n>\n> 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.\n>\n> 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.\n\n---\n\n### Handlebars\n\nQuoting from [handlebarsjs.com](https://handlebarsjs.com/guide/):\n\n> Handlebars is a simple templating language.\n>\n> 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.\n>\n>```html\n> <p>{{curly \"firstname\"}} {{curly \"lastname\"}}</p>\n>```\n>\n> 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.\n\n---\n\nFor our cases, we use handlebars to replace specific parts of markdown with the values included in a given howler hit. For example:\n\n```markdown\nThis analytic is **{{curly \"howler.analytic\"}}**\n```\n\nbecomes:\n\n> This analytic is **{{howler.analytic}}**.\n\nFor more information on handlebars, check out:\n\n- [What is Handlebars?](https://handlebarsjs.com/guide/#what-is-handlebars)\n- [Handlebars Expressions](https://handlebarsjs.com/guide/expressions.html)\n\n## Combining Markdown and Handlebars\n\nYou can use handlebars for template replacement throughout your markdown. Below is an example table using handlebars and markdown:\n\n```markdown\n\n| Source IP | Destination IP |\n| --- | --- |\n| {{curly \"source.ip\"}} |{{curly \"destination.ip\"}} |\n```\n\nrenders as:\n\n| Source IP | Destination IP |\n| --- | --- |\n| {{source.ip}} |{{destination.ip}} |\n\n## Advanced Handlebars\n\nHowler integrates a number of helper functions for you to work with.\n\n### Control Expressions\n\nFor use as subexpressions, we expose a number of conditional checks:\n\n**Equality:**\n\nGiven `howler.status` is {{howler.status}}:\n\n```markdown\n{{curly '#if (equals howler.status \"open\")'}}\nHit is open!\n{{curly \"/if\"}}\n{{curly '#if (equals howler.status \"resolved\")'}}\nHit is resolved!\n{{curly \"/if\"}}\n```\n\n{{#if (equals howler.status \"open\")}}\nHit is open!\n{{/if}}\n{{#if (equals howler.status \"resolved\")}}\nHit is resolved!\n{{/if}}\n\n**AND/OR/NOT:**\n\nGiven `howler.status` is {{howler.status}}, and `howler.escalation` is {{howler.escalation}}:\n\n```markdown\n{{curly '#if (and (equals howler.status \"open\") (equals howler.escalation \"alert\"))'}}\nThis is correct!\n{{curly \"/if\"}}\n{{curly '#if (and (equals howler.status \"resolved\") (equals howler.escalation \"hit\"))'}}\nThis is wrong!\n{{curly \"/if\"}}\n```\n\n{{#if (and (equals howler.status \"open\") (equals howler.escalation \"alert\"))}}\nThis is correct!\n{{/if}}\n{{#if (and (equals howler.status \"resolved\") (equals howler.escalation \"hit\"))}}\nThis is wrong!\n{{/if}}\n\n```markdown\n{{curly '#if (or howler.is_bundle (not howler.is_bundle))'}}\nAlways shows!\n{{curly \"/if\"}}\n```\n\n{{#if (or howler.is_bundle (not howler.is_bundle))}}\nAlways shows!\n{{/if}}\n\n---\n\n### String Operations\n\n**String Concatenation:**\n\n```markdown\n{{curly 'join \"string one \" \"string two\"'}}\n```\n\n{{join \"string one \" \"string two\"}}\n\n**Uppercase/Lowercase:**\n\n```markdown\n{{curly 'upper \"make this uppercase\"'}}\n{{curly 'lower \"MAKE THIS LOWERCASE\"'}}\n```\n\n{{upper \"make this uppercase\"}}\n\n{{lower \"MAKE THIS LOWERCASE\"}}\n\n---\n\n### Fetching Data\n\nYou can also make basic fetch requests for, and parse, JSON data from external sources:\n\n```markdown\n{{curly 'fetch \"/api/v1/configs\" \"api_response.c12nDef.UNRESTRICTED\"'}}\n```\n\n{{fetch \"/api/v1/configs\" \"api_response.c12nDef.UNRESTRICTED\"}}\n\n## Full Helper List\n"

package/components/routes/overviews/template/fr.md.js

@@ -0,0 +1 @@
+export default "# Cr\u00e9er un aper\u00e7u\n\nLes aper\u00e7us peuvent \u00eatre utilis\u00e9s pour modifier la fa\u00e7on dont les donn\u00e9es sont pr\u00e9sent\u00e9es sur les alertes qui correspondent aux param\u00e8tres de l'aper\u00e7u. Les aper\u00e7us sont, par conception, faciles \u00e0 cr\u00e9er et assez flexibles.\n\n## Premiers pas\n\nLes \u00e9l\u00e9ments de base des aper\u00e7us sont :\n\n1. Markdown\n2. Handlebars\n\nNous allons rapidement expliquer ces \u00e9l\u00e9ments.\n\n### Markdown\n\nCitation de l'excellent [markdownguide.org](https://www.markdownguide.org/getting-started/) :\n\n> Markdown est un langage de balisage l\u00e9ger que vous pouvez utiliser pour ajouter des \u00e9l\u00e9ments de formatage aux documents texte en texte brut. Cr\u00e9\u00e9 par [John Gruber](https://daringfireball.net/projects/markdown/) en 2004, Markdown est maintenant l'un des langages de balisage les plus populaires au monde.\n>\n> L'utilisation de Markdown est diff\u00e9rente de l'utilisation d'un \u00e9diteur [WYSIWYG](https://en.wikipedia.org/wiki/WYSIWYG). Dans une application comme Microsoft Word, vous cliquez sur des boutons pour formater les mots et les phrases, et les changements sont visibles imm\u00e9diatement. Markdown n'est pas comme cela. Lorsque vous cr\u00e9ez un fichier format\u00e9 en Markdown, vous ajoutez une syntaxe Markdown au texte pour indiquer quels mots et phrases doivent appara\u00eetre diff\u00e9remment.\n>\n> Par exemple, pour d\u00e9signer un titre, vous ajoutez un signe di\u00e8se avant celui-ci (par ex., `# Titre Un`). Ou pour mettre une phrase en gras, vous ajoutez deux ast\u00e9risques avant et apr\u00e8s (par ex., `**ce texte est en gras**`). Il peut falloir un certain temps pour s'habituer \u00e0 voir la syntaxe Markdown dans votre texte, surtout si vous \u00eates habitu\u00e9 aux applications WYSIWYG.\n\n---\n\n### Handlebars\n\nCitation de [handlebarsjs.com](https://handlebarsjs.com/guide/) :\n\n> Handlebars est un langage de template simple.\n>\n> Il utilise un template et un objet d'entr\u00e9e pour g\u00e9n\u00e9rer du HTML ou d'autres formats de texte. Les templates Handlebars ressemblent \u00e0 du texte normal avec des expressions Handlebars int\u00e9gr\u00e9es.\n>\n>```html\n> <p>{{curly \"firstname\"}} {{curly \"lastname\"}}</p>\n>```\n>\n> Une expression handlebars est une double accolade, du contenu, suivi d'un ensemble d'accolades fermantes doubles. Lorsque le template est ex\u00e9cut\u00e9, ces expressions sont remplac\u00e9es par des valeurs d'un objet d'entr\u00e9e.\n\n---\n\nDans nos cas, nous utilisons handlebars pour remplacer des parties sp\u00e9cifiques du markdown par les valeurs incluses dans un r\u00e9sultat howler donn\u00e9. Par exemple :\n\n```markdown\nCette analytique est **{{curly \"howler.analytic\"}}**\n```\n\ndevient :\n\n> Cette analytique est **{{howler.analytic}}**.\n\nPour plus d'informations sur handlebars, consultez :\n\n- [Qu'est-ce que Handlebars ?](https://handlebarsjs.com/guide/#what-is-handlebars)\n- [Expressions Handlebars](https://handlebarsjs.com/guide/expressions.html)\n\n## Combiner Markdown et Handlebars\n\nVous pouvez utiliser handlebars pour le remplacement de template dans tout votre markdown. Voici un exemple de tableau utilisant handlebars et markdown :\n\n```markdown\n\n| IP Source | IP Destination |\n| --- | --- |\n| {{curly \"source.ip\"}} |{{curly \"destination.ip\"}} |\n```\n\ns'affiche comme :\n\n| IP Source | IP Destination |\n| --- | --- |\n| {{source.ip}} |{{destination.ip}} |\n\n## Handlebars avanc\u00e9s\n\nHowler int\u00e8gre un certain nombre de fonctions d'aide avec lesquelles vous pouvez travailler.\n\n### Expressions de contr\u00f4le\n\nPour utilisation comme sous-expressions, nous exposons un certain nombre de v\u00e9rifications conditionnelles :\n\n**\u00c9galit\u00e9 :**\n\n\u00c9tant donn\u00e9 que `howler.status` est {{howler.status}} :\n\n```markdown\n{{curly '#if (equals howler.status \"open\")'}}\nLe r\u00e9sultat est ouvert !\n{{curly \"/if\"}}\n{{curly '#if (equals howler.status \"resolved\")'}}\nLe r\u00e9sultat est r\u00e9solu !\n{{curly \"/if\"}}\n```\n\n{{#if (equals howler.status \"open\")}}\nLe r\u00e9sultat est ouvert !\n{{/if}}\n{{#if (equals howler.status \"resolved\")}}\nLe r\u00e9sultat est r\u00e9solu !\n{{/if}}\n\n**ET/OU/NON :**\n\n\u00c9tant donn\u00e9 que `howler.status` est {{howler.status}}, et `howler.escalation` est {{howler.escalation}} :\n\n```markdown\n{{curly '#if (and (equals howler.status \"open\") (equals howler.escalation \"alert\"))'}}\nC'est correct !\n{{curly \"/if\"}}\n{{curly '#if (and (equals howler.status \"resolved\") (equals howler.escalation \"hit\"))'}}\nC'est incorrect !\n{{curly \"/if\"}}\n```\n\n{{#if (and (equals howler.status \"open\") (equals howler.escalation \"alert\"))}}\nC'est correct !\n{{/if}}\n{{#if (and (equals howler.status \"resolved\") (equals howler.escalation \"hit\"))}}\nC'est incorrect !\n{{/if}}\n\n```markdown\n{{curly '#if (or howler.is_bundle (not howler.is_bundle))'}}\nS'affiche toujours !\n{{curly \"/if\"}}\n```\n\n{{#if (or howler.is_bundle (not howler.is_bundle))}}\nS'affiche toujours !\n{{/if}}\n\n---\n\n### Op\u00e9rations sur les cha\u00eenes\n\n**Concat\u00e9nation de cha\u00eenes :**\n\n```markdown\n{{curly 'join \"cha\u00eene une \" \"cha\u00eene deux\"'}}\n```\n\n{{join \"cha\u00eene une \" \"cha\u00eene deux\"}}\n\n**Majuscules/Minuscules :**\n\n```markdown\n{{curly 'upper \"mettre ceci en majuscules\"'}}\n{{curly 'lower \"METTRE CECI EN MINUSCULES\"'}}\n```\n\n{{upper \"mettre ceci en majuscules\"}}\n\n{{lower \"METTRE CECI EN MINUSCULES\"}}\n\n---\n\n### R\u00e9cup\u00e9ration de donn\u00e9es\n\nVous pouvez \u00e9galement faire des requ\u00eates fetch de base pour r\u00e9cup\u00e9rer et analyser des donn\u00e9es JSON de sources externes :\n\n```markdown\n{{curly 'fetch \"/api/v1/configs\" \"api_response.c12nDef.UNRESTRICTED\"'}}\n```\n\n{{fetch \"/api/v1/configs\" \"api_response.c12nDef.UNRESTRICTED\"}}\n\n## Liste compl\u00e8te des assistants\n"

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 dayjs from 'dayjs';
+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: dayjs.utc(apiKey[2]).isBefore(dayjs().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;